From 9fece8f54f463704a9801d85fa048e6d76b81e34 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Fri, 1 May 2026 14:31:29 +0800
Subject: [PATCH] feat(ui): add icons to navigation and UI components

Integrate @iconify/vue for consistent iconography across the app
Enhance buttons, entity cards, and status messages with visual indicators
---
 frontend/src/App.vue                        | 13 +--
 frontend/src/components/AppShell.vue        | 22 +++--
 frontend/src/components/EntityCard.vue      |  9 +-
 frontend/src/components/Modal.vue           |  4 +-
 frontend/src/components/ReorderableList.vue |  4 +-
 frontend/src/components/StatusMessage.vue   | 11 ++-
 frontend/src/components/TagsSelect.vue      | 11 ++-
 frontend/src/icons.ts                       | 28 ++++++
 frontend/src/styles/main.css                | 64 +++++++++++---
 frontend/src/views/AdminView.vue            | 98 ++++++++++++++++++---
 frontend/src/views/HabitatDetail.vue        | 12 ++-
 frontend/src/views/HabitatEdit.vue          | 28 ++++--
 frontend/src/views/HabitatList.vue          |  9 +-
 frontend/src/views/ItemDetail.vue           | 13 ++-
 frontend/src/views/ItemEdit.vue             | 12 ++-
 frontend/src/views/ItemsList.vue            |  9 +-
 frontend/src/views/LoginView.vue            |  3 +
 frontend/src/views/PokemonDetail.vue        | 12 ++-
 frontend/src/views/PokemonEdit.vue          | 12 ++-
 frontend/src/views/PokemonList.vue          |  7 +-
 frontend/src/views/RecipeDetail.vue         | 12 ++-
 frontend/src/views/RecipeEdit.vue           | 22 ++++-
 frontend/src/views/RecipeList.vue           | 16 ++--
 frontend/src/views/RegisterView.vue         |  3 +
 frontend/src/views/VerifyEmailView.vue      |  7 +-
 25 files changed, 361 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/icons.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b76d5f6..4207998 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import AppShell from './components/AppShell.vue';
+import { iconAdmin, iconChecklist, iconHabitat, iconItem, iconPokemon, iconRecipe } from './icons';
 import { getCurrentLocale, onLocaleChange, setCurrentLocale } from './i18n';
 import { api, getAuthToken, onAuthTokenChange, setAuthToken, type AuthUser, type Language } from './services/api';
 
