diff --git a/README.md b/README.md
index f72a656c..e5280bd9 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@ Access thousands of icons as components **on-demand** universally.
   - 🤹 **Any** icon sets - 100+ popular sets with over 10,000 icons, logos, emojis, etc. Powered by [Iconify](https://github.com/iconify/iconify).
   - 📦 **Major** build tools - Vite, Webpack, Rollup, Nuxt, etc. Powered by [unplugin](https://github.com/unjs/unplugin).
   - 🪜 **Major** frameworks - Vanilla, Web Components, React, Vue 3, Vue 2, Solid, Svelte, and more. [Contribute](./src/core/compiles).
+  - 🗃️ **CSS** icons - Use icons as css stylesheets with or without any framework (experimental).
   - 🍱 **Any** combinations of them!
 - ☁️ On-demand - Only bundle the icons you really use, while having all the options.
 - 🖨 SSR / SSG friendly - Ship the icons with your page, no more FOUC.
@@ -650,6 +651,23 @@ IconsResolver({
 </template>
 ```
 
+### CSS Icons
+
+You can use svg icons as a `css stylesheet` (no framework required):
+```ts
+import '~icons/{collection}/{icon}.css'
+```
+
+then add an `html` element with a `class` with a name following the convention: `{collection}-{icon}`.
+
+For example:
+```html
+<span class="mdi-account" style="font-size: 2em;"></span>
+<script type="module">
+import '~icons/mdi/account.css'
+</script>
+```
+
 ### Collection Aliases
 
 When using component resolver, you have to use the name of the collection that can be long or redundant: for example, 
diff --git a/examples/sveltekit/src/routes/index.svelte b/examples/sveltekit/src/routes/index.svelte
index 3c390674..292bc088 100644
--- a/examples/sveltekit/src/routes/index.svelte
+++ b/examples/sveltekit/src/routes/index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import 'virtual:icons/logos/svelte-icon.css'
 import SvelteLogo from 'virtual:icons/logos/svelte-icon'
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
@@ -7,6 +8,7 @@ import IconParkAbnormal from 'virtual:icons/icon-park/abnormal'
 
 <main>
   <SvelteLogo style="font-size:2em" />
+  <span class="logos-svelte-icon"></span>
   <br />
   <br />
   <MdiStore24Hour />
diff --git a/examples/vite-preact/src/app.tsx b/examples/vite-preact/src/app.tsx
index 2de44cb5..0d3fc33f 100644
--- a/examples/vite-preact/src/app.tsx
+++ b/examples/vite-preact/src/app.tsx
@@ -1,9 +1,11 @@
+import '~icons/logos/preact.css'
 import Logo from '~icons/logos/preact'
 
 export function App() {
   return (
     <>
       <Logo style={{ fontSize: '3em' }} />
+      <span className="logos-preact" />
       <p>Hello Vite + Preact!</p>
       <p>
         <a
diff --git a/examples/vite-react/src/App.tsx b/examples/vite-react/src/App.tsx
index f1ce0da8..c1fd190f 100644
--- a/examples/vite-react/src/App.tsx
+++ b/examples/vite-react/src/App.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import './App.css'
+import '~icons/logos/react.css'
 import ReactLogo from '~icons/logos/react'
 
 function a() {
@@ -13,6 +14,7 @@ function App() {
     <div className="App">
       <header className="App-header">
         <ReactLogo style={{ fontSize: '3em' }} />
+        <span className="logos-react" />
         <p>Hello Vite + React!</p>
         <p>
           <button type="button" onClick={() => setCount(count => count + 1)}>
diff --git a/examples/vite-svelte/src/App.svelte b/examples/vite-svelte/src/App.svelte
index 20bf8a5b..1c090104 100644
--- a/examples/vite-svelte/src/App.svelte
+++ b/examples/vite-svelte/src/App.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import 'virtual:icons/logos/svelte-icon.css'
   import SvelteLogo from 'virtual:icons/logos/svelte-icon'
   import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
   import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
@@ -7,6 +8,7 @@
 
 <main>
   <SvelteLogo style="font-size:2em" />
+  <span class="logos-svelte-icon"></span>
   <br />
   <br />
   <MdiStore24Hour />
diff --git a/examples/vite-vanilla/index.html b/examples/vite-vanilla/index.html
index 17ec8a40..bbdef5ab 100644
--- a/examples/vite-vanilla/index.html
+++ b/examples/vite-vanilla/index.html
@@ -6,7 +6,9 @@
 </head>
 <body>
   <div id="app" style="color: rgb(99, 195, 174)"></div>
+  <span class="mono-icons-layers"></span>
   <script type="module">
+    import '~icons/mono-icons/layers.css'
     import Layer from '~icons/mono-icons/layers'
 
     const root = document.getElementById('app')
diff --git a/examples/vite-vue3/App.vue b/examples/vite-vue3/App.vue
index 97d258e1..eb9e661f 100644
--- a/examples/vite-vue3/App.vue
+++ b/examples/vite-vue3/App.vue
@@ -28,6 +28,17 @@
       <i-inline-foo />
       <i-inline-async />
     </p>
+    <h2>CSS Icons</h2>
+    <p>
+      <span class="logos-vue"></span>
+      <span class="carbon-app-connectivity"></span>
+      <span class="mdi-account"></span>
+      <span class="mdi-alarm-off"></span>
+      <span class="custom-steering-wheel"></span>
+      <span class="custom-car-a"></span>
+      <span class="inline-foo"></span>
+      <span class="inline-async"></span>
+    </p>
     <h2>Collection alias</h2>
     <p>
       <i-park-abnormal />
@@ -40,4 +51,19 @@
 <script setup lang='ts'>
 import MdiStore24Hour from 'virtual:icons/mdi/store-24-hour'
 import MdiAlarmOff from 'virtual:icons/mdi/alarm-off'
+// do not change to ~icons/logos/vue.css , for testing purposes
+import 'virtual:icons/logos/vue.css'
+import '~icons/carbon/app-connectivity.css'
+import '~icons/mdi/account.css'
+import '~icons/mdi/alarm-off.css'
+import '~icons/custom/steering-wheel.css'
+import '~icons/custom/car-a.css'
+import '~icons/inline/foo.css'
+import '~icons/inline/async.css'
 </script>
+
+<style>
+.logos-vue {
+  font-size: 2em;
+}
+</style>
diff --git a/examples/vite-web-components/index.html b/examples/vite-web-components/index.html
index 75b9b4f7..2b7c63eb 100644
--- a/examples/vite-web-components/index.html
+++ b/examples/vite-web-components/index.html
@@ -6,10 +6,12 @@
 </head>
 <body>
   <script type="module">
+    import '~icons/mono-icons/layers.css'
     import '~icons/mono-icons/layers'
     import '~icons/ion/logo-web-component'
   </script>
   <icon-mono-icons-layers style="color: rgb(99, 195, 174)" ></icon-mono-icons-layers>
   <icon-ion-logo-web-component style="color: rgb(214, 162, 93)" ></icon-ion-logo-web-component>
+  <span class="mono-icons-layers"></span>
 </body>
 </html>
diff --git a/src/core/compilers/css.ts b/src/core/compilers/css.ts
new file mode 100644
index 00000000..dda336dc
--- /dev/null
+++ b/src/core/compilers/css.ts
@@ -0,0 +1,27 @@
+import { ResolvedOptions } from '../../types'
+import { Compiler } from './types'
+
+export const CssCompiler = <Compiler>((
+  svg: string,
+  collection: string,
+  icon: string,
+  options: ResolvedOptions,
+) => {
+  let inlineSvg = svg.replace(/"/g, '\'')
+
+  // we need to add the svg xml namespace
+  if (!inlineSvg.includes('http://www.w3.org/2000/svg'))
+    inlineSvg = inlineSvg.replace('<svg ', '<svg xmlns=\'http://www.w3.org/2000/svg\' ')
+
+  const scale = options?.css.scale ?? 1.2
+
+  return `.${collection}-${icon} {
+background-image: url("data:image/svg+xml;base64,${Buffer.from(inlineSvg, 'utf-8').toString('base64')}");
+background-size: ${scale}em ${scale}em;
+height: ${scale}em;
+width: ${scale}em;
+display: inline-block;
+${options.css.defaultStyles || ''}
+}
+`
+})
diff --git a/src/core/compilers/index.ts b/src/core/compilers/index.ts
index 32952c46..8dad4683 100644
--- a/src/core/compilers/index.ts
+++ b/src/core/compilers/index.ts
@@ -9,8 +9,10 @@ import { Compiler } from './types'
 import { Vue2Compiler } from './vue2'
 import { Vue3Compiler } from './vue3'
 import { WebComponentsCompiler } from './web-components'
+import { CssCompiler } from './css'
 
 export const compilers: Record<ResolvedOptions['compiler'], Compiler> = {
+  'css': CssCompiler,
   'vue2': Vue2Compiler,
   'vue3': Vue3Compiler,
   'solid': SolidCompiler,
diff --git a/src/core/custom.ts b/src/core/custom.ts
index d19af723..16c491d0 100644
--- a/src/core/custom.ts
+++ b/src/core/custom.ts
@@ -25,8 +25,20 @@ export async function getCustomIcon(
   const scale = options?.scale || 1
 
   if (result) {
-    if (!result.startsWith('<svg '))
+    const startSvg = result.indexOf('<svg ')
+    if (startSvg === -1 || startSvg > 0)
       console.warn(`Custom icon "${icon}" in "${collection}" is not a valid SVG`)
+    // prevent adding width and height twice on css
+    if (options?.compiler === 'css' && startSvg > -1) {
+      // if width or height are set we assume both are set
+      const closeSvg = result.indexOf('>', startSvg + 5)
+      let idx = result.indexOf('width')
+      if (idx > -1 && closeSvg > idx)
+        return result
+      idx = result.indexOf('height', startSvg + 5)
+      if (idx > -1 && closeSvg > idx)
+        return result
+    }
     return result.replace('<svg ', `<svg height="${scale}em" width="${scale}em" `)
   }
 }
diff --git a/src/core/options.ts b/src/core/options.ts
index ce18ad5a..729fa5c0 100644
--- a/src/core/options.ts
+++ b/src/core/options.ts
@@ -13,6 +13,7 @@ export async function resolveOptions(options: Options): Promise<ResolvedOptions>
     jsx = guessJSX(),
     customCollections = {},
     autoInstall = false,
+    css = {},
   } = options
 
   const webComponents = Object.assign({
@@ -31,6 +32,7 @@ export async function resolveOptions(options: Options): Promise<ResolvedOptions>
     jsx,
     webComponents,
     autoInstall,
+    css,
   }
 }
 
diff --git a/src/index.ts b/src/index.ts
index 67a3f875..16dc8d8c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,9 @@ const unplugin = createUnplugin<Options>((options = {}) => {
     enforce: 'pre',
     resolveId(id) {
       if (isIconPath(id)) {
+        if (id.endsWith('.css'))
+          return id
+
         const res = normalizeIconPath(id)
           .replace(/\.\w+$/i, '')
           .replace(/^\//, '')
@@ -32,7 +35,22 @@ const unplugin = createUnplugin<Options>((options = {}) => {
     async load(id) {
       const config = await resolved
       if (isIconPath(id)) {
-        const code = await generateComponentFromPath(id, config) || null
+        let code: string | null = null
+        const css = id.endsWith('.css')
+        if (css) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          code = await generateComponentFromPath(id, {
+            ...config,
+            compiler: 'css',
+            scale: options.css?.scale ?? 1.2,
+            defaultStyle: options.css?.defaultStyles || '',
+            defaultClass: '',
+          }) || null
+        }
+        else {
+          code = await generateComponentFromPath(id, config) || null
+        }
+
         if (code) {
           return {
             code,
diff --git a/src/types.ts b/src/types.ts
index 1a2d7a24..5227795b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -45,7 +45,7 @@ export interface Options {
    *
    * @default (detect automatically, fallback to 'vue3')
    */
-  compiler?: 'vue2' | 'vue3' | 'jsx' | 'solid' | 'svelte' | 'web-components' | 'marko' | 'none' | 'raw'
+  compiler?: 'vue2' | 'vue3' | 'jsx' | 'solid' | 'svelte' | 'web-components' | 'marko' | 'css' | 'none' | 'raw'
 
   /**
    * JSX style, works only when compiler set to `jsx`
@@ -71,6 +71,24 @@ export interface Options {
     iconPrefix?: string
   }
 
+  /**
+   * Config for CSS compiler
+   */
+  css?: {
+    /**
+     * Scale of icons against 1em
+     *
+     * @default 1.2
+     */
+    scale?: number
+    /**
+     * Styles to apply to CSS icons by default
+     *
+     * @default ''
+     */
+    defaultStyles?: string
+  }
+
   /**
    * @deprecated no longer needed
    */
diff --git a/types/css.d.ts b/types/css.d.ts
new file mode 100644
index 00000000..8b590316
--- /dev/null
+++ b/types/css.d.ts
@@ -0,0 +1,9 @@
+declare module 'virtual:icons/*.css' {
+  const css: string
+  export default css
+}
+
+declare module '~icons/*.css' {
+  const css: string
+  export default css
+}