diff --git a/src/components/PresetManager.vue b/src/components/PresetManager.vue
index 93934ae..fcc386a 100644
--- a/src/components/PresetManager.vue
+++ b/src/components/PresetManager.vue
@@ -7,6 +7,13 @@ import PresetSidebar from './preset/PresetSidebar.vue';
 import PresetList from './preset/PresetList.vue';
 import FolderSelector from './preset/FolderSelector.vue';
 import TypeSelector from './preset/TypeSelector.vue';
+import IconMenu from './icons/IconMenu.vue';
+import IconSearch from './icons/IconSearch.vue';
+import IconSort from './icons/IconSort.vue';
+import IconPlus from './icons/IconPlus.vue';
+import IconShare from './icons/IconShare.vue';
+import IconExport from './icons/IconExport.vue';
+import IconImport from './icons/IconImport.vue';
 
 const store = usePromptStore();
 const PRESET_MANAGER_VIEW_STATE_KEY = 'preset-manager-view-state';
@@ -893,18 +900,11 @@ onBeforeUnmount(() => {
     <div class="pm-main">
       <div class="pm-toolbar">
         <button class="btn-icon mobile-menu-btn" @click="showMobileSidebar = true">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="3" y1="12" x2="21" y2="12"></line>
-            <line x1="3" y1="6" x2="21" y2="6"></line>
-            <line x1="3" y1="18" x2="21" y2="18"></line>
-          </svg>
+          <IconMenu width="24" height="24" />
         </button>
 
         <div class="search-box">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
-            <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
-          </svg>
+          <IconSearch width="16" height="16" />
           <input v-model="searchQuery" placeholder="搜索预设..." />
         </div>
 
@@ -931,13 +931,7 @@ onBeforeUnmount(() => {
               @click="toggleSortDirection"
               :title="`切换为${sortDirection === 'asc' ? '倒序' : '正序'}`"
             >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M7 4v16"></path>
-                <path d="M4 7l3-3 3 3"></path>
-                <path d="M13 8h7"></path>
-                <path d="M13 12h5"></path>
-                <path d="M13 16h3"></path>
-              </svg>
+              <IconSort width="14" height="14" />
               <span>{{ sortDirectionLabel }}</span>
             </button>
           </div>
@@ -945,32 +939,19 @@ onBeforeUnmount(() => {
 
         <div class="action-group">
           <button @click="createPreset" class="btn-primary">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
-              <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
-            </svg>
+            <IconPlus width="14" height="14" />
             新建预设
           </button>
           
           <div class="import-export">
             <button @click="openShareDialog()" class="btn-icon" title="云端分享/导入">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
-              </svg>
+              <IconShare width="16" height="16" />
             </button>
             <button @click="exportPresets" class="btn-icon" title="导出预设">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
-                <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
-                <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
-              </svg>
+              <IconExport width="16" height="16" />
             </button>
             <label class="btn-icon" title="导入预设">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
-                <polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2"/>
-                <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2"/>
-              </svg>
+              <IconImport width="16" height="16" />
               <input type="file" accept=".json" @change="importPresets" style="display: none;">
             </label>
           </div>
diff --git a/src/components/icons/IconCheck.vue b/src/components/icons/IconCheck.vue
new file mode 100644
index 0000000..f39048c
--- /dev/null
+++ b/src/components/icons/IconCheck.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-check"
+  >
+    <circle class="check-ring" cx="12" cy="12" r="9" />
+    <path class="check-mark" d="M7 12.5 10.2 15.7 17 8.9" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-check {
+  overflow: visible;
+  color: currentColor;
+}
+
+.check-ring,
+.check-mark {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
+  transform-origin: center;
+}
+
+.check-mark {
+  stroke-dasharray: 18;
+  stroke-dashoffset: 18;
+}
+
+:deep(.action-btn:hover) .check-ring,
+:deep(.action-btn:hover) .check-mark,
+.icon-check:hover .check-ring,
+.icon-check:hover .check-mark {
+  transform: scale(1.06);
+  stroke-dashoffset: 0;
+}
+</style>
diff --git a/src/components/icons/IconCopy.vue b/src/components/icons/IconCopy.vue
new file mode 100644
index 0000000..8225f94
--- /dev/null
+++ b/src/components/icons/IconCopy.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-copy"
+  >
+    <rect class="copy-back" x="7" y="7" width="11" height="11" rx="2" />
+    <rect class="copy-front" x="4" y="4" width="11" height="11" rx="2" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-copy {
+  overflow: visible;
+  color: currentColor;
+}
+
+.copy-back,
+.copy-front {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+:deep(.action-btn:hover) .copy-back,
+.icon-copy:hover .copy-back {
+  transform: translate(1px, 1px);
+}
+
+:deep(.action-btn:hover) .copy-front,
+.icon-copy:hover .copy-front {
+  transform: translate(-1px, -1px) rotate(-4deg);
+}
+</style>
diff --git a/src/components/icons/IconEmptyState.vue b/src/components/icons/IconEmptyState.vue
new file mode 100644
index 0000000..70b4bbc
--- /dev/null
+++ b/src/components/icons/IconEmptyState.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 48"
+    :height="height || 48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-empty-state"
+  >
+    <path class="empty-box" d="M4 7h16v10H4z" />
+    <path class="empty-line" d="M7 11h10" />
+    <path class="empty-line" d="M7 14h6" />
+    <circle class="empty-spark spark-1" cx="17" cy="8" r="1" fill="currentColor" />
+    <circle class="empty-spark spark-2" cx="8" cy="6" r="1" fill="currentColor" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-empty-state {
+  overflow: visible;
+  color: currentColor;
+}
+
+.empty-box,
+.empty-line,
+.empty-spark {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+.empty-spark {
+  opacity: 0.45;
+}
+
+.icon-empty-state:hover .empty-box {
+  transform: translateY(-1px);
+}
+
+.icon-empty-state:hover .spark-1 {
+  transform: translateY(-1px) scale(1.2);
+}
+
+.icon-empty-state:hover .spark-2 {
+  transform: translateY(1px) scale(1.2);
+}
+</style>
diff --git a/src/components/icons/IconExport.vue b/src/components/icons/IconExport.vue
new file mode 100644
index 0000000..60518b9
--- /dev/null
+++ b/src/components/icons/IconExport.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-export"
+  >
+    <path class="tray" d="M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" />
+    <path class="arrow" d="M12 3v12" />
+    <path class="arrow-head" d="M7 8l5-5 5 5" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-export {
+  overflow: visible;
+  color: currentColor;
+}
+
+.tray,
+.arrow,
+.arrow-head {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+:deep(.btn-icon:hover) .arrow,
+.icon-export:hover .arrow {
+  transform: translateY(-1px);
+}
+
+:deep(.btn-icon:hover) .arrow-head,
+.icon-export:hover .arrow-head {
+  transform: translateY(-1px) scale(1.06);
+}
+</style>
diff --git a/src/components/icons/IconHeart.vue b/src/components/icons/IconHeart.vue
new file mode 100644
index 0000000..b0e03da
--- /dev/null
+++ b/src/components/icons/IconHeart.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  width?: string | number
+  height?: string | number
+  active?: boolean
+}>(), {
+  active: false,
+})
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-heart"
+    :class="{ 'is-active': active }"
+  >
+    <path class="heart-glow" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
+    <path class="heart-fill" fill="currentColor" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
+    <path class="heart-outline" d="M12 20.5 10.9 19.5C6.1 15.4 3.4 12.9 3.4 9.6 3.4 7.1 5.4 5 7.9 5c1.5 0 2.8.7 3.6 1.9.8-1.2 2.1-1.9 3.6-1.9 2.5 0 4.5 2.1 4.5 4.6 0 3.3-2.7 5.8-7.5 9.9L12 20.5Z" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-heart {
+  overflow: visible;
+  color: currentColor;
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.heart-glow,
+.heart-fill,
+.heart-outline {
+  transform-origin: center;
+  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, fill 0.25s ease, stroke 0.25s ease;
+}
+
+.heart-glow {
+  fill: currentColor;
+  opacity: 0;
+  stroke: none;
+  filter: blur(1.25px);
+  transform: scale(0.86);
+}
+
+.heart-fill {
+  fill: currentColor;
+  opacity: 0;
+  stroke: none;
+}
+
+.heart-outline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  opacity: 0.92;
+}
+
+.icon-heart.is-active .heart-fill {
+  opacity: 1;
+  transform: scale(1.01);
+}
+
+.icon-heart.is-active .heart-outline {
+  opacity: 0;
+}
+
+.icon-heart:hover,
+:deep(.action-btn:hover) .icon-heart,
+:deep(.action-btn.is-favorite:hover) .icon-heart {
+  transform: translateY(-1px) scale(1.1);
+}
+
+.icon-heart:hover .heart-outline,
+:deep(.action-btn:hover) .heart-outline {
+  transform: scale(1.04);
+}
+
+.icon-heart:hover .heart-glow,
+:deep(.action-btn:hover) .heart-glow {
+  opacity: 0.2;
+  transform: scale(1.18);
+}
+
+.icon-heart.is-active:hover .heart-fill,
+:deep(.action-btn.is-favorite:hover) .heart-fill {
+  transform: scale(1.04);
+}
+
+.icon-heart.is-active:hover .heart-glow,
+:deep(.action-btn.is-favorite:hover) .heart-glow {
+  opacity: 0.24;
+  transform: scale(1.22);
+}
+</style>
diff --git a/src/components/icons/IconImport.vue b/src/components/icons/IconImport.vue
new file mode 100644
index 0000000..94d8cce
--- /dev/null
+++ b/src/components/icons/IconImport.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-import"
+  >
+    <path class="tray" d="M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" />
+    <path class="arrow" d="M12 3v12" />
+    <path class="arrow-head" d="m7 10 5 5 5-5" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-import {
+  overflow: visible;
+  color: currentColor;
+}
+
+.tray,
+.arrow,
+.arrow-head {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+:deep(.btn-icon:hover) .arrow,
+.icon-import:hover .arrow {
+  transform: translateY(1px);
+}
+
+:deep(.btn-icon:hover) .arrow-head,
+.icon-import:hover .arrow-head {
+  transform: translateY(1px) scale(1.06);
+}
+</style>
diff --git a/src/components/icons/IconMenu.vue b/src/components/icons/IconMenu.vue
new file mode 100644
index 0000000..5d64ad0
--- /dev/null
+++ b/src/components/icons/IconMenu.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-menu"
+  >
+    <path class="menu-line line-1" d="M4 7h16" />
+    <path class="menu-line line-2" d="M4 12h16" />
+    <path class="menu-line line-3" d="M4 17h16" />
+    <circle class="menu-spark" cx="19" cy="7" r="1" fill="currentColor" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-menu {
+  overflow: visible;
+  color: currentColor;
+}
+
+.menu-line,
+.menu-spark {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+:deep(.mobile-menu-btn:hover) .line-1,
+.icon-menu:hover .line-1 {
+  transform: translateY(-1px) rotate(4deg);
+}
+
+:deep(.mobile-menu-btn:hover) .line-2,
+.icon-menu:hover .line-2 {
+  transform: scaleX(0.86);
+}
+
+:deep(.mobile-menu-btn:hover) .line-3,
+.icon-menu:hover .line-3 {
+  transform: translateY(1px) rotate(-4deg);
+}
+
+:deep(.mobile-menu-btn:hover) .menu-spark,
+.icon-menu:hover .menu-spark {
+  opacity: 1;
+  transform: scale(1.4);
+}
+</style>
diff --git a/src/components/icons/IconMore.vue b/src/components/icons/IconMore.vue
new file mode 100644
index 0000000..8d39d1d
--- /dev/null
+++ b/src/components/icons/IconMore.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-more"
+  >
+    <circle class="more-dot dot-1" cx="5" cy="12" r="1.2" fill="currentColor" />
+    <circle class="more-dot dot-2" cx="12" cy="12" r="1.2" fill="currentColor" />
+    <circle class="more-dot dot-3" cx="19" cy="12" r="1.2" fill="currentColor" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-more {
+  overflow: visible;
+  color: currentColor;
+}
+
+.more-dot {
+  transform-origin: center;
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
+}
+
+:deep(.more-btn:hover) .dot-1,
+.icon-more:hover .dot-1 {
+  transform: translateY(-1px);
+}
+
+:deep(.more-btn:hover) .dot-2,
+.icon-more:hover .dot-2 {
+  transform: translateY(1px);
+}
+
+:deep(.more-btn:hover) .dot-3,
+.icon-more:hover .dot-3 {
+  transform: translateY(-1px);
+}
+</style>
diff --git a/src/components/icons/IconPlus.vue b/src/components/icons/IconPlus.vue
new file mode 100644
index 0000000..ebc6077
--- /dev/null
+++ b/src/components/icons/IconPlus.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.25"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-plus"
+  >
+    <circle class="plus-ring" cx="12" cy="12" r="9" />
+    <path class="plus-vert" d="M12 7v10" />
+    <path class="plus-horz" d="M7 12h10" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-plus {
+  overflow: visible;
+  color: currentColor;
+}
+
+.plus-ring,
+.plus-vert,
+.plus-horz {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
+  transform-origin: center;
+}
+
+:deep(.btn-primary:hover) .plus-ring,
+.icon-plus:hover .plus-ring {
+  opacity: 1;
+  transform: scale(1.08);
+}
+
+:deep(.btn-primary:hover) .plus-vert,
+.icon-plus:hover .plus-vert {
+  transform: rotate(90deg);
+}
+
+:deep(.btn-primary:hover) .plus-horz,
+.icon-plus:hover .plus-horz {
+  transform: scaleX(1.12);
+}
+</style>
diff --git a/src/components/icons/IconPresetType.vue b/src/components/icons/IconPresetType.vue
index cf7f9da..ce09f29 100644
--- a/src/components/icons/IconPresetType.vue
+++ b/src/components/icons/IconPresetType.vue
@@ -1,53 +1,53 @@
 <template>
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    viewBox="0 0 24 24" 
-    fill="none" 
-    stroke="currentColor" 
-    stroke-width="2" 
-    stroke-linecap="round" 
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
     stroke-linejoin="round"
     class="icon-preset-type"
     :class="type"
   >
-    <!-- Positive: Sparkles/Magic -->
     <template v-if="type === 'positive'">
-      <path class="star-main" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+      <path class="positive-wand wand-shadow" d="M7.1 17.2 16.8 7.5" />
+      <path class="positive-wand wand-body" d="M6.4 16.5 16.1 6.8" />
+      <path class="positive-cap" d="M16.1 6.8 18.2 4.7" />
+      <path class="positive-tip tip-1" d="M17.7 3.1 18.3 4.5 19.7 5.1 18.3 5.7 17.7 7.1 17.1 5.7 15.7 5.1 17.1 4.5Z" />
+      <path class="positive-tip tip-2" d="M9.2 6.3 9.6 7.3 10.6 7.7 9.6 8.1 9.2 9.1 8.8 8.1 7.8 7.7 8.8 7.3Z" />
+      <circle class="positive-tip dot-1" cx="14.1" cy="10.9" r="0.7" />
+      <circle class="positive-tip dot-2" cx="6.9" cy="18.1" r="0.8" />
+      <path class="positive-spark spark-1" d="M19.6 10.6 20 11.7 21.1 12.1 20 12.5 19.6 13.6 19.2 12.5 18.1 12.1 19.2 11.7Z" />
+      <path class="positive-spark spark-2" d="M4.8 10.8 5.2 11.6 6 12 5.2 12.4 4.8 13.2 4.4 12.4 3.6 12 4.4 11.6Z" />
     </template>
 
-    <!-- Negative: Ban/Stop -->
     <template v-else-if="type === 'negative'">
-      <circle class="circle" cx="12" cy="12" r="10" />
-      <line class="slash" x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
+      <circle class="negative-ring" cx="12" cy="12" r="9.2" />
+      <line class="negative-slash" x1="5" y1="5" x2="19" y2="19" />
     </template>
 
-    <!-- Setting: Gear -->
     <template v-else-if="type === 'setting'">
-      <path class="gear" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.09.17-.05.39.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.09-.17.05-.39-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
+      <path class="setting-gear" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L3.16 8.87c-.09.17-.05.39.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.58 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.09-.17.05-.39-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
     </template>
 
-    <!-- Style: Brush -->
     <template v-else-if="type === 'style'">
-      <path class="brush-handle" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z"/>
-      <path class="brush-tip" d="M20.71 4.63l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/>
+      <path class="style-brush" d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3z"/>
+      <path class="style-tip" d="M20.71 4.63l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/>
     </template>
 
-    <!-- Character: User/Face -->
     <template v-else-if="type === 'character'">
-      <path class="user-body" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-      <circle class="user-head" cx="12" cy="7" r="4" />
+      <path class="character-body" d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle class="character-head" cx="12" cy="7" r="4" />
     </template>
 
-    <!-- Scene: Image/Landscape -->
     <template v-else-if="type === 'scene'">
-      <rect class="scene-frame" x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-      <circle class="scene-sun" cx="8.5" cy="8.5" r="1.5"/>
-      <polyline class="scene-mountain" points="21 15 16 10 5 21"/>
+      <rect class="scene-frame" x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <circle class="scene-sun" cx="8.5" cy="8.5" r="1.5" />
+      <polyline class="scene-mountain" points="21 15 16 10 5 21" />
     </template>
 
-    <!-- Custom: Puzzle -->
     <template v-else>
-      <path class="puzzle-piece" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
+      <path class="custom-piece" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/>
     </template>
   </svg>
 </template>
@@ -62,93 +62,158 @@ defineProps<{
 
 <style scoped>
 .icon-preset-type {
-  transition: all 0.3s ease;
   overflow: visible;
+  color: currentColor;
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
 }
 
-/* Positive: Sparkle/Twinkle */
-.positive .star-main {
+.positive-wand,
+.positive-cap,
+.positive-tip,
+.positive-spark,
+.negative-ring,
+.negative-slash,
+.setting-gear,
+.style-brush,
+.style-tip,
+.character-body,
+.character-head,
+.scene-frame,
+.scene-sun,
+.scene-mountain,
+.custom-piece {
   transform-origin: center;
-  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease, fill 0.25s ease;
 }
-:deep(.nav-btn:hover) .positive .star-main,
-.positive:hover .star-main {
-  transform: scale(1.1) rotate(15deg);
+
+.positive-wand {
+  stroke-width: 3.2;
+}
+
+.positive-wand.wand-shadow {
+  opacity: 0.18;
+  filter: blur(0.2px);
+}
+
+.positive-wand.wand-body {
+  stroke-width: 2.7;
+}
+
+.positive-cap {
+  stroke-width: 2.7;
+  opacity: 0.95;
+}
+
+.positive-tip {
   fill: currentColor;
-  fill-opacity: 0.2;
+  stroke: none;
+  opacity: 0.95;
 }
 
-/* Negative: Shake */
-.negative .slash {
+.positive-spark {
+  fill: currentColor;
+  stroke: none;
+  opacity: 0;
+}
+
+.negative-ring {
+  opacity: 0.92;
+}
+
+.negative-slash {
   transform-origin: center;
-  transition: transform 0.3s ease;
-}
-:deep(.nav-btn:hover) .negative,
-.negative:hover {
-  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
-}
-@keyframes shake {
-  10%, 90% { transform: translate3d(-1px, 0, 0); }
-  20%, 80% { transform: translate3d(2px, 0, 0); }
-  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
-  40%, 60% { transform: translate3d(4px, 0, 0); }
 }
 
-/* Setting: Rotate */
-.setting .gear {
+.setting-gear {
   transform-origin: center;
-  transition: transform 0.5s ease;
-}
-:deep(.nav-btn:hover) .setting .gear,
-.setting:hover .gear {
-  transform: rotate(90deg);
 }
 
-/* Style: Brush Wiggle */
-.style .brush-tip {
-  transform-origin: bottom left;
-  transition: transform 0.3s ease;
-}
-:deep(.nav-btn:hover) .style .brush-tip,
-.style:hover .brush-tip {
-  transform: rotate(-10deg) translateY(-2px);
+.style-tip {
+  transform-origin: 10px 13px;
 }
 
-/* Character: Bounce */
-.character .user-head {
+.character-head {
   transform-origin: center;
-  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-:deep(.nav-btn:hover) .character .user-head,
-.character:hover .user-head {
-  transform: translateY(-2px);
 }
 
-/* Scene: Zoom */
-.scene .scene-mountain {
-  transform-origin: bottom;
-  transition: transform 0.3s ease;
-}
-.scene .scene-sun {
-  transform-origin: center;
-  transition: transform 0.3s ease;
-}
-:deep(.nav-btn:hover) .scene .scene-mountain,
-.scene:hover .scene-mountain {
-  transform: scaleY(1.1);
-}
-:deep(.nav-btn:hover) .scene .scene-sun,
-.scene:hover .scene-sun {
-  transform: translateY(-2px) scale(1.1);
+.scene-frame {
+  opacity: 0.95;
 }
 
-/* Custom: Puzzle Fit */
-.custom .puzzle-piece {
-  transform-origin: center;
-  transition: transform 0.3s ease;
+.scene-sun {
+  fill: currentColor;
+  opacity: 0.9;
 }
-:deep(.nav-btn:hover) .custom .puzzle-piece,
-.custom:hover .puzzle-piece {
-  transform: scale(1.1) rotate(-5deg);
+
+.icon-preset-type:hover,
+:deep(.nav-btn:hover) .icon-preset-type {
+  transform: translateY(-1px) scale(1.08);
+}
+
+.icon-preset-type.positive:hover .positive-wand,
+:deep(.nav-btn:hover) .icon-preset-type.positive .positive-wand {
+  transform: translate(-0.2px, -0.2px) rotate(-8deg);
+}
+
+.icon-preset-type.positive:hover .wand-shadow,
+:deep(.nav-btn:hover) .icon-preset-type.positive .wand-shadow {
+  opacity: 0.26;
+  transform: translate(0.6px, 0.6px) rotate(-8deg);
+}
+
+.icon-preset-type.positive:hover .positive-tip,
+:deep(.nav-btn:hover) .icon-preset-type.positive .positive-tip {
+  opacity: 1;
+  transform: translateY(-0.5px) scale(1.08);
+}
+
+.icon-preset-type.positive:hover .positive-spark,
+:deep(.nav-btn:hover) .icon-preset-type.positive .positive-spark {
+  opacity: 1;
+}
+
+.icon-preset-type.positive:hover .spark-1,
+:deep(.nav-btn:hover) .icon-preset-type.positive .spark-1 {
+  transform: translate(0.6px, -0.4px) scale(1.12);
+}
+
+.icon-preset-type.positive:hover .spark-2,
+:deep(.nav-btn:hover) .icon-preset-type.positive .spark-2 {
+  transform: translate(-0.4px, 0.4px) scale(1.12);
+}
+
+.icon-preset-type.negative:hover .negative-slash,
+:deep(.nav-btn:hover) .icon-preset-type.negative .negative-slash {
+  transform: rotate(3deg);
+}
+
+.icon-preset-type.setting:hover .setting-gear,
+:deep(.nav-btn:hover) .icon-preset-type.setting .setting-gear {
+  transform: rotate(70deg);
+}
+
+.icon-preset-type.style:hover .style-tip,
+:deep(.nav-btn:hover) .icon-preset-type.style .style-tip {
+  transform: translate(1px, -1px) rotate(-8deg);
+}
+
+.icon-preset-type.character:hover .character-head,
+:deep(.nav-btn:hover) .icon-preset-type.character .character-head {
+  transform: translateY(-1.5px) scale(1.08);
+}
+
+.icon-preset-type.scene:hover .scene-mountain,
+:deep(.nav-btn:hover) .icon-preset-type.scene .scene-mountain {
+  transform: translateY(-0.5px) scaleY(1.08);
+}
+
+.icon-preset-type.scene:hover .scene-sun,
+:deep(.nav-btn:hover) .icon-preset-type.scene .scene-sun {
+  transform: translateY(-1px) scale(1.1);
+}
+
+.icon-preset-type.custom:hover .custom-piece,
+:deep(.nav-btn:hover) .icon-preset-type.custom .custom-piece {
+  transform: rotate(-5deg) scale(1.06);
 }
 </style>
diff --git a/src/components/icons/IconSearch.vue b/src/components/icons/IconSearch.vue
new file mode 100644
index 0000000..afcf8ec
--- /dev/null
+++ b/src/components/icons/IconSearch.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-search"
+  >
+    <circle class="search-lens" cx="11" cy="11" r="7" />
+    <path class="search-handle" d="m16 16 4 4" />
+    <circle class="search-glint" cx="9" cy="9" r="1" fill="currentColor" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-search {
+  overflow: visible;
+  color: currentColor;
+}
+
+.search-lens,
+.search-handle,
+.search-glint {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, stroke-dashoffset 0.35s ease;
+  transform-origin: center;
+}
+
+:deep(.search-box:hover) .search-lens,
+.icon-search:hover .search-lens {
+  transform: scale(1.06);
+  stroke-dasharray: 40 10;
+}
+
+:deep(.search-box:hover) .search-handle,
+.icon-search:hover .search-handle {
+  transform: translate(1px, 1px) rotate(12deg);
+}
+
+:deep(.search-box:hover) .search-glint,
+.icon-search:hover .search-glint {
+  opacity: 1;
+  transform: scale(1.4);
+}
+</style>
diff --git a/src/components/icons/IconShare.vue b/src/components/icons/IconShare.vue
new file mode 100644
index 0000000..8a32834
--- /dev/null
+++ b/src/components/icons/IconShare.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-share"
+  >
+    <circle class="share-node node-1" cx="18" cy="5" r="3" />
+    <circle class="share-node node-2" cx="6" cy="12" r="3" />
+    <circle class="share-node node-3" cx="18" cy="19" r="3" />
+    <path class="share-link link-1" d="M8.59 13.51 15.42 17.49" />
+    <path class="share-link link-2" d="M15.41 6.51 8.59 10.49" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-share {
+  overflow: visible;
+  color: currentColor;
+}
+
+.share-node,
+.share-link {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+:deep(.btn-icon:hover) .share-node,
+:deep(.dropdown-content button:hover) .share-node,
+.icon-share:hover .share-node {
+  transform: scale(1.08);
+}
+
+:deep(.btn-icon:hover) .link-1,
+:deep(.dropdown-content button:hover) .link-1,
+.icon-share:hover .link-1 {
+  transform: translateY(-1px) rotate(2deg);
+}
+
+:deep(.btn-icon:hover) .link-2,
+:deep(.dropdown-content button:hover) .link-2,
+.icon-share:hover .link-2 {
+  transform: translateY(1px) rotate(-2deg);
+}
+</style>
diff --git a/src/components/icons/IconSort.vue b/src/components/icons/IconSort.vue
new file mode 100644
index 0000000..6f682b7
--- /dev/null
+++ b/src/components/icons/IconSort.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-sort"
+  >
+    <path class="sort-arrow" d="M7 4v16" />
+    <path class="sort-arrow-head" d="M4 7l3-3 3 3" />
+    <path class="sort-bars bar-1" d="M13 8h7" />
+    <path class="sort-bars bar-2" d="M13 12h5" />
+    <path class="sort-bars bar-3" d="M13 16h3" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-sort {
+  overflow: visible;
+  color: currentColor;
+}
+
+.sort-arrow,
+.sort-arrow-head,
+.sort-bars {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+:deep(.sort-direction-btn:hover) .sort-arrow-head,
+.icon-sort:hover .sort-arrow-head {
+  transform: translateY(-1px);
+}
+
+:deep(.sort-direction-btn:hover) .sort-bars.bar-1,
+.icon-sort:hover .sort-bars.bar-1 {
+  transform: translateX(1px);
+}
+
+:deep(.sort-direction-btn:hover) .sort-bars.bar-2,
+.icon-sort:hover .sort-bars.bar-2 {
+  transform: translateX(2px);
+}
+
+:deep(.sort-direction-btn:hover) .sort-bars.bar-3,
+.icon-sort:hover .sort-bars.bar-3 {
+  transform: translateX(3px);
+}
+</style>
diff --git a/src/components/icons/IconTheme.vue b/src/components/icons/IconTheme.vue
index 0d8d26e..71a78c3 100644
--- a/src/components/icons/IconTheme.vue
+++ b/src/components/icons/IconTheme.vue
@@ -1,52 +1,37 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   isDark: boolean
 }>()
+
+const rootClass = computed(() => ({
+  'is-dark': props.isDark,
+}))
 </script>
 
 <template>
-  <div class="icon-theme-container">
-    <div class="moon-glow" :class="{ 'is-active': isDark }"></div>
+  <div class="icon-theme-container" :class="rootClass">
+    <svg class="theme-sun" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle class="sun-core" cx="12" cy="12" r="4.5" />
+      <path class="sun-ray ray-1" d="M12 1.8v3.2" />
+      <path class="sun-ray ray-2" d="M12 19v3.2" />
+      <path class="sun-ray ray-3" d="M4.9 4.9l2.3 2.3" />
+      <path class="sun-ray ray-4" d="M16.8 16.8l2.3 2.3" />
+      <path class="sun-ray ray-5" d="M1.8 12h3.2" />
+      <path class="sun-ray ray-6" d="M19 12h3.2" />
+      <path class="sun-ray ray-7" d="M4.9 19.1l2.3-2.3" />
+      <path class="sun-ray ray-8" d="M16.8 7.2l2.3-2.3" />
+    </svg>
 
-    <svg 
-      class="icon-sun"
-      :class="{ 'is-hidden': isDark }"
-      xmlns="http://www.w3.org/2000/svg" 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      stroke="currentColor" 
-      stroke-width="2" 
-      stroke-linecap="round" 
-      stroke-linejoin="round"
-    >
-      <circle cx="12" cy="12" r="5" />
-      <line x1="12" y1="1" x2="12" y2="3" />
-      <line x1="12" y1="21" x2="12" y2="23" />
-      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-      <line x1="1" y1="12" x2="3" y2="12" />
-      <line x1="21" y1="12" x2="23" y2="12" />
-      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-    </svg>
-    
-    <svg 
-      class="icon-moon"
-      :class="{ 'is-visible': isDark }"
-      xmlns="http://www.w3.org/2000/svg" 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      stroke="currentColor" 
-      stroke-width="2" 
-      stroke-linecap="round" 
-      stroke-linejoin="round"
-    >
-      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-      <g class="stars" stroke="none" stroke-width="0" fill="currentColor">
-        <path class="star star-1" d="M17 8 L17.5 9.5 L19 10 L17.5 10.5 L17 12 L16.5 10.5 L15 10 L16.5 9.5 Z" />
-        <path class="star star-2" d="M13 3.5 L13.3 4.5 L14.3 4.8 L13.3 5.1 L13 6.1 L12.7 5.1 L11.7 4.8 L12.7 4.5 Z" />
-      </g>
+    <svg class="theme-moon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path class="moon-core" d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z" />
+      <path class="moon-rim" d="M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5Z" />
+      <path class="moon-ring ring-1" d="M16.5 6.5l.4 1.1 1.1.4-1.1.4-.4 1.1-.4-1.1-1.1-.4 1.1-.4z" />
+      <path class="moon-ring ring-2" d="M18.2 10.2l.3.9.9.3-.9.3-.3.9-.3-.9-.9-.3.9-.3z" />
     </svg>
+
+    <span class="theme-glow"></span>
   </div>
 </template>
 
@@ -55,99 +40,112 @@ defineProps<{
   position: relative;
   width: 1.25rem;
   height: 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  place-items: center;
 }
 
-.moon-glow {
+svg,
+.theme-glow {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.5);
-  width: 200%;
-  height: 200%;
-  border-radius: 50%;
-  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
-  opacity: 0;
-  transition: all 0.4s ease;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.icon-theme-container:hover .moon-glow.is-active {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
+  inset: 0;
 }
 
 svg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 1;
+  overflow: visible;
+  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
 }
 
-.icon-sun {
+.theme-sun {
   opacity: 1;
-  transform: rotate(0) scale(1);
+  transform: rotate(0deg) scale(1);
 }
 
-.icon-sun.is-hidden {
+.theme-moon {
   opacity: 0;
-  transform: rotate(90deg) scale(0.5);
+  transform: rotate(-80deg) scale(0.55);
 }
 
-.icon-moon {
+.theme-glow {
+  border-radius: 50%;
   opacity: 0;
-  transform: rotate(-90deg) scale(0.5);
+  transform: scale(0.5);
+  background: radial-gradient(circle, color-mix(in srgb, currentColor 24%, transparent) 0%, transparent 72%);
+  transition: opacity 0.35s ease, transform 0.45s ease;
+  pointer-events: none;
 }
 
-.icon-moon.is-visible {
-  opacity: 1;
-  transform: rotate(0) scale(1);
-}
-
-/* Star styles */
-.star {
+.sun-core,
+.sun-ray,
+.moon-core,
+.moon-rim,
+.moon-ring {
+  stroke: currentColor;
+  fill: currentColor;
   transform-origin: center;
-  opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
 }
 
-.icon-moon.is-visible .star {
+.sun-core,
+.moon-core {
+  stroke-width: 2;
+  fill: none;
+}
+
+.moon-rim {
+  stroke-width: 2;
+  opacity: 0;
+  fill: none;
+}
+
+.moon-ring {
+  opacity: 0;
+}
+
+.icon-theme-container:hover .theme-glow {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.icon-theme-container:hover .theme-sun {
+  transform: rotate(45deg) scale(1.08);
+}
+
+.icon-theme-container:hover .sun-ray {
+  transform: scaleX(1.08);
+}
+
+.icon-theme-container.is-dark .theme-sun {
+  opacity: 0;
+  transform: rotate(90deg) scale(0.45);
+}
+
+.icon-theme-container.is-dark .theme-moon {
+  opacity: 1;
+  transform: rotate(0deg) scale(1);
+}
+
+.icon-theme-container.is-dark .moon-rim {
+  opacity: 0.26;
+}
+
+.icon-theme-container.is-dark .moon-ring {
   opacity: 1;
 }
 
-/* Hover effects */
-.icon-theme-container:hover .icon-sun:not(.is-hidden) {
-  animation: spin 4s linear infinite;
+.icon-theme-container:hover .theme-moon {
+  transform: rotate(-6deg) scale(1.04);
 }
 
-.icon-theme-container:hover .icon-moon.is-visible {
-  animation: swing 2.5s ease-in-out infinite;
+.icon-theme-container:hover .ring-1 {
+  animation: twinkle 1.4s ease-in-out infinite;
 }
 
-.icon-theme-container:hover .star-1 {
-  animation: twinkle 1.5s infinite ease-in-out;
-}
-
-.icon-theme-container:hover .star-2 {
-  animation: twinkle 2s infinite ease-in-out 0.2s;
-}
-
-@keyframes spin {
-  from { transform: rotate(0); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes swing {
-  0%, 100% { transform: rotate(0) scale(1); }
-  50% { transform: rotate(-10deg) scale(1.05); }
+.icon-theme-container:hover .ring-2 {
+  animation: twinkle 1.8s ease-in-out infinite 0.15s;
 }
 
 @keyframes twinkle {
-  0%, 100% { opacity: 0.5; transform: scale(0.8); }
-  50% { opacity: 1; transform: scale(1.2); }
+  0%, 100% { transform: scale(0.85); opacity: 0.45; }
+  50% { transform: scale(1.25); opacity: 1; }
 }
 </style>
diff --git a/src/components/icons/IconTrash.vue b/src/components/icons/IconTrash.vue
new file mode 100644
index 0000000..495fca9
--- /dev/null
+++ b/src/components/icons/IconTrash.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+  width?: string | number
+  height?: string | number
+}>()
+</script>
+
+<template>
+  <svg
+    :width="width || 24"
+    :height="height || 24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon-trash"
+  >
+    <path class="trash-lid" d="M3 6h18" />
+    <path class="trash-body" d="m6 6 1 14h10l1-14" />
+    <path class="trash-handle" d="M9 6V4h6v2" />
+  </svg>
+</template>
+
+<style scoped>
+.icon-trash {
+  overflow: visible;
+  color: currentColor;
+}
+
+.trash-lid,
+.trash-body,
+.trash-handle {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+  transform-origin: center;
+}
+
+:deep(.action-btn:hover) .trash-lid,
+:deep(.dropdown-content button:hover) .trash-lid,
+.icon-trash:hover .trash-lid {
+  transform: translateY(-1px) rotate(-4deg);
+}
+
+:deep(.action-btn:hover) .trash-handle,
+:deep(.dropdown-content button:hover) .trash-handle,
+.icon-trash:hover .trash-handle {
+  transform: translateY(-1px);
+}
+</style>
diff --git a/src/components/preset/PresetList.vue b/src/components/preset/PresetList.vue
index 6a01189..e8b3a91 100644
--- a/src/components/preset/PresetList.vue
+++ b/src/components/preset/PresetList.vue
@@ -4,6 +4,14 @@ import type { ExtendedPreset, PresetType } from '../../types';
 import IconPresetType from '../icons/IconPresetType.vue';
 import IconArrowLeft from '../icons/IconArrowLeft.vue';
 import IconArrowRight from '../icons/IconArrowRight.vue';
+import IconHeart from '../icons/IconHeart.vue';
+import IconCheck from '../icons/IconCheck.vue';
+import IconCopy from '../icons/IconCopy.vue';
+import IconMore from '../icons/IconMore.vue';
+import IconShare from '../icons/IconShare.vue';
+import IconEditor from '../icons/IconEditor.vue';
+import IconTrash from '../icons/IconTrash.vue';
+import IconEmptyState from '../icons/IconEmptyState.vue';
 
 const props = defineProps<{
   presets: ExtendedPreset[];
@@ -187,8 +195,8 @@ function formatDate(dateStr: string) {
 
 <template>
   <div class="preset-list-container" ref="containerRef" @scroll="emit('view-state-change')">
-    <div v-if="presets.length === 0" class="empty-state">
-      <div class="empty-icon">📭</div>
+        <div v-if="presets.length === 0" class="empty-state">
+      <IconEmptyState class="empty-icon" />
       <p class="empty-text">暂无预设</p>
     </div>
 
@@ -234,53 +242,30 @@ function formatDate(dateStr: string) {
             </div>
           <h4 class="preset-name" :title="preset.name">{{ preset.name }}</h4>
           <div class="preset-actions">
-            <button @click="emit('toggle-favorite', preset)" class="action-btn" :class="{ 'is-favorite': preset.isFavorite }" title="收藏">
-              <svg width="14" height="14" viewBox="0 0 24 24" :fill="preset.isFavorite ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
-                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
-              </svg>
+                        <button @click="emit('toggle-favorite', preset)" class="action-btn" :class="{ 'is-favorite': preset.isFavorite }" title="收藏">
+              <IconHeart :active="preset.isFavorite" width="14" height="14" />
             </button>
-            <button @click="emit('apply', preset)" class="action-btn apply-btn" title="应用预设">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="20,6 9,17 4,12"/>
-              </svg>
+                        <button @click="emit('apply', preset)" class="action-btn apply-btn" title="应用到提示词">
+              <IconCheck width="14" height="14" />
             </button>
-            <button @click="emit('copy', preset)" class="action-btn" title="复制内容">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-                <path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-              </svg>
+                        <button @click="emit('copy', preset)" class="action-btn" title="复制内容">
+              <IconCopy width="14" height="14" />
             </button>
             <div class="dropdown-menu">
-              <button class="action-btn more-btn">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <circle cx="12" cy="12" r="1"/>
-                  <circle cx="19" cy="12" r="1"/>
-                  <circle cx="5" cy="12" r="1"/>
-                </svg>
+                            <button class="action-btn more-btn">
+                <IconMore width="14" height="14" />
               </button>
               <div class="dropdown-content">
-                <button @click="emit('share', preset)">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="18" cy="5" r="3"/>
-                    <circle cx="6" cy="12" r="3"/>
-                    <circle cx="18" cy="19" r="3"/>
-                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
-                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
-                  </svg>
+                                <button @click="emit('share', preset)">
+                  <IconShare width="14" height="14" />
                   分享
                 </button>
-                <button @click="emit('edit', preset)">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                    <path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                  </svg>
+                                <button @click="emit('edit', preset)">
+                  <IconEditor width="14" height="14" />
                   编辑
                 </button>
-                <button @click="emit('delete', preset)" class="delete-item">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <polyline points="3,6 5,6 21,6"/>
-                    <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                  </svg>
+                                <button @click="emit('delete', preset)" class="delete-item">
+                  <IconTrash width="14" height="14" />
                   删除
                 </button>
               </div>
@@ -355,8 +340,8 @@ function formatDate(dateStr: string) {
 }
 
 .empty-icon {
-  font-size: 3rem;
   margin-bottom: 1rem;
+  color: var(--color-text-tertiary);
 }
 
 .preset-grid {