@@ -18,12 +19,12 @@ let removeAuthListener: (() => void) | null = null;
 let removeLocaleListener: (() => void) | null = null;
 
 const navItems = computed(() => [
-  { label: t('nav.pokemon'), to: '/pokemon' },
-  { label: t('nav.habitats'), to: '/habitats' },
-  { label: t('nav.items'), to: '/items' },
-  { label: t('nav.recipes'), to: '/recipes' },
-  { label: t('nav.checklist'), to: '/checklist' },
-  { label: t('nav.admin'), to: '/admin' }
+  { label: t('nav.pokemon'), to: '/pokemon', icon: iconPokemon },
+  { label: t('nav.habitats'), to: '/habitats', icon: iconHabitat },
+  { label: t('nav.items'), to: '/items', icon: iconItem },
+  { label: t('nav.recipes'), to: '/recipes', icon: iconRecipe },
+  { label: t('nav.checklist'), to: '/checklist', icon: iconChecklist },
+  { label: t('nav.admin'), to: '/admin', icon: iconAdmin }
 ]);
 
 async function loadCurrentUser() {
diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
index 43a46ee..9df9c26 100644
--- a/frontend/src/components/AppShell.vue
+++ b/frontend/src/components/AppShell.vue
@@ -2,6 +2,7 @@
 import { Icon } from '@iconify/vue';
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { iconLogin, iconLogout, iconRegister, iconTranslate, type AppIcon } from '../icons';
 import type { AuthUser, Language } from '../services/api';
 import PokeBallMark from './PokeBallMark.vue';
 
@@ -9,7 +10,7 @@ defineProps<{
   currentUser: AuthUser | null;
   languages: Language[];
   locale: string;
-  navItems: Array<{ label: string; to: string }>;
+  navItems: Array<{ label: string; to: string; icon?: AppIcon }>;
 }>();
 
 const emit = defineEmits<{
@@ -18,11 +19,6 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
-const translateIcon = {
-  width: 24,
-  height: 24,
-  body: '<path fill="currentColor" d="m12.65 15.65l-2.85-2.8q.7-.8 1.225-1.75t.825-2.1H15V7h-5V5H8v2H3v2h6.95q-.275.8-.687 1.5T8.3 11.8q-.5-.55-.875-1.125T6.8 9h-2q.35.95.913 1.763T7 13.2l-5.65 5.55L2.75 20l5.55-5.55l3.45 3.4zm5.1 4.35L17 18h-3.5l-.75 2h-2l3.5-9h2l3.5 9zm-2.15-4h2.8L17 12.25z"/>'
-};
 const languageMenu = ref<HTMLElement | null>(null);
 const languageMenuButton = ref<HTMLButtonElement | null>(null);
 const languageMenuOpen = ref(false);
@@ -78,6 +74,7 @@ onBeforeUnmount(() => {
 
         <nav class="nav-links" :aria-label="t('nav.main')">
           <RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
+            <Icon v-if="item.icon" :icon="item.icon" class="ui-icon nav-links__icon" aria-hidden="true" />
             {{ item.label }}
           </RouterLink>
         </nav>
@@ -93,7 +90,7 @@ onBeforeUnmount(() => {
               aria-haspopup="menu"
               @click="toggleLanguageMenu"
             >
-              <Icon :icon="translateIcon" class="language-menu__icon" aria-hidden="true" />
+              <Icon :icon="iconTranslate" class="language-menu__icon" aria-hidden="true" />
               <span class="language-menu__glyph" aria-hidden="true">文/A</span>
             </button>
 
@@ -116,12 +113,19 @@ onBeforeUnmount(() => {
           <template v-if="currentUser">
             <span class="auth-user">{{ currentUser.displayName || currentUser.email }}</span>
             <button class="ui-button ui-button--ghost ui-button--small" type="button" @click="$emit('logout')">
+              <Icon :icon="iconLogout" class="ui-icon" aria-hidden="true" />
               {{ t('nav.logout') }}
             </button>
           </template>
           <template v-else>
-            <RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login">{{ t('nav.login') }}</RouterLink>
-            <RouterLink class="ui-button ui-button--primary ui-button--small" to="/register">{{ t('nav.register') }}</RouterLink>
+            <RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login">
+              <Icon :icon="iconLogin" class="ui-icon" aria-hidden="true" />
+              {{ t('nav.login') }}
+            </RouterLink>
+            <RouterLink class="ui-button ui-button--primary ui-button--small" to="/register">
+              <Icon :icon="iconRegister" class="ui-icon" aria-hidden="true" />
+              {{ t('nav.register') }}
+            </RouterLink>
           </template>
         </div>
       </div>
diff --git a/frontend/src/components/EntityCard.vue b/frontend/src/components/EntityCard.vue
index 6c76a49..e5aeee1 100644
--- a/frontend/src/components/EntityCard.vue
+++ b/frontend/src/components/EntityCard.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import type { AppIcon } from '../icons';
 import PokeBallMark from './PokeBallMark.vue';
 
 defineProps<{
   title: string;
   subtitle?: string;
   to?: string;
+  icon?: AppIcon;
   marker?: string;
 }>();
 </script>
@@ -12,7 +15,8 @@ defineProps<{
 <template>
   <RouterLink v-if="to" class="entity-card entity-card--link" :to="to">
     <span class="entity-card__mark">
-      <PokeBallMark v-if="!marker" size="30px" />
+      <Icon v-if="icon" :icon="icon" class="entity-card__icon" aria-hidden="true" />
+      <PokeBallMark v-else-if="!marker" size="30px" />
       <span v-else>{{ marker }}</span>
     </span>
     <div class="entity-card__content">
@@ -24,7 +28,8 @@ defineProps<{
 
   <article v-else class="entity-card">
     <span class="entity-card__mark">
-      <PokeBallMark v-if="!marker" size="30px" />
+      <Icon v-if="icon" :icon="icon" class="entity-card__icon" aria-hidden="true" />
+      <PokeBallMark v-else-if="!marker" size="30px" />
       <span v-else>{{ marker }}</span>
     </span>
     <div class="entity-card__content">
diff --git a/frontend/src/components/Modal.vue b/frontend/src/components/Modal.vue
index 7ffc452..47a3088 100644
--- a/frontend/src/components/Modal.vue
+++ b/frontend/src/components/Modal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue';
+import { iconClose } from '../icons';
 
 const props = withDefaults(
   defineProps<{
@@ -235,7 +237,7 @@ watch(
             <p v-if="subtitle">{{ subtitle }}</p>
           </div>
           <button ref="closeButton" class="modal-close-button" type="button" :aria-label="closeLabel" @click="requestClose">
-            ×
+            <Icon :icon="iconClose" class="ui-icon" aria-hidden="true" />
           </button>
         </div>
 
diff --git a/frontend/src/components/ReorderableList.vue b/frontend/src/components/ReorderableList.vue
index 8065be4..c9670cb 100644
--- a/frontend/src/components/ReorderableList.vue
+++ b/frontend/src/components/ReorderableList.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts" generic="T">
+import { Icon } from '@iconify/vue';
 import { ref, shallowRef } from 'vue';
+import { iconDragHandle } from '../icons';
 
 const props = withDefaults(defineProps<{
   items: T[];
@@ -209,7 +211,7 @@ function handleKeydown(item: T, event: KeyboardEvent) {
         @dragend="endDrag"
         @keydown="handleKeydown(item, $event)"
       >
-        <span aria-hidden="true">⋮⋮</span>
+        <Icon :icon="iconDragHandle" class="ui-icon" aria-hidden="true" />
       </button>
       <slot :item="item" />
     </li>
diff --git a/frontend/src/components/StatusMessage.vue b/frontend/src/components/StatusMessage.vue
index 27affd9..e6b44f5 100644
--- a/frontend/src/components/StatusMessage.vue
+++ b/frontend/src/components/StatusMessage.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Icon } from '@iconify/vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { iconError, iconInfo, iconSuccess, iconWarning } from '../icons';
 
 const props = withDefaults(
   defineProps<{
@@ -14,6 +16,12 @@ const props = withDefaults(
 
 const visible = ref(true);
 let timer: number | null = null;
+const statusIcon = computed(() => {
+  if (props.variant === 'success') return iconSuccess;
+  if (props.variant === 'warning') return iconWarning;
+  if (props.variant === 'danger') return iconError;
+  return iconInfo;
+});
 
 function clearTimer() {
   if (!timer) return;
@@ -38,6 +46,7 @@ watch(() => props.duration, scheduleDismiss);
 
 <template>
   <p class="status-message" :class="[`status-message--${variant}`, { 'status-message--hidden': !visible }]">
+    <Icon :icon="statusIcon" class="status-message__icon" aria-hidden="true" />
     <slot></slot>
   </p>
 </template>
diff --git a/frontend/src/components/TagsSelect.vue b/frontend/src/components/TagsSelect.vue
index 5a42635..51b6606 100644
--- a/frontend/src/components/TagsSelect.vue
+++ b/frontend/src/components/TagsSelect.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { iconCheck, iconChevronDown, iconClose } from '../icons';
 
 export type TagsSelectOption = {
   id: number | string;
@@ -259,14 +261,14 @@ watch(candidateRows, clampActiveIndex);
               @keydown.enter.stop.prevent="remove(option.value)"
               @keydown.space.stop.prevent="remove(option.value)"
             >
-              ×
+              <Icon :icon="iconClose" class="ui-icon" aria-hidden="true" />
             </span>
           </span>
         </template>
         <span v-else class="tags-select__single-value">{{ selectedLabel }}</span>
       </span>
       <span v-else class="tags-select__placeholder">{{ placeholderText }}</span>
-      <span class="tags-select__arrow" aria-hidden="true">⌄</span>
+      <Icon :icon="iconChevronDown" class="tags-select__arrow" aria-hidden="true" />
     </button>
 
     <div v-if="isOpen" class="tags-select__dropdown">
@@ -299,7 +301,10 @@ watch(candidateRows, clampActiveIndex);
           @click="selectOption(option.value)"
         >
           <span>{{ option.label }}</span>
-          <span v-if="selectedValues.has(option.value)" class="tags-select__state">{{ t('common.selected') }}</span>
+          <span v-if="selectedValues.has(option.value)" class="tags-select__state">
+            <Icon :icon="iconCheck" class="ui-icon" aria-hidden="true" />
+            {{ t('common.selected') }}
+          </span>
         </button>
         <button
           v-if="canCreate"
diff --git a/frontend/src/icons.ts b/frontend/src/icons.ts
new file mode 100644
index 0000000..66cc316
--- /dev/null
+++ b/frontend/src/icons.ts
@@ -0,0 +1,28 @@
+export type AppIcon = string;
+
+export const iconAdd: AppIcon = 'mdi:plus';
+export const iconAdmin: AppIcon = 'mdi:tune-variant';
+export const iconBack: AppIcon = 'mdi:arrow-left';
+export const iconCancel: AppIcon = 'mdi:close';
+export const iconCheck: AppIcon = 'mdi:check';
+export const iconChecklist: AppIcon = 'mdi:checkbox-marked-outline';
+export const iconChevronDown: AppIcon = 'mdi:chevron-down';
+export const iconClose: AppIcon = 'mdi:close';
+export const iconDelete: AppIcon = 'mdi:trash-can-outline';
+export const iconDragHandle: AppIcon = 'mdi:drag';
+export const iconEdit: AppIcon = 'mdi:pencil-outline';
+export const iconError: AppIcon = 'mdi:close-circle-outline';
+export const iconHabitat: AppIcon = 'mdi:pine-tree';
+export const iconInfo: AppIcon = 'mdi:information-outline';
+export const iconItem: AppIcon = 'mdi:bag-personal-outline';
+export const iconLogin: AppIcon = 'mdi:login';
+export const iconLogout: AppIcon = 'mdi:logout';
+export const iconMail: AppIcon = 'mdi:email-fast-outline';
+export const iconNoRecipe: AppIcon = 'mdi:file-document-remove-outline';
+export const iconPokemon: AppIcon = 'mdi:pokeball';
+export const iconRecipe: AppIcon = 'mdi:book-open-page-variant-outline';
+export const iconRegister: AppIcon = 'mdi:account-plus-outline';
+export const iconSave: AppIcon = 'mdi:content-save-outline';
+export const iconSuccess: AppIcon = 'mdi:check-circle-outline';
+export const iconTranslate: AppIcon = 'mdi:translate';
+export const iconWarning: AppIcon = 'mdi:alert-outline';
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 1232bea..b9ee3a8 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -92,6 +92,12 @@ svg {
   max-width: 100%;
 }
 
+.ui-icon {
+  width: 1.1em;
+  height: 1.1em;
+  flex: 0 0 auto;
+}
+
 :focus-visible {
   outline: 3px solid var(--focus);
   outline-offset: 3px;
@@ -163,6 +169,7 @@ svg {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 6px;
   padding: 8px 10px;
   border-radius: var(--radius-control);
   color: var(--ink-soft);
@@ -181,6 +188,11 @@ svg {
   color: #ffffff;
 }
 
+.nav-links__icon {
+  width: 17px;
+  height: 17px;
+}
+
 .auth-actions {
   display: flex;
   align-items: center;
@@ -625,12 +637,14 @@ button:disabled,
   border-radius: var(--radius-control);
   background: var(--surface);
   color: var(--ink);
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1;
   cursor: pointer;
 }
 
+.modal-close-button .ui-icon {
+  width: 20px;
+  height: 20px;
+}
+
 .modal-body {
   min-width: 0;
   padding: 16px;
@@ -727,6 +741,11 @@ button:disabled,
   cursor: pointer;
 }
 
+.tags-select__remove .ui-icon {
+  width: 14px;
+  height: 14px;
+}
+
 .tags-select__remove:hover {
   background: rgba(42, 117, 187, 0.14);
 }
@@ -738,8 +757,13 @@ button:disabled,
 .tags-select__arrow {
   flex: 0 0 auto;
   color: var(--muted);
-  font-size: 18px;
-  line-height: 1;
+  width: 18px;
+  height: 18px;
+  transition: transform 0.14s ease;
+}
+
+.tags-select__trigger.open .tags-select__arrow {
+  transform: rotate(180deg);
 }
 
 .tags-select__dropdown {
@@ -808,12 +832,20 @@ button:disabled,
 }
 
 .tags-select__state {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   flex: 0 0 auto;
   color: var(--pokemon-blue);
   font-size: 12px;
   font-weight: 850;
 }
 
+.tags-select__state .ui-icon {
+  width: 14px;
+  height: 14px;
+}
+
 .tags-select__empty {
   margin: 0;
   padding: 8px 10px;
@@ -1052,6 +1084,11 @@ button:disabled,
   font-weight: 950;
 }
 
+.entity-card__icon {
+  width: 26px;
+  height: 26px;
+}
+
 .entity-card__content {
   display: grid;
   align-content: start;
@@ -1206,6 +1243,11 @@ button:disabled,
   opacity: 0.54;
 }
 
+.drag-handle .ui-icon {
+  width: 22px;
+  height: 22px;
+}
+
 .reorderable-row-title {
   flex: 1 1 180px;
   min-width: 0;
@@ -1685,14 +1727,12 @@ button:disabled,
   visibility: hidden;
 }
 
-.status-message::before {
-  content: "";
-  width: 12px;
-  height: 12px;
+.status-message__icon {
+  width: 20px;
+  height: 20px;
   flex: 0 0 auto;
-  margin-top: 6px;
-  border-radius: 50%;
-  background: var(--status-accent, var(--pokemon-blue));
+  margin-top: 2px;
+  color: var(--status-accent, var(--pokemon-blue));
 }
 
 .status-message--success {
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index 13c07dc..babddd8 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Modal from '../components/Modal.vue';
@@ -8,6 +9,21 @@ import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import TranslationFields from '../components/TranslationFields.vue';
+import {
+  iconAdd,
+  iconAdmin,
+  iconCancel,
+  iconChecklist,
+  iconDelete,
+  iconEdit,
+  iconHabitat,
+  iconItem,
+  iconPokemon,
+  iconRecipe,
+  iconSave,
+  iconTranslate,
+  type AppIcon
+} from '../icons';
 import { defaultLocale, getCurrentLocale, setCurrentLocale } from '../i18n';
 import {
   api,
@@ -27,6 +43,16 @@ import {
 type AdminTab = 'config' | 'languages' | 'checklist' | 'pokemon' | 'items' | 'recipes' | 'habitats';
 type EditableConfig = (NamedEntity | Skill) & { hasItemDrop?: boolean };
 
+const adminTabIcons: Record<AdminTab, AppIcon> = {
+  config: iconAdmin,
+  languages: iconTranslate,
+  checklist: iconChecklist,
+  pokemon: iconPokemon,
+  items: iconItem,
+  recipes: iconRecipe,
+  habitats: iconHabitat
+};
+
 const { locale, t } = useI18n();
 
 const tabs = computed<Array<{ key: AdminTab; label: string }>>(() => [
@@ -570,6 +596,7 @@ onMounted(() => {
 
     <div v-if="canEdit" class="tabs" role="tablist" :aria-label="t('pages.admin.modules')">
       <button v-for="tab in tabs" :key="tab.key" :class="{ active: activeTab === tab.key }" type="button" @click="setTab(tab.key)">
+        <Icon :icon="adminTabIcons[tab.key]" class="ui-icon" aria-hidden="true" />
         {{ tab.label }}
       </button>
     </div>
@@ -592,6 +619,7 @@ onMounted(() => {
       <div class="detail-section__header">
         <h2>{{ t('pages.admin.checklist') }}</h2>
         <button type="button" class="ui-button ui-button--primary ui-button--small" :disabled="busy" @click="openNewChecklistItem">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
           {{ t('common.new') }}
         </button>
       </div>
@@ -612,8 +640,14 @@ onMounted(() => {
         <template #default="{ item }">
           <span class="reorderable-row-title">{{ item.title }}</span>
           <span class="row-actions">
-            <button type="button" :disabled="busy" @click="editChecklistItem(item)">{{ t('common.edit') }}</button>
-            <button type="button" :disabled="busy" @click="removeChecklistItem(item.id)">{{ t('common.delete') }}</button>
+            <button type="button" :disabled="busy" @click="editChecklistItem(item)">
+              <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
+              {{ t('common.edit') }}
+            </button>
+            <button type="button" :disabled="busy" @click="removeChecklistItem(item.id)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+              {{ t('common.delete') }}
+            </button>
           </span>
         </template>
       </ReorderableList>
@@ -624,6 +658,7 @@ onMounted(() => {
       <div class="detail-section__header">
         <h2>{{ t('pages.admin.config') }}</h2>
         <button type="button" class="ui-button ui-button--primary ui-button--small" :disabled="busy" @click="openNewConfig">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
           {{ t('common.new') }}
         </button>
       </div>
@@ -647,8 +682,14 @@ onMounted(() => {
             {{ item.name }}<span v-if="item.hasItemDrop" class="config-flag">{{ t('pages.admin.hasItemDrop') }}</span>
           </span>
           <span class="row-actions">
-            <button type="button" :disabled="busy" @click="editConfig(item)">{{ t('common.edit') }}</button>
-            <button type="button" :disabled="busy" @click="removeConfig(item.id)">{{ t('common.delete') }}</button>
+            <button type="button" :disabled="busy" @click="editConfig(item)">
+              <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
+              {{ t('common.edit') }}
+            </button>
+            <button type="button" :disabled="busy" @click="removeConfig(item.id)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+              {{ t('common.delete') }}
+            </button>
           </span>
         </template>
       </ReorderableList>
@@ -659,6 +700,7 @@ onMounted(() => {
       <div class="detail-section__header">
         <h2>{{ t('pages.admin.languages') }}</h2>
         <button type="button" class="ui-button ui-button--primary ui-button--small" :disabled="busy" @click="openNewLanguage">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
           {{ t('common.new') }}
         </button>
       </div>
@@ -681,8 +723,14 @@ onMounted(() => {
             <span v-if="item.isDefault" class="config-flag">{{ t('pages.admin.defaultLanguage') }}</span>
           </span>
           <span class="row-actions">
-            <button type="button" @click="editLanguage(item)">{{ t('common.edit') }}</button>
-            <button type="button" :disabled="item.isDefault" @click="removeLanguage(item.code)">{{ t('common.delete') }}</button>
+            <button type="button" @click="editLanguage(item)">
+              <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
+              {{ t('common.edit') }}
+            </button>
+            <button type="button" :disabled="item.isDefault" @click="removeLanguage(item.code)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+              {{ t('common.delete') }}
+            </button>
           </span>
         </template>
       </ReorderableList>
@@ -707,7 +755,10 @@ onMounted(() => {
         <template #default="{ item }">
           <RouterLink :to="`/pokemon/${item.id}`">#{{ item.id }} {{ item.name }}</RouterLink>
           <span class="row-actions">
-            <button type="button" :disabled="busy" @click="removePokemon(item.id)">{{ t('common.delete') }}</button>
+            <button type="button" :disabled="busy" @click="removePokemon(item.id)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+              {{ t('common.delete') }}
+            </button>
           </span>
         </template>
       </ReorderableList>
@@ -732,7 +783,10 @@ onMounted(() => {
         <template #default="{ item }">
           <RouterLink :to="`/items/${item.id}`">{{ item.name }}</RouterLink>
           <span class="row-actions">
-            <button type="button" :disabled="busy" @click="removeItem(item.id)">{{ t('common.delete') }}</button>
+            <button type="button" :disabled="busy" @click="removeItem(item.id)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+              {{ t('common.delete') }}
+            </button>
           </span>
         </template>
       </ReorderableList>
@@ -757,7 +811,10 @@ onMounted(() => {
         <template #default="{ item }">
           <RouterLink :to="`/recipes/${item.id}`">{{ item.name }}</RouterLink>
           <span class="row-actions">
-            <button type="button" :disabled="busy" @click="removeRecipe(item.id)">{{ t('common.delete') }}</button>
+            <button type="button" :disabled="busy" @click="removeRecipe(item.id)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+              {{ t('common.delete') }}
+            </button>
           </span>
         </template>
       </ReorderableList>
@@ -782,7 +839,10 @@ onMounted(() => {
         <template #default="{ item }">
           <RouterLink :to="`/habitats/${item.id}`">{{ item.name }}</RouterLink>
           <span class="row-actions">
-            <button type="button" :disabled="busy" @click="removeHabitat(item.id)">{{ t('common.delete') }}</button>
+            <button type="button" :disabled="busy" @click="removeHabitat(item.id)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+              {{ t('common.delete') }}
+            </button>
           </span>
         </template>
       </ReorderableList>
@@ -804,9 +864,13 @@ onMounted(() => {
 
       <template #footer>
         <button type="submit" form="admin-checklist-form" class="link-button" :disabled="busy">
+          <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
           {{ busy ? t('common.saving') : t('common.save') }}
         </button>
-        <button type="button" class="plain-button" :disabled="busy" @click="closeChecklistModal">{{ t('common.cancel') }}</button>
+        <button type="button" class="plain-button" :disabled="busy" @click="closeChecklistModal">
+          <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
+          {{ t('common.cancel') }}
+        </button>
       </template>
     </Modal>
 
@@ -826,9 +890,13 @@ onMounted(() => {
 
       <template #footer>
         <button type="submit" form="admin-config-form" class="link-button" :disabled="busy">
+          <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
           {{ busy ? t('common.saving') : t('common.save') }}
         </button>
-        <button type="button" class="plain-button" :disabled="busy" @click="closeConfigModal">{{ t('common.cancel') }}</button>
+        <button type="button" class="plain-button" :disabled="busy" @click="closeConfigModal">
+          <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
+          {{ t('common.cancel') }}
+        </button>
       </template>
     </Modal>
 
@@ -853,9 +921,13 @@ onMounted(() => {
 
       <template #footer>
         <button type="submit" form="admin-language-form" class="link-button" :disabled="busy">
+          <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
           {{ busy ? t('common.saving') : t('common.save') }}
         </button>
-        <button type="button" class="plain-button" :disabled="busy" @click="closeLanguageModal">{{ t('common.cancel') }}</button>
+        <button type="button" class="plain-button" :disabled="busy" @click="closeLanguageModal">
+          <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
+          {{ t('common.cancel') }}
+        </button>
       </template>
     </Modal>
   </section>
diff --git a/frontend/src/views/HabitatDetail.vue b/frontend/src/views/HabitatDetail.vue
index 1e82c6a..2b4041b 100644
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -7,6 +8,7 @@ import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
+import { iconBack, iconEdit } from '../icons';
 import { api, type HabitatDetail } from '../services/api';
 import HabitatEdit from './HabitatEdit.vue';
 
@@ -174,8 +176,14 @@ watch(
     <PageHeader :title="habitat.name" :subtitle="t('pages.habitats.detailSubtitle')">
       <template #kicker>Habitat Detail</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/habitats/${habitat.id}/edit`">{{ t('common.edit') }}</RouterLink>
-        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/habitats">{{ t('common.backToList') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/habitats/${habitat.id}/edit`">
+          <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
+          {{ t('common.edit') }}
+        </RouterLink>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/habitats">
+          <Icon :icon="iconBack" class="ui-icon" aria-hidden="true" />
+          {{ t('common.backToList') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
diff --git a/frontend/src/views/HabitatEdit.vue b/frontend/src/views/HabitatEdit.vue
index 8902475..d94f028 100644
--- a/frontend/src/views/HabitatEdit.vue
+++ b/frontend/src/views/HabitatEdit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -8,6 +9,7 @@ import StatusMessage from '../components/StatusMessage.vue';
 import SwitchGroup from '../components/SwitchGroup.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import TranslationFields from '../components/TranslationFields.vue';
+import { iconAdd, iconCancel, iconDelete, iconPokemon, iconSave } from '../icons';
 import {
   api,
   type ConfigType,
@@ -252,9 +254,15 @@ onMounted(() => {
             :search-placeholder="t('pages.pokemon.searchItems')"
           />
           <input v-model.number="row.quantity" :aria-label="t('common.quantity')" type="number" min="1" />
-          <button type="button" @click="habitatForm.recipeItems.splice(index, 1)">{{ t('common.delete') }}</button>
+          <button type="button" @click="habitatForm.recipeItems.splice(index, 1)">
+            <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+            {{ t('common.delete') }}
+          </button>
         </div>
-        <button type="button" class="plain-button" @click="addHabitatRecipeItem">{{ t('pages.habitats.addItem') }}</button>
+        <button type="button" class="plain-button" @click="addHabitatRecipeItem">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
+          {{ t('pages.habitats.addItem') }}
+        </button>
       </div>
 
       <div class="field">
@@ -281,6 +289,7 @@ onMounted(() => {
             </div>
 
             <button type="button" class="appearance-row__delete" @click="habitatForm.pokemonAppearances.splice(index, 1)">
+              <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
               {{ t('common.delete') }}
             </button>
           </div>
@@ -298,7 +307,10 @@ onMounted(() => {
             />
           </div>
         </div>
-        <button type="button" class="plain-button" @click="addPokemonAppearance">{{ t('pages.habitats.addPokemon') }}</button>
+        <button type="button" class="plain-button" @click="addPokemonAppearance">
+          <Icon :icon="iconPokemon" class="ui-icon" aria-hidden="true" />
+          {{ t('pages.habitats.addPokemon') }}
+        </button>
       </div>
     </form>
 
@@ -310,8 +322,14 @@ onMounted(() => {
     </section>
 
     <template v-if="!loading && options" #footer>
-      <button type="submit" form="habitat-edit-form" class="link-button" :disabled="busy">{{ busy ? t('common.saving') : t('common.save') }}</button>
-      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">{{ t('common.cancel') }}</button>
+      <button type="submit" form="habitat-edit-form" class="link-button" :disabled="busy">
+        <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
+        {{ busy ? t('common.saving') : t('common.save') }}
+      </button>
+      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">
+        <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
+        {{ t('common.cancel') }}
+      </button>
     </template>
   </Modal>
 </template>
diff --git a/frontend/src/views/HabitatList.vue b/frontend/src/views/HabitatList.vue
index 45517a0..c451460 100644
--- a/frontend/src/views/HabitatList.vue
+++ b/frontend/src/views/HabitatList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -7,6 +8,7 @@ import EntityChips from '../components/EntityChips.vue';
 import EntityCard from '../components/EntityCard.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
+import { iconAdd, iconHabitat } from '../icons';
 import { api, type Habitat } from '../services/api';
 import HabitatEdit from './HabitatEdit.vue';
 
@@ -28,7 +30,10 @@ onMounted(async () => {
     <PageHeader :title="t('pages.habitats.title')" :subtitle="t('pages.habitats.subtitle')">
       <template #kicker>Habitats</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/habitats/new">{{ t('common.add') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/habitats/new">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
+          {{ t('common.add') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
@@ -48,7 +53,7 @@ onMounted(async () => {
       </article>
     </div>
     <div v-else class="entity-grid">
-      <EntityCard v-for="item in habitats" :key="item.id" :title="item.name" :to="`/habitats/${item.id}`" marker="◎">
+      <EntityCard v-for="item in habitats" :key="item.id" :title="item.name" :to="`/habitats/${item.id}`" :icon="iconHabitat">
         <EditMeta :entity="item" />
         <EntityChips :items="item.recipe" />
         <EntityChips :items="item.pokemon ?? []" />
diff --git a/frontend/src/views/ItemDetail.vue b/frontend/src/views/ItemDetail.vue
index 9b449d1..a6796a7 100644
--- a/frontend/src/views/ItemDetail.vue
+++ b/frontend/src/views/ItemDetail.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -7,6 +8,7 @@ import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
+import { iconAdd, iconBack, iconEdit } from '../icons';
 import { api, type ItemDetail } from '../services/api';
 import ItemEdit from './ItemEdit.vue';
 
@@ -110,8 +112,14 @@ watch(
     <PageHeader :title="item.name" :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name">
       <template #kicker>Item Detail</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/items/${item.id}/edit`">{{ t('common.edit') }}</RouterLink>
-        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">{{ t('common.backToList') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/items/${item.id}/edit`">
+          <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
+          {{ t('common.edit') }}
+        </RouterLink>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">
+          <Icon :icon="iconBack" class="ui-icon" aria-hidden="true" />
+          {{ t('common.backToList') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
@@ -141,6 +149,7 @@ watch(
           <template v-else>
             <p class="meta-line">{{ t('common.none') }}</p>
             <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/recipes/new?itemId=${item.id}`">
+              <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
               {{ t('pages.items.createRecipe') }}
             </RouterLink>
           </template>
diff --git a/frontend/src/views/ItemEdit.vue b/frontend/src/views/ItemEdit.vue
index 8a0f843..0b1b9a4 100644
--- a/frontend/src/views/ItemEdit.vue
+++ b/frontend/src/views/ItemEdit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -7,6 +8,7 @@ import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import TranslationFields from '../components/TranslationFields.vue';
+import { iconCancel, iconSave } from '../icons';
 import { api, type ConfigType, type ItemPayload, type Language, type Options, type TranslationMap } from '../services/api';
 
 const route = useRoute();
@@ -252,8 +254,14 @@ onMounted(() => {
     </section>
 
     <template v-if="!loading && options" #footer>
-      <button type="submit" form="item-edit-form" class="link-button" :disabled="busy">{{ busy ? t('common.saving') : t('common.save') }}</button>
-      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">{{ t('common.cancel') }}</button>
+      <button type="submit" form="item-edit-form" class="link-button" :disabled="busy">
+        <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
+        {{ busy ? t('common.saving') : t('common.save') }}
+      </button>
+      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">
+        <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
+        {{ t('common.cancel') }}
+      </button>
     </template>
   </Modal>
 </template>
diff --git a/frontend/src/views/ItemsList.vue b/frontend/src/views/ItemsList.vue
index 294447a..445c417 100644
--- a/frontend/src/views/ItemsList.vue
+++ b/frontend/src/views/ItemsList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -10,6 +11,7 @@ import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import TagsSelect from '../components/TagsSelect.vue';
+import { iconAdd, iconItem } from '../icons';
 import { api, type Item, type Options } from '../services/api';
 import ItemEdit from './ItemEdit.vue';
 
@@ -59,7 +61,10 @@ watch(itemQuery, loadItems);
     <PageHeader :title="t('pages.items.title')" :subtitle="t('pages.items.subtitle')">
       <template #kicker>Bag</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/items/new">{{ t('common.add') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/items/new">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
+          {{ t('common.add') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
@@ -132,7 +137,7 @@ watch(itemQuery, loadItems);
         :title="item.name"
         :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name"
         :to="`/items/${item.id}`"
-        marker="＋"
+        :icon="iconItem"
       >
         <EditMeta :entity="item" />
         <EntityChips :items="item.tags" />
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 127bdf6..a007d56 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import PageHeader from '../components/PageHeader.vue';
 import StatusMessage from '../components/StatusMessage.vue';
+import { iconLogin } from '../icons';
 import { api, setAuthToken } from '../services/api';
 
 const route = useRoute();
@@ -59,6 +61,7 @@ async function submitLogin() {
         <StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
 
         <button class="ui-button ui-button--primary" :disabled="busy" type="submit">
+          <Icon :icon="iconLogin" class="ui-icon" aria-hidden="true" />
           {{ busy ? t('auth.loggingIn') : t('nav.login') }}
         </button>
       </form>
diff --git a/frontend/src/views/PokemonDetail.vue b/frontend/src/views/PokemonDetail.vue
index e0c1b88..406a43f 100644
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -8,6 +9,7 @@ import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
+import { iconBack, iconEdit } from '../icons';
 import { api, type PokemonDetail } from '../services/api';
 import PokemonEdit from './PokemonEdit.vue';
 
@@ -208,8 +210,14 @@ watch(
     <PageHeader :title="`#${pokemon.id} ${pokemon.name}`" :subtitle="t('pages.pokemon.environmentPrefix', { name: pokemon.environment.name })">
       <template #kicker>Pokédex Detail</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/pokemon/${pokemon.id}/edit`">{{ t('common.edit') }}</RouterLink>
-        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/pokemon">{{ t('common.backToList') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/pokemon/${pokemon.id}/edit`">
+          <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
+          {{ t('common.edit') }}
+        </RouterLink>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/pokemon">
+          <Icon :icon="iconBack" class="ui-icon" aria-hidden="true" />
+          {{ t('common.backToList') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
diff --git a/frontend/src/views/PokemonEdit.vue b/frontend/src/views/PokemonEdit.vue
index 9a6a4db..78f9ea0 100644
--- a/frontend/src/views/PokemonEdit.vue
+++ b/frontend/src/views/PokemonEdit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -7,6 +8,7 @@ import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import TranslationFields from '../components/TranslationFields.vue';
+import { iconCancel, iconSave } from '../icons';
 import { api, type ConfigType, type Language, type NamedEntity, type Options, type PokemonPayload, type TranslationMap } from '../services/api';
 
 type SkillItemDropForm = {
@@ -287,8 +289,14 @@ watch(() => pokemonForm.value.skillIds.slice(), syncSkillItemDrops);
     </section>
 
     <template v-if="!loading && options" #footer>
-      <button type="submit" form="pokemon-edit-form" class="link-button" :disabled="busy">{{ busy ? t('common.saving') : t('common.save') }}</button>
-      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">{{ t('common.cancel') }}</button>
+      <button type="submit" form="pokemon-edit-form" class="link-button" :disabled="busy">
+        <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
+        {{ busy ? t('common.saving') : t('common.save') }}
+      </button>
+      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">
+        <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
+        {{ t('common.cancel') }}
+      </button>
     </template>
   </Modal>
 </template>
diff --git a/frontend/src/views/PokemonList.vue b/frontend/src/views/PokemonList.vue
index 51f0fae..8976498 100644
--- a/frontend/src/views/PokemonList.vue
+++ b/frontend/src/views/PokemonList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -9,6 +10,7 @@ import FilterPanel from '../components/FilterPanel.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import TagsSelect from '../components/TagsSelect.vue';
+import { iconAdd } from '../icons';
 import { api, type Options, type Pokemon } from '../services/api';
 import PokemonEdit from './PokemonEdit.vue';
 
@@ -55,7 +57,10 @@ watch(query, loadPokemon);
     <PageHeader :title="t('pages.pokemon.title')" :subtitle="t('pages.pokemon.subtitle')">
       <template #kicker>Pokédex</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/pokemon/new">{{ t('common.add') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/pokemon/new">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
+          {{ t('common.add') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
diff --git a/frontend/src/views/RecipeDetail.vue b/frontend/src/views/RecipeDetail.vue
index 2406580..05f9674 100644
--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -7,6 +8,7 @@ import EditHistoryPanel from '../components/EditHistoryPanel.vue';
 import EntityChips from '../components/EntityChips.vue';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
+import { iconBack, iconEdit } from '../icons';
 import { api, type RecipeDetail } from '../services/api';
 import RecipeEdit from './RecipeEdit.vue';
 
@@ -72,8 +74,14 @@ watch(
     <PageHeader :title="recipe.name" :subtitle="t('pages.recipes.detailSubtitle')">
       <template #kicker>Recipe Detail</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/recipes/${recipe.id}/edit`">{{ t('common.edit') }}</RouterLink>
-        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/recipes">{{ t('common.backToList') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" :to="`/recipes/${recipe.id}/edit`">
+          <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
+          {{ t('common.edit') }}
+        </RouterLink>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/recipes">
+          <Icon :icon="iconBack" class="ui-icon" aria-hidden="true" />
+          {{ t('common.backToList') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
diff --git a/frontend/src/views/RecipeEdit.vue b/frontend/src/views/RecipeEdit.vue
index d9f4338..4c1dd51 100644
--- a/frontend/src/views/RecipeEdit.vue
+++ b/frontend/src/views/RecipeEdit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -6,6 +7,7 @@ import Modal from '../components/Modal.vue';
 import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
+import { iconAdd, iconCancel, iconDelete, iconSave } from '../icons';
 import { api, type ConfigType, type Item, type Options, type RecipePayload } from '../services/api';
 
 const route = useRoute();
@@ -186,9 +188,15 @@ onMounted(() => {
             :search-placeholder="t('pages.pokemon.searchItems')"
           />
           <input v-model.number="row.quantity" :aria-label="t('common.quantity')" type="number" min="1" />
-          <button type="button" @click="recipeForm.materials.splice(index, 1)">{{ t('common.delete') }}</button>
+          <button type="button" @click="recipeForm.materials.splice(index, 1)">
+            <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
+            {{ t('common.delete') }}
+          </button>
         </div>
-        <button type="button" class="plain-button" @click="addRecipeMaterial">{{ t('pages.recipes.addMaterial') }}</button>
+        <button type="button" class="plain-button" @click="addRecipeMaterial">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
+          {{ t('pages.recipes.addMaterial') }}
+        </button>
       </div>
     </form>
 
@@ -200,8 +208,14 @@ onMounted(() => {
     </section>
 
     <template v-if="!loading && options" #footer>
-      <button type="submit" form="recipe-edit-form" class="link-button" :disabled="busy">{{ busy ? t('common.saving') : t('common.save') }}</button>
-      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">{{ t('common.cancel') }}</button>
+      <button type="submit" form="recipe-edit-form" class="link-button" :disabled="busy">
+        <Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
+        {{ busy ? t('common.saving') : t('common.save') }}
+      </button>
+      <button type="button" class="plain-button" :disabled="busy" @click="closeEditor">
+        <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
+        {{ t('common.cancel') }}
+      </button>
     </template>
   </Modal>
 </template>
diff --git a/frontend/src/views/RecipeList.vue b/frontend/src/views/RecipeList.vue
index 1142f03..ccc5b32 100644
--- a/frontend/src/views/RecipeList.vue
+++ b/frontend/src/views/RecipeList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -9,6 +10,7 @@ import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import Tabs, { type TabOption } from '../components/Tabs.vue';
 import TagsSelect from '../components/TagsSelect.vue';
+import { iconAdd, iconNoRecipe, iconRecipe } from '../icons';
 import { api, type Item, type Options } from '../services/api';
 import RecipeEdit from './RecipeEdit.vue';
 
@@ -52,12 +54,12 @@ function createRecipeTarget(item: Item) {
   return `/recipes/new?itemId=${item.id}`;
 }
 
-function itemMarker(item: Item) {
+function itemIcon(item: Item) {
   if (item.recipe) {
-    return '▦';
+    return iconRecipe;
   }
 
-  return item.noRecipe ? '×' : '＋';
+  return item.noRecipe ? iconNoRecipe : iconAdd;
 }
 
 async function loadItems() {
@@ -79,7 +81,10 @@ watch(itemQuery, loadItems);
     <PageHeader :title="t('pages.recipes.title')" :subtitle="t('pages.recipes.subtitle')">
       <template #kicker>Recipes</template>
       <template #actions>
-        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/recipes/new">{{ t('common.add') }}</RouterLink>
+        <RouterLink class="ui-button ui-button--primary ui-button--small" to="/recipes/new">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
+          {{ t('common.add') }}
+        </RouterLink>
       </template>
     </PageHeader>
 
@@ -145,10 +150,11 @@ watch(itemQuery, loadItems);
         :title="item.name"
         :subtitle="itemSubtitle(item)"
         :to="recipeTarget(item)"
-        :marker="itemMarker(item)"
+        :icon="itemIcon(item)"
       >
         <EditMeta v-if="item.recipe" :entity="item.recipe" />
         <RouterLink v-else-if="!item.noRecipe" class="ui-button ui-button--primary ui-button--small" :to="createRecipeTarget(item)">
+          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
           {{ t('pages.items.createRecipe') }}
         </RouterLink>
       </EntityCard>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index 1200ecb..9c9a3ee 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import PageHeader from '../components/PageHeader.vue';
 import StatusMessage from '../components/StatusMessage.vue';
+import { iconMail } from '../icons';
 import { api } from '../services/api';
 
 const email = ref('');
@@ -67,6 +69,7 @@ async function submitRegister() {
         <StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
 
         <button class="ui-button ui-button--primary" :disabled="busy" type="submit">
+          <Icon :icon="iconMail" class="ui-icon" aria-hidden="true" />
           {{ busy ? t('auth.sending') : t('auth.sendVerification') }}
         </button>
       </form>
diff --git a/frontend/src/views/VerifyEmailView.vue b/frontend/src/views/VerifyEmailView.vue
index f117168..7bf03e0 100644
--- a/frontend/src/views/VerifyEmailView.vue
+++ b/frontend/src/views/VerifyEmailView.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import StatusMessage from '../components/StatusMessage.vue';
+import { iconLogin } from '../icons';
 import { api } from '../services/api';
 
 const route = useRoute();
@@ -48,7 +50,10 @@ onMounted(async () => {
       <StatusMessage v-else-if="message" variant="success">{{ message }}</StatusMessage>
       <StatusMessage v-else variant="danger">{{ errorMessage }}</StatusMessage>
 
-      <RouterLink v-if="!busy" class="ui-button ui-button--primary" to="/login">{{ t('auth.goLogin') }}</RouterLink>
+      <RouterLink v-if="!busy" class="ui-button ui-button--primary" to="/login">
+        <Icon :icon="iconLogin" class="ui-icon" aria-hidden="true" />
+        {{ t('auth.goLogin') }}
+      </RouterLink>
     </div>
   </section>
 </template>