unocss
diff --git a/‎packages-presets/preset-icons/src/core.ts‎
Lines changed: 11 additions & 1 deletion b/‎packages-presets/preset-icons/src/core.ts‎
Lines changed: 11 additions & 1 deletion
diff --git a/‎test/preset-icons.test.ts‎
Lines changed: 39 additions & 0 deletions b/‎test/preset-icons.test.ts‎
Lines changed: 39 additions & 0 deletions
@@ -10,6 +10,7 @@ import { getEnvFlags } from '#integration/env'
 import icons from './collections'
 
 const COLLECTION_NAME_PARTS_MAX = 3
+const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap|ch|ic)|(?:[sld]?v|cq)(?:[whib]|min|max)|in|cm|mm|rpx)?$/i
 
 export { IconsOptions }
 export { icons }
@@ -89,14 +90,23 @@ export function createPresetIcons(lookupIconLoader: (options: IconsOptions) => P
 
           iconLoader = iconLoader || await lookupIconLoader(options)
 
-          const usedProps = {}
+          const usedProps: Record<string, string> = {}
           const parsed = await parseIconWithLoader(
             body,
             iconLoader,
             { ...loaderOptions, usedProps },
             iconifyCollectionsNames,
           )
 
+          const fallbackSize = `${scale}${unit ?? 'em'}`
+          for (const prop of ['width', 'height']) {
+            const value = usedProps[prop]
+            const match = value?.match(numberWithUnitRE)
+
+            if (!value || (match && !match[2]))
+              usedProps[prop] = fallbackSize
+          }
+
           if (!parsed) {
             if (warn && !flags.isESLint)
               warnOnce(`failed to load icon "${full}"`)
 
@@ -80,4 +80,43 @@ describe('preset-icons', async () => {
     const { css } = await uno.generate(fixtures.join(' '), { preflights: false })
     await expect(css).toMatchFileSnapshot('./assets/output/preset-icons-propsProcessor.css')
   })
+
+  it('custom without unit', async () => {
+    const uno = await createGenerator({
+      presets: [
+        presetIcons({
+          collections: {
+            custom: {
+              foo: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"></svg>`,
+              bar: `<svg width='32' height='32' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"></svg>`,
+              baz: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"></svg>`,
+              qux: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"></svg>`,
+            },
+          },
+          customizations: {
+            iconCustomizer(collection, icon, props) {
+              if (collection === 'custom' && icon === 'baz') {
+                props.width = 'var(--icon-size)'
+                props.height = 'var(--icon-size)'
+              }
+              if (collection === 'custom' && icon === 'qux') {
+                props.width = 'auto'
+                props.height = 'auto'
+              }
+            },
+          },
+        }),
+      ],
+    })
+
+    const { css } = await uno.generate('i-custom:foo i-custom:bar i-custom:baz i-custom:qux')
+
+    expect(css).toMatchInlineSnapshot(`
+      "/* layer: icons */
+      .i-custom\\:bar{background:url("data:image/svg+xml;utf8,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:1em;height:1em;}
+      .i-custom\\:baz{background:url("data:image/svg+xml;utf8,%3Csvg width='var(--icon-size)' height='var(--icon-size)' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:var(--icon-size);height:var(--icon-size);}
+      .i-custom\\:foo{background:url("data:image/svg+xml;utf8,%3Csvg width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:1em;height:1em;}
+      .i-custom\\:qux{background:url("data:image/svg+xml;utf8,%3Csvg width='auto' height='auto' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3C/svg%3E") no-repeat;background-size:100% 100%;background-color:transparent;width:auto;height:auto;}"
+    `)
+  })
 })