diff --git a/examples/vite-vue3/public/sprite.svg b/examples/vite-vue3/public/sprite.svg
index 7ccb912509..cc3986de8a 100644
--- a/examples/vite-vue3/public/sprite.svg
+++ b/examples/vite-vue3/public/sprite.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg">
-    <symbol id="shapes-close" viewBox="0 0 24 24">
+    <!--<symbol id="shapes-close" viewBox="0 0 24 24">
         <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/>
     </symbol>
     <symbol id="shapes-chevron-down" viewBox="0 0 24 24">
@@ -13,5 +13,22 @@
     <view id="shapes-chevron-up-view" viewBox="0 49 24 24"/>
     <use href="#shapes-close" x="0" y="0" id="close"/>
     <use href="#shapes-chevron-down" x="0" y="25" id="chevron-down"/>
-    <use href="#shapes-chevron-up" x="0" y="49" id="chevron-up"/>
+    <use href="#shapes-chevron-up" x="0" y="49" id="chevron-up"/>-->
+
+
+    <symbol id="s-close" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/>
+    </symbol>
+    <symbol id="s-chevron-down" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z"/>
+    </symbol>
+    <symbol id="s-chevron-up" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z"/>
+    </symbol>
+    <view id="close" viewBox="0 0 24 24"/>
+    <view id="chevron-down" viewBox="0 25 24 24"/>
+    <view id="chevron-up" viewBox="0 49 24 24"/>
+    <use href="#s-close" x="0" y="0"/>
+    <use href="#s-chevron-down" x="0" y="25"/>
+    <use href="#s-chevron-up" x="0" y="49"/>
 </svg>
diff --git a/examples/vite-vue3/src/App.vue b/examples/vite-vue3/src/App.vue
index bbefe576d4..f393f96d88 100644
--- a/examples/vite-vue3/src/App.vue
+++ b/examples/vite-vue3/src/App.vue
@@ -49,7 +49,8 @@
 
 <style>
 .mdi-close {
-  --un-icon: url("/sprite.svg#shapes-close-view");
+  /*--un-icon: url("/sprite.svg#shapes-close-view");*/
+  --un-icon: url("/sprite.svg#close");
   -webkit-mask: var(--un-icon) no-repeat;
   mask: var(--un-icon) no-repeat;
   -webkit-mask-size: 100% 100%;
@@ -62,7 +63,8 @@
   vertical-align: middle;
 }
 .mdi-close-bg {
-  background: url("/sprite.svg#shapes-close-view") no-repeat;
+  /*background: url("/sprite.svg#shapes-close-view") no-repeat;*/
+  background: url("/sprite.svg#close") no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
   display: inline-block;
@@ -71,7 +73,8 @@
   height: 1em;
 }
 .mdi-chevron-down {
-  --un-icon: url("/sprite.svg#shapes-chevron-down-view");
+  /*--un-icon: url("/sprite.svg#shapes-chevron-down-view");*/
+  --un-icon: url("/sprite.svg#chevron-down");
   -webkit-mask: var(--un-icon) no-repeat;
   mask: var(--un-icon) no-repeat;
   -webkit-mask-size: 100% 100%;
@@ -84,7 +87,8 @@
   vertical-align: middle;
 }
 .mdi-chevron-down-bg {
-  background: url("/sprite.svg#shapes-chevron-down-view") no-repeat;
+  /*background: url("/sprite.svg#shapes-chevron-down-view") no-repeat;*/
+  background: url("/sprite.svg#chevron-down") no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
   display: inline-block;
@@ -93,7 +97,8 @@
   height: 1em;
 }
 .mdi-chevron-up {
-  --un-icon: url("/sprite.svg#shapes-chevron-up-view");
+  /*--un-icon: url("/sprite.svg#shapes-chevron-up-view");*/
+  --un-icon: url("/sprite.svg#chevron-up");
   -webkit-mask: var(--un-icon) no-repeat;
   mask: var(--un-icon) no-repeat;
   -webkit-mask-size: 100% 100%;
@@ -106,7 +111,8 @@
   vertical-align: middle;
 }
 .mdi-chevron-up-bg {
-  background: url("/sprite.svg#shapes-chevron-up-view") no-repeat;
+  /*background: url("/sprite.svg#shapes-chevron-up-view") no-repeat;*/
+  background: url("/sprite.svg#chevron-up") no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
   display: inline-block;
diff --git a/packages/preset-icons/src/core.ts b/packages/preset-icons/src/core.ts
index 0639b00b69..cdff1d9240 100644
--- a/packages/preset-icons/src/core.ts
+++ b/packages/preset-icons/src/core.ts
@@ -14,10 +14,12 @@ const COLLECTION_NAME_PARTS_MAX = 3
 
 export { IconsOptions }
 
+/* TODO BEGIN-CLEANUP: types from @iconify/utils: remove them once published */
 interface GeneratedSpriteData {
   name: string
   asset: Uint8Array
 }
+/* TODO END-CLEANUP: types from @iconify/utils: remove them once published */
 
 interface PresetIcons extends Preset {
   generateCSSSVGSprites: () => AsyncIterableIterator<GeneratedSpriteData>
@@ -150,7 +152,7 @@ function createDynamicMatcher(
 
     let url: string
     if (sprites)
-      url = `url("unocss-${collection}-sprite.svg#shapes-${name}-view")`
+      url = `url("unocss-${collection}-sprite.svg#${name}")`
     else
       url = `url("data:image/svg+xml;utf8,${encodeSvgForCss(svg)}")`
 
@@ -182,6 +184,7 @@ function createDynamicMatcher(
   })
 }
 
+/* TODO BEGIN-CLEANUP: types from @iconify/utils: remove them once published */
 function createCSSSVGSpriteLoader(sprites?: CSSSVGSprites) {
   return async (collection: string) => {
     const collections = sprites?.sprites[collection]
@@ -290,3 +293,4 @@ async function loadSvgFromSprite(
     }
   }
 }
+/* TODO END-CLEANUP: types from @iconify/utils: remove them once published */
diff --git a/packages/preset-icons/src/create-sprite.ts b/packages/preset-icons/src/create-sprite.ts
index 107caf4e32..8548b92669 100644
--- a/packages/preset-icons/src/create-sprite.ts
+++ b/packages/preset-icons/src/create-sprite.ts
@@ -126,9 +126,9 @@ function generateSpriteEntry(
 ) {
   const y = context.minY ?? 0
   const entry = `
-  <symbol id="shapes-${icon.name}" viewBox="${data.rawViewBox}">${data.content}</symbol>
-  <view id="shapes-${icon.name}-view" viewBox="${data.x} ${y} ${data.width} ${data.height}"/>
-  <use href="#shapes-${icon.name}" x="${data.x}" y="${y}" id="${icon.name}"/>`
+  <symbol id="s-${icon.name}" viewBox="${data.rawViewBox}">${data.content}</symbol>
+  <view id="${icon.name}" viewBox="${data.x} ${y} ${data.width} ${data.height}"/>
+  <use href="#s-${icon.name}" x="${data.x}" y="${y}"/>`
   context.minY = y + data.height + 1
   return entry
 }