From 78d8767124dc998f1d73c0df11740b2ce435a743 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Tue, 17 Oct 2023 01:57:20 +0000
Subject: [PATCH] feat: :sparkles: allow users to choose icon set

Co-authored-by: naskya <m@naskya.net>
---
 locales/en-US.yml                             |  7 ++
 locales/ja-JP.yml                             |  7 ++
 packages/client/package.json                  |  1 +
 packages/client/src/account.ts                |  9 ++-
 .../src/components/MkAbuseReportWindow.vue    |  3 +-
 .../src/components/MkChannelFollowButton.vue  |  7 +-
 .../src/components/MkChannelPreview.vue       |  8 +-
 .../client/src/components/MkContainer.vue     | 10 ++-
 .../client/src/components/MkContextMenu.vue   |  3 +-
 .../src/components/MkDateSeparatedList.vue    |  5 +-
 packages/client/src/components/MkDialog.vue   | 37 ++++-----
 packages/client/src/components/MkDonation.vue |  5 +-
 .../client/src/components/MkDrive.file.vue    | 15 ++--
 .../client/src/components/MkDrive.folder.vue  | 11 +--
 .../src/components/MkDrive.navFolder.vue      |  3 +-
 packages/client/src/components/MkDrive.vue    | 17 ++--
 .../src/components/MkDriveFileThumbnail.vue   | 31 +++-----
 .../src/components/MkEmojiPicker.section.vue  |  7 +-
 .../client/src/components/MkEmojiPicker.vue   | 11 +--
 .../client/src/components/MkFileTypeIcon.vue  |  3 +-
 packages/client/src/components/MkFolder.vue   |  8 +-
 .../client/src/components/MkFollowButton.vue  | 17 ++--
 packages/client/src/components/MkGoogle.vue   |  3 +-
 packages/client/src/components/MkInfo.vue     | 11 +--
 packages/client/src/components/MkKeyValue.vue |  4 +-
 .../client/src/components/MkLaunchPad.vue     |  4 +-
 packages/client/src/components/MkLink.vue     |  5 +-
 packages/client/src/components/MkMedia.vue    |  7 +-
 .../client/src/components/MkMediaBanner.vue   |  5 +-
 packages/client/src/components/MkMention.vue  |  3 +-
 packages/client/src/components/MkMenu.vue     | 24 +++---
 .../client/src/components/MkModPlayer.vue     | 26 +++----
 .../src/components/MkModalPageWindow.vue      | 16 ++--
 .../client/src/components/MkModalWindow.vue   |  7 +-
 packages/client/src/components/MkMoved.vue    |  6 +-
 packages/client/src/components/MkNote.vue     | 38 ++++-----
 .../client/src/components/MkNoteDetailed.vue  | 11 +--
 .../client/src/components/MkNoteHeader.vue    |  3 +-
 packages/client/src/components/MkNoteSub.vue  | 24 +++---
 .../client/src/components/MkNotification.vue  | 31 ++++----
 .../src/components/MkNotificationToast.vue    |  3 +-
 .../client/src/components/MkPageWindow.vue    | 13 ++--
 .../client/src/components/MkPagination.vue    |  9 ++-
 packages/client/src/components/MkPoll.vue     |  3 +-
 .../client/src/components/MkPollEditor.vue    |  5 +-
 packages/client/src/components/MkPostForm.vue | 51 ++++++------
 .../src/components/MkPostFormAttaches.vue     | 16 ++--
 .../client/src/components/MkQuoteButton.vue   |  6 +-
 .../client/src/components/MkRenoteButton.vue  | 19 ++---
 packages/client/src/components/MkSignin.vue   |  7 +-
 packages/client/src/components/MkSignup.vue   | 63 +++++++--------
 .../client/src/components/MkStarButton.vue    |  7 +-
 .../src/components/MkStarButtonNoEmoji.vue    | 17 ++--
 .../src/components/MkSubNoteContent.vue       | 15 ++--
 packages/client/src/components/MkTimeline.vue |  7 +-
 packages/client/src/components/MkToast.vue    |  3 +-
 packages/client/src/components/MkTooltip.vue  |  3 +-
 .../src/components/MkTutorialDialog.vue       | 31 ++++----
 .../client/src/components/MkUrlPreview.vue    |  9 ++-
 .../src/components/MkUrlPreviewPopup.vue      |  3 +-
 .../client/src/components/MkUserPreview.vue   |  3 +-
 .../client/src/components/MkVisibility.vue    | 13 ++--
 .../src/components/MkVisibilityPicker.vue     | 20 +++--
 .../client/src/components/MkWaitingDialog.vue |  2 +-
 packages/client/src/components/MkWidgets.vue  |  9 ++-
 packages/client/src/components/MkWindow.vue   | 10 ++-
 .../client/src/components/form/checkbox.vue   |  2 +-
 .../client/src/components/form/folder.vue     |  6 +-
 packages/client/src/components/form/input.vue |  3 +-
 packages/client/src/components/form/link.vue  |  8 +-
 .../client/src/components/form/select.vue     |  5 +-
 .../client/src/components/form/suspense.vue   | 11 ++-
 .../client/src/components/form/textarea.vue   |  6 +-
 packages/client/src/components/global/MkA.vue |  9 ++-
 .../client/src/components/global/MkAcct.vue   |  3 +-
 .../client/src/components/global/MkAd.vue     |  3 +-
 .../client/src/components/global/MkAvatar.vue | 10 ++-
 .../client/src/components/global/MkError.vue  |  6 +-
 .../src/components/global/MkPageHeader.vue    |  3 +-
 .../client/src/components/global/MkUrl.vue    |  3 +-
 .../client/src/components/page/page.post.vue  |  9 ++-
 packages/client/src/init.ts                   | 10 +--
 packages/client/src/navbar.ts                 | 37 ++++-----
 packages/client/src/pages/_error_.vue         | 10 ++-
 packages/client/src/pages/about-firefish.vue  |  7 +-
 packages/client/src/pages/about.emojis.vue    |  3 +-
 .../client/src/pages/about.federation.vue     |  3 +-
 packages/client/src/pages/about.vue           | 13 ++--
 packages/client/src/pages/admin-file.vue      | 13 ++--
 packages/client/src/pages/admin/abuses.vue    |  3 +-
 .../client/src/pages/admin/announcements.vue  | 11 ++-
 .../client/src/pages/admin/bot-protection.vue | 11 +--
 .../client/src/pages/admin/custom-css.vue     |  3 +-
 packages/client/src/pages/admin/database.vue  |  3 +-
 .../client/src/pages/admin/email-settings.vue |  7 +-
 .../src/pages/admin/emoji-edit-dialog.vue     |  3 +-
 packages/client/src/pages/admin/emojis.vue    | 27 +++----
 .../client/src/pages/admin/experiments.vue    |  5 +-
 .../client/src/pages/admin/federation.vue     |  3 +-
 packages/client/src/pages/admin/files.vue     |  7 +-
 packages/client/src/pages/admin/hashtags.vue  |  5 +-
 packages/client/src/pages/admin/index.vue     | 55 ++++++-------
 .../client/src/pages/admin/instance-block.vue |  5 +-
 .../client/src/pages/admin/object-storage.vue |  9 ++-
 .../client/src/pages/admin/other-settings.vue |  5 +-
 .../src/pages/admin/overview.federation.vue   |  5 +-
 .../src/pages/admin/overview.instances.vue    |  3 +-
 .../src/pages/admin/overview.metrics.vue      | 11 ++-
 .../src/pages/admin/overview.moderators.vue   |  3 +-
 .../client/src/pages/admin/overview.stats.vue | 14 ++--
 .../client/src/pages/admin/overview.users.vue |  3 +-
 packages/client/src/pages/admin/overview.vue  |  3 +-
 .../client/src/pages/admin/promotions.vue     |  9 ++-
 .../client/src/pages/admin/proxy-account.vue  |  3 +-
 packages/client/src/pages/admin/queue.vue     |  9 ++-
 packages/client/src/pages/admin/relays.vue    | 16 ++--
 packages/client/src/pages/admin/security.vue  | 21 ++---
 packages/client/src/pages/admin/settings.vue  | 31 ++++----
 packages/client/src/pages/admin/users.vue     |  9 ++-
 packages/client/src/pages/announcements.vue   |  5 +-
 .../client/src/pages/antenna-timeline.vue     |  5 +-
 packages/client/src/pages/api-console.vue     |  5 +-
 packages/client/src/pages/channel-editor.vue  | 11 +--
 packages/client/src/pages/channel.vue         | 17 ++--
 packages/client/src/pages/channels.vue        | 19 +++--
 packages/client/src/pages/clip.vue            |  7 +-
 packages/client/src/pages/drive.vue           |  3 +-
 packages/client/src/pages/emojis.emoji.vue    |  5 +-
 packages/client/src/pages/explore.users.vue   | 20 ++---
 packages/client/src/pages/explore.vue         |  7 +-
 packages/client/src/pages/favorites.vue       |  3 +-
 packages/client/src/pages/follow-requests.vue |  7 +-
 packages/client/src/pages/gallery/edit.vue    | 15 ++--
 packages/client/src/pages/gallery/index.vue   | 17 ++--
 packages/client/src/pages/gallery/post.vue    | 26 ++++---
 packages/client/src/pages/instance-info.vue   | 19 +++--
 packages/client/src/pages/messaging/index.vue | 15 ++--
 .../pages/messaging/messaging-room.form.vue   | 13 ++--
 .../messaging/messaging-room.message.vue      |  5 +-
 .../src/pages/messaging/messaging-room.vue    |  5 +-
 packages/client/src/pages/mfm-cheat-sheet.vue |  3 +-
 packages/client/src/pages/miauth.vue          |  6 +-
 .../client/src/pages/my-antennas/create.vue   |  3 +-
 .../client/src/pages/my-antennas/edit.vue     |  3 +-
 .../client/src/pages/my-antennas/editor.vue   |  5 +-
 .../client/src/pages/my-antennas/index.vue    |  9 +--
 packages/client/src/pages/my-clips/index.vue  |  5 +-
 packages/client/src/pages/my-groups/group.vue | 13 ++--
 packages/client/src/pages/my-groups/index.vue |  7 +-
 packages/client/src/pages/my-lists/index.vue  |  9 ++-
 packages/client/src/pages/my-lists/list.vue   | 10 ++-
 packages/client/src/pages/no-graze.vue        |  6 +-
 packages/client/src/pages/not-found.vue       |  3 +-
 packages/client/src/pages/note.vue            |  8 +-
 packages/client/src/pages/notifications.vue   | 17 ++--
 .../page-editor/els/page-editor.el.button.vue |  3 +-
 .../page-editor/els/page-editor.el.canvas.vue |  5 +-
 .../els/page-editor.el.counter.vue            |  5 +-
 .../page-editor/els/page-editor.el.if.vue     |  5 +-
 .../page-editor/els/page-editor.el.image.vue  |  5 +-
 .../page-editor/els/page-editor.el.note.vue   |  3 +-
 .../els/page-editor.el.number-input.vue       |  5 +-
 .../page-editor/els/page-editor.el.post.vue   |  3 +-
 .../els/page-editor.el.radio-button.vue       |  5 +-
 .../els/page-editor.el.section.vue            |  8 +-
 .../page-editor/els/page-editor.el.switch.vue |  5 +-
 .../els/page-editor.el.text-input.vue         |  5 +-
 .../page-editor/els/page-editor.el.text.vue   |  3 +-
 .../els/page-editor.el.textarea-input.vue     |  5 +-
 .../els/page-editor.el.textarea.vue           |  3 +-
 .../page-editor/page-editor.container.vue     |  9 ++-
 .../page-editor/page-editor.script-block.vue  |  6 +-
 .../src/pages/page-editor/page-editor.vue     | 27 +++----
 packages/client/src/pages/page.vue            | 34 ++++----
 packages/client/src/pages/pages.vue           | 13 ++--
 packages/client/src/pages/preview.vue         |  3 +-
 packages/client/src/pages/registry.keys.vue   |  3 +-
 packages/client/src/pages/registry.value.vue  |  7 +-
 packages/client/src/pages/registry.vue        |  3 +-
 packages/client/src/pages/reset-password.vue  |  5 +-
 packages/client/src/pages/scratchpad.vue      |  5 +-
 packages/client/src/pages/search.vue          |  7 +-
 packages/client/src/pages/settings/2fa.vue    | 20 ++---
 .../src/pages/settings/account-info.vue       |  3 +-
 .../client/src/pages/settings/accounts.vue    |  9 ++-
 packages/client/src/pages/settings/api.vue    |  3 +-
 packages/client/src/pages/settings/apps.vue   |  5 +-
 .../client/src/pages/settings/custom-css.vue  |  3 +-
 .../src/pages/settings/custom-katex-macro.vue |  3 +-
 packages/client/src/pages/settings/deck.vue   |  3 +-
 .../src/pages/settings/delete-account.vue     |  3 +-
 packages/client/src/pages/settings/drive.vue  |  5 +-
 packages/client/src/pages/settings/email.vue  |  7 +-
 .../client/src/pages/settings/general.vue     | 39 ++++++++--
 .../src/pages/settings/import-export.vue      | 43 ++++++-----
 packages/client/src/pages/settings/index.vue  | 51 ++++++------
 .../src/pages/settings/instance-mute.vue      |  5 +-
 .../client/src/pages/settings/migration.vue   | 12 +--
 .../client/src/pages/settings/mute-block.vue  |  3 +-
 packages/client/src/pages/settings/navbar.vue | 21 +++--
 .../src/pages/settings/notifications.vue      |  5 +-
 packages/client/src/pages/settings/other.vue  |  7 +-
 .../src/pages/settings/plugin.install.vue     |  5 +-
 packages/client/src/pages/settings/plugin.vue |  9 ++-
 .../pages/settings/preferences-backups.vue    | 77 ++++++++++---------
 .../client/src/pages/settings/privacy.vue     |  3 +-
 .../client/src/pages/settings/profile.vue     | 17 ++--
 .../client/src/pages/settings/reaction.vue    | 11 ++-
 .../client/src/pages/settings/security.vue    | 11 ++-
 packages/client/src/pages/settings/sounds.vue |  7 +-
 .../client/src/pages/settings/statusbar.vue   |  3 +-
 .../src/pages/settings/theme.install.vue      |  7 +-
 .../src/pages/settings/theme.manage.vue       |  5 +-
 packages/client/src/pages/settings/theme.vue  | 27 +++----
 .../src/pages/settings/webhook.edit.vue       |  7 +-
 .../client/src/pages/settings/webhook.new.vue |  7 +-
 .../client/src/pages/settings/webhook.vue     |  9 ++-
 .../client/src/pages/settings/word-mute.vue   |  5 +-
 packages/client/src/pages/share.vue           |  3 +-
 packages/client/src/pages/signup-complete.vue |  3 +-
 packages/client/src/pages/tag.vue             |  7 +-
 packages/client/src/pages/theme-editor.vue    | 11 ++-
 packages/client/src/pages/timeline.vue        | 33 ++++----
 packages/client/src/pages/user-info.vue       | 25 +++---
 .../client/src/pages/user-list-timeline.vue   |  7 +-
 packages/client/src/pages/user/followers.vue  |  3 +-
 packages/client/src/pages/user/following.vue  |  3 +-
 packages/client/src/pages/user/home.vue       | 47 +++++------
 .../client/src/pages/user/index.activity.vue  |  8 +-
 .../client/src/pages/user/index.photos.vue    |  3 +-
 packages/client/src/pages/user/index.vue      | 13 ++--
 packages/client/src/pages/verify-email.vue    |  3 +-
 .../client/src/pages/welcome.entrance.a.vue   |  9 ++-
 .../client/src/pages/welcome.entrance.b.vue   |  7 +-
 .../client/src/pages/welcome.entrance.c.vue   |  7 +-
 packages/client/src/pages/welcome.setup.vue   |  5 +-
 .../client/src/pages/welcome.timeline.vue     |  3 +-
 packages/client/src/scripts/get-note-menu.ts  | 61 +++++++--------
 packages/client/src/scripts/get-user-menu.ts  | 45 +++++------
 packages/client/src/scripts/helpMenu.ts       | 19 ++---
 packages/client/src/scripts/hpml/index.ts     | 23 ++++--
 packages/client/src/scripts/hpml/lib.ts       | 76 +++++++++---------
 packages/client/src/scripts/icon.ts           |  5 ++
 packages/client/src/scripts/select-file.ts    |  7 +-
 packages/client/src/store.ts                  | 18 +++--
 .../src/ui/_common_/navbar-for-mobile.vue     | 23 +++---
 packages/client/src/ui/_common_/navbar.vue    | 17 ++--
 .../src/ui/_common_/stream-indicator.vue      |  3 +-
 packages/client/src/ui/_common_/upload.vue    |  4 +-
 packages/client/src/ui/deck.vue               | 45 ++++++-----
 .../client/src/ui/deck/antenna-column.vue     |  5 +-
 .../client/src/ui/deck/channel-column.vue     |  5 +-
 packages/client/src/ui/deck/column.vue        | 36 ++++-----
 packages/client/src/ui/deck/direct-column.vue |  4 +-
 packages/client/src/ui/deck/list-column.vue   |  5 +-
 packages/client/src/ui/deck/main-column.vue   |  8 +-
 .../client/src/ui/deck/mentions-column.vue    |  4 +-
 .../src/ui/deck/notifications-column.vue      |  5 +-
 packages/client/src/ui/deck/tl-column.vue     | 13 ++--
 .../client/src/ui/deck/widgets-column.vue     |  5 +-
 packages/client/src/ui/universal.vue          | 54 +++++++------
 packages/client/src/ui/universal.widgets.vue  |  7 +-
 packages/client/src/ui/visitor/a.vue          |  4 +-
 packages/client/src/ui/visitor/b.vue          | 24 +++---
 packages/client/src/ui/visitor/header.vue     | 17 ++--
 packages/client/src/widgets/activity.vue      | 13 ++--
 packages/client/src/widgets/aiscript.vue      | 11 +--
 packages/client/src/widgets/federation.vue    | 14 ++--
 packages/client/src/widgets/job-queue.vue     | 14 ++--
 packages/client/src/widgets/memo.vue          | 12 +--
 packages/client/src/widgets/notifications.vue | 13 ++--
 packages/client/src/widgets/photos.vue        | 11 +--
 packages/client/src/widgets/rss-ticker.vue    | 14 ++--
 packages/client/src/widgets/rss.vue           | 14 ++--
 .../client/src/widgets/server-metric/cpu.vue  |  3 +-
 .../client/src/widgets/server-metric/disk.vue |  3 +-
 .../src/widgets/server-metric/index.vue       | 13 ++--
 .../src/widgets/server-metric/meilisearch.vue | 11 +--
 .../client/src/widgets/server-metric/mem.vue  | 11 +--
 packages/client/src/widgets/timeline.vue      | 42 +++++-----
 packages/client/src/widgets/trends.vue        | 14 ++--
 packages/client/src/widgets/user-list.vue     |  5 +-
 pnpm-lock.yaml                                |  3 +
 283 files changed, 1711 insertions(+), 1523 deletions(-)
 create mode 100644 packages/client/src/scripts/icon.ts

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 10c84425b..24fc39244 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1153,6 +1153,7 @@ detectPostLanguage: "Automatically detect the language and show a translate butt
   for posts in foreign languages"
 vibrate: "Play vibrations"
 openServerInfo: "Show server information by clicking the server ticker on a post"
+iconSet: "Icon set"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing
@@ -2152,3 +2153,9 @@ _feeds:
   rss: "RSS"
   atom: "Atom"
   jsonFeed: "JSON feed"
+_iconSets:
+  bold: "Bold"
+  light: "Light"
+  regular: "Regular"
+  fill: "Filled"
+  duotone: "Duotone"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8f136ed24..31d817b7b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -991,6 +991,7 @@ remindMeLater: "また後で"
 addRe: "閲覧注意の投稿への返信で、注釈の先頭に\"re:\"を追加する"
 languageForTranslation: "投稿翻訳に使用する言語"
 detectPostLanguage: "投稿の言語を自動検出し、外国語の投稿に翻訳ボタンを表示する"
+iconSet: "アイコンのスタイル"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てられます。サーバーの負荷が少し増えます。"
@@ -1994,3 +1995,9 @@ indexableDescription: MastodonやFirefishなどの検索機能に、あなたの
 clickToShowPatterns: クリックしてトラックを表示
 vibrate: 振動を有効にする
 indexable: 投稿検索に登録
+_iconSets:
+  bold: "太め"
+  light: "細め"
+  regular: "標準"
+  fill: "塗りつぶし"
+  duotone: "2色"
diff --git a/packages/client/package.json b/packages/client/package.json
index 7e9236b51..890aba4ab 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -31,6 +31,7 @@
 		"@types/uuid": "9.0.3",
 		"@vitejs/plugin-vue": "4.3.4",
 		"@vue/compiler-sfc": "3.3.4",
+		"@vue/runtime-core": "3.3.4",
 		"autobind-decorator": "2.4.0",
 		"autosize": "6.0.1",
 		"blurhash": "2.0.5",
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 1f8d512a0..761ebe5e0 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -3,8 +3,9 @@ import type * as firefish from "firefish-js";
 import { i18n } from "./i18n";
 import { del, get, set } from "@/scripts/idb-proxy";
 import { apiUrl } from "@/config";
-import { alert, api, popup, popupMenu, success, waiting } from "@/os";
+import { alert, api, popup, popupMenu, waiting } from "@/os";
 import { reloadChannel, unisonReload } from "@/scripts/unison-reload";
+import icon from "@/scripts/icon";
 
 // TODO: 他のタブと永続化されたstateを同期
 
@@ -249,7 +250,7 @@ export async function openAccountMenu(
 					...accountItemPromises,
 					{
 						type: "parent",
-						icon: "ph-plus ph-bold ph-lg",
+						icon: `${icon("ph-plus")}`,
 						text: i18n.ts.addAccount,
 						children: [
 							{
@@ -268,13 +269,13 @@ export async function openAccountMenu(
 					},
 					{
 						type: "link",
-						icon: "ph-users ph-bold ph-lg",
+						icon: `${icon("ph-users")}`,
 						text: i18n.ts.manageAccounts,
 						to: "/settings/accounts",
 					},
 					{
 						type: "button",
-						icon: "ph-sign-out ph-bold ph-lg",
+						icon: `${icon("ph-sign-out")}`,
 						text: i18n.ts.logout,
 						action: () => {
 							signout();
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 383978943..8d5675868 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -8,7 +8,7 @@
 	>
 		<template #header>
 			<i
-				class="ph-warning-circle ph-bold ph-lg"
+				:class="icon('ph-warning-circle')"
 				style="margin-right: 0.5em"
 			></i>
 			<I18n :src="i18n.ts.reportAbuseOf" tag="span">
@@ -47,6 +47,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	user: firefish.entities.User;
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index 77b5f5f49..c1910bc59 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -8,16 +8,16 @@
 		<template v-if="!wait">
 			<template v-if="isFollowing">
 				<span v-if="full">{{ i18n.ts.unfollow }}</span
-				><i class="ph-minus ph-bold ph-lg"></i>
+				><i :class="icon('ph-minus')"></i>
 			</template>
 			<template v-else>
 				<span v-if="full">{{ i18n.ts.follow }}</span
-				><i class="ph-plus ph-bold ph-lg"></i>
+				><i :class="icon('ph-plus')"></i>
 			</template>
 		</template>
 		<template v-else>
 			<span v-if="full">{{ i18n.ts.processing }}</span
-			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
+			><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
 		</template>
 	</button>
 </template>
@@ -26,6 +26,7 @@
 import { ref } from "vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index 12df63bf0..f824a1b2f 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -3,11 +3,12 @@
 		<div class="banner" :style="bannerStyle">
 			<div class="fade"></div>
 			<div class="name">
-				<i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}
+				<i :class="icon('ph-television')"></i>
+				{{ channel.name }}
 			</div>
 			<div class="status">
 				<div>
-					<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
+					<i :class="icon('ph-users ph-fw')"></i>
 					<I18n
 						:src="i18n.ts._channel.usersCount"
 						tag="span"
@@ -19,7 +20,7 @@
 					</I18n>
 				</div>
 				<div>
-					<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
+					<i :class="icon('ph-pencil ph-fw')"></i>
 					<I18n
 						:src="i18n.ts._channel.notesCount"
 						tag="span"
@@ -52,6 +53,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	channel: Record<string, any>;
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 54e56f81b..404f98441 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -20,16 +20,16 @@
 					@click="() => (showBody = !showBody)"
 				>
 					<template v-if="showBody"
-						><i class="ph-caret-up ph-bold ph-lg"></i
+						><i :class="icon('ph-caret-up')"></i
 					></template>
 					<template v-else
-						><i class="ph-caret-down ph-bold ph-lg"></i
+						><i :class="icon('ph-caret-down')"></i
 					></template>
 				</button>
 			</div>
 		</header>
 		<transition
-			:name="$store.state.animation ? 'container-toggle' : ''"
+			:name="defaultStore.state.animation ? 'container-toggle' : ''"
 			@enter="enter"
 			@after-enter="afterEnter"
 			@leave="leave"
@@ -62,6 +62,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	props: {
@@ -107,6 +109,8 @@ export default defineComponent({
 			omitted: null,
 			ignoreOmit: false,
 			i18n,
+			icon,
+			defaultStore,
 		};
 	},
 	mounted() {
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
index 22920270b..3944719fa 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -1,5 +1,5 @@
 <template>
-	<transition :name="$store.state.animation ? 'fade' : ''" appear>
+	<transition :name="defaultStore.state.animation ? 'fade' : ''" appear>
 		<div
 			ref="rootEl"
 			class="nvlagfpb"
@@ -17,6 +17,7 @@ import MkMenu from "@/components/MkMenu.vue";
 import type { MenuItem } from "@/types/menu";
 import contains from "@/scripts/contains";
 import * as os from "@/os";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	items: MenuItem[];
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index bbf948e74..124de0832 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -4,6 +4,7 @@ import { TransitionGroup, defineComponent, h } from "vue";
 import MkAd from "@/components/global/MkAd.vue";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	props: {
@@ -75,14 +76,14 @@ export default defineComponent({
 							[
 								h("span", [
 									h("i", {
-										class: "ph-caret-up ph-bold ph-lg icon",
+										class: `${icon("ph-caret-up")} icon`,
 									}),
 									getDateText(item.createdAt),
 								]),
 								h("span", [
 									getDateText(props.items[i + 1].createdAt),
 									h("i", {
-										class: "ph-caret-down ph-bold ph-lg icon",
+										class: `${icon("ph-caret-down")} icon`,
 									}),
 								]),
 							],
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 688e4edc8..ce1bfc387 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -16,27 +16,27 @@
 				<i
 					v-if="type === 'success'"
 					:class="$style.iconInner"
-					class="ph-check ph-bold ph-lg"
+					class="ph-check ph-lg"
 				></i>
 				<i
 					v-else-if="type === 'error'"
 					:class="$style.iconInner"
-					class="ph-circle-wavy-warning ph-bold ph-lg"
+					class="ph-circle-wavy-warning ph-lg"
 				></i>
 				<i
 					v-else-if="type === 'warning'"
 					:class="$style.iconInner"
-					class="ph-warning ph-bold ph-lg"
+					class="ph-warning ph-lg"
 				></i>
 				<i
 					v-else-if="type === 'info'"
 					:class="$style.iconInner"
-					class="ph-info ph-bold ph-lg"
+					class="ph-info ph-lg"
 				></i>
 				<i
 					v-else-if="type === 'question'"
 					:class="$style.iconInner"
-					class="ph-circle-question ph-bold ph-lg"
+					class="ph-circle-question ph-lg"
 				></i>
 				<MkLoading
 					v-else-if="type === 'waiting'"
@@ -75,7 +75,7 @@
 				@keydown="onInputKeydown"
 			>
 				<template v-if="input.type === 'password'" #prefix
-					><i class="ph-password ph-bold ph-lg"></i
+					><i :class="iconClass('ph-password')"></i
 				></template>
 				<template #caption>
 					<span
@@ -109,7 +109,7 @@
 						class="_buttonIcon"
 						@click.stop="openSearchFilters"
 					>
-						<i class="ph-funnel ph-bold"></i>
+						<i :class="iconClass('ph-funnel', false)"></i>
 					</button>
 				</template>
 			</MkInput>
@@ -213,6 +213,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import MkSelect from "@/components/form/select.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import iconClass from "@/scripts/icon";
 
 interface Input {
 	type: HTMLInputElement["type"];
@@ -364,7 +365,7 @@ async function openSearchFilters(ev) {
 	await os.popupMenu(
 		[
 			{
-				icon: "ph-user ph-bold ph-lg",
+				icon: `${icon("ph-user")}`,
 				text: i18n.ts._filters.fromUser,
 				action: () => {
 					os.selectUser().then((user) => {
@@ -375,32 +376,32 @@ async function openSearchFilters(ev) {
 			{
 				type: "parent",
 				text: i18n.ts._filters.withFile,
-				icon: "ph-paperclip ph-bold ph-lg",
+				icon: `${icon("ph-paperclip")}`,
 				children: [
 					{
 						text: i18n.ts.image,
-						icon: "ph-image-square ph-bold ph-lg",
+						icon: `${icon("ph-image-square")}`,
 						action: () => {
 							inputValue.value += " has:image";
 						},
 					},
 					{
 						text: i18n.ts.video,
-						icon: "ph-video-camera ph-bold ph-lg",
+						icon: `${icon("ph-video-camera")}`,
 						action: () => {
 							inputValue.value += " has:video";
 						},
 					},
 					{
 						text: i18n.ts.audio,
-						icon: "ph-music-note ph-bold ph-lg",
+						icon: `${icon("ph-music-note")}`,
 						action: () => {
 							inputValue.value += " has:audio";
 						},
 					},
 					{
 						text: i18n.ts.file,
-						icon: "ph-file ph-bold ph-lg",
+						icon: `${icon("ph-file")}`,
 						action: () => {
 							inputValue.value += " has:file";
 						},
@@ -408,14 +409,14 @@ async function openSearchFilters(ev) {
 				],
 			},
 			{
-				icon: "ph-link ph-bold ph-lg",
+				icon: `${icon("ph-link")}`,
 				text: i18n.ts._filters.fromDomain,
 				action: () => {
 					inputValue.value += " domain:";
 				},
 			},
 			{
-				icon: "ph-calendar-blank ph-bold ph-lg",
+				icon: `${icon("ph-calendar-blank")}`,
 				text: i18n.ts._filters.notesBefore,
 				action: () => {
 					os.inputDate({
@@ -428,7 +429,7 @@ async function openSearchFilters(ev) {
 				},
 			},
 			{
-				icon: "ph-calendar-blank ph-bold ph-lg",
+				icon: `${icon("ph-calendar-blank")}`,
 				text: i18n.ts._filters.notesAfter,
 				action: () => {
 					os.inputDate({
@@ -441,14 +442,14 @@ async function openSearchFilters(ev) {
 				},
 			},
 			{
-				icon: "ph-eye ph-bold ph-lg",
+				icon: `${icon("ph-eye")}`,
 				text: i18n.ts._filters.followingOnly,
 				action: () => {
 					inputValue.value += " filter:following ";
 				},
 			},
 			{
-				icon: "ph-users-three ph-bold ph-lg",
+				icon: `${icon("ph-users-three")}`,
 				text: i18n.ts._filters.followersOnly,
 				action: () => {
 					inputValue.value += " filter:followers ";
diff --git a/packages/client/src/components/MkDonation.vue b/packages/client/src/components/MkDonation.vue
index b3f4d2790..095dd7a14 100644
--- a/packages/client/src/components/MkDonation.vue
+++ b/packages/client/src/components/MkDonation.vue
@@ -2,7 +2,7 @@
 	<transition name="slide-fade">
 		<div v-if="show" class="_panel _shadow _acrylic" :class="$style.root">
 			<div :class="$style.icon">
-				<i class="ph-hand-heart ph-bold ph-5x" />
+				<i :class="icon('ph-hand-heart ph-5x', false)" />
 			</div>
 			<div :class="$style.main">
 				<div :class="$style.title">
@@ -52,7 +52,7 @@
 				:aria-label="i18n.t('close')"
 				@click="close"
 			>
-				<i class="ph-x ph-bold ph-lg"></i>
+				<i :class="icon('ph-x')"></i>
 			</button>
 		</div>
 	</transition>
@@ -65,6 +65,7 @@ import { host } from "@/config";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 import { instance } from "@/instance";
+import icon from "@/scripts/icon";
 
 const show = ref(false);
 
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index e2ef60004..8f5a10730 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -46,6 +46,7 @@ import bytes from "@/filters/bytes";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
@@ -75,7 +76,7 @@ function getMenu() {
 	return [
 		{
 			text: i18n.ts.rename,
-			icon: "ph-cursor-text ph-bold ph-lg",
+			icon: `${icon("ph-cursor-text")}`,
 			action: rename,
 		},
 		{
@@ -83,19 +84,19 @@ function getMenu() {
 				? i18n.ts.unmarkAsSensitive
 				: i18n.ts.markAsSensitive,
 			icon: props.file.isSensitive
-				? "ph-eye ph-bold ph-lg"
-				: "ph-eye-slash ph-bold ph-lg",
+				? "ph-eye ph-lg"
+				: "ph-eye-slash ph-lg",
 			action: toggleSensitive,
 		},
 		{
 			text: i18n.ts.describeFile,
-			icon: "ph-subtitles ph-bold ph-lg",
+			icon: `${icon("ph-subtitles")}`,
 			action: describe,
 		},
 		null,
 		{
 			text: i18n.ts.copyUrl,
-			icon: "ph-link-simple ph-bold ph-lg",
+			icon: `${icon("ph-link-simple")}`,
 			action: copyUrl,
 		},
 		{
@@ -103,13 +104,13 @@ function getMenu() {
 			href: props.file.url,
 			target: "_blank",
 			text: i18n.ts.download,
-			icon: "ph-download-simple ph-bold ph-lg",
+			icon: `${icon("ph-download-simple")}`,
 			download: props.file.name,
 		},
 		null,
 		{
 			text: i18n.ts.delete,
-			icon: "ph-trash ph-bold ph-lg",
+			icon: `${icon("ph-trash")}`,
 			danger: true,
 			action: deleteFile,
 		},
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 9973c471d..38dc61860 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -17,10 +17,10 @@
 	>
 		<p class="name">
 			<template v-if="hover"
-				><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i
+				><i :class="icon('ph-folder-notch-open ph-fw')"></i
 			></template>
 			<template v-if="!hover"
-				><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i
+				><i :class="icon('ph-folder-notch ph-fw')"></i
 			></template>
 			{{ folder.name }}
 		</p>
@@ -42,6 +42,7 @@ import type * as firefish from "firefish-js";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
@@ -248,7 +249,7 @@ function onContextmenu(ev: MouseEvent) {
 		[
 			{
 				text: i18n.ts.openInWindow,
-				icon: "ph-copy ph-bold ph-lg",
+				icon: `${icon("ph-copy")}`,
 				action: () => {
 					os.popup(
 						defineAsyncComponent(
@@ -265,13 +266,13 @@ function onContextmenu(ev: MouseEvent) {
 			null,
 			{
 				text: i18n.ts.rename,
-				icon: "ph-cursor-text ph-bold ph-lg",
+				icon: `${icon("ph-cursor-text")}`,
 				action: rename,
 			},
 			null,
 			{
 				text: i18n.ts.delete,
-				icon: "ph-trash ph-bold ph-lg",
+				icon: `${icon("ph-trash")}`,
 				danger: true,
 				action: deleteFolder,
 			},
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index c4a5ff378..cfd889ae5 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -8,7 +8,7 @@
 		@dragleave="onDragleave"
 		@drop.stop="onDrop"
 	>
-		<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
+		<i v-if="folder == null" :class="icon('ph-cloud')"></i>
 		<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
 	</div>
 </template>
@@ -18,6 +18,7 @@ import { ref } from "vue";
 import type * as firefish from "firefish-js";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	folder?: firefish.entities.DriveFolder;
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 3702b9401..1c0a46aba 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -12,7 +12,7 @@
 				/>
 				<template v-for="f in hierarchyFolders">
 					<span class="separator"
-						><i class="ph-caret-right ph-bold ph-lg"></i
+						><i :class="icon('ph-caret-right')"></i
 					></span>
 					<XNavFolder
 						:folder="f"
@@ -24,14 +24,14 @@
 					/>
 				</template>
 				<span v-if="folder != null" class="separator"
-					><i class="ph-caret-right ph-bold ph-lg"></i
+					><i :class="icon('ph-caret-right')"></i
 				></span>
 				<span v-if="folder != null" class="folder current">{{
 					folder.name
 				}}</span>
 			</div>
 			<button class="menu _button" @click="showMenu">
-				<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+				<i :class="icon('ph-dots-three-outline')"></i>
 			</button>
 		</nav>
 		<div
@@ -149,6 +149,7 @@ import { stream } from "@/stream";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { uploadFile, uploads } from "@/scripts/upload";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
@@ -677,14 +678,14 @@ function getMenu() {
 		},
 		{
 			text: i18n.ts.upload,
-			icon: "ph-upload-simple ph-bold ph-lg",
+			icon: `${icon("ph-upload-simple")}`,
 			action: () => {
 				selectLocalFile();
 			},
 		},
 		{
 			text: i18n.ts.fromUrl,
-			icon: "ph-link-simple ph-bold ph-lg",
+			icon: `${icon("ph-link-simple")}`,
 			action: () => {
 				urlUpload();
 			},
@@ -697,7 +698,7 @@ function getMenu() {
 		folder.value
 			? {
 					text: i18n.ts.renameFolder,
-					icon: "ph-cursor-text ph-bold ph-lg",
+					icon: `${icon("ph-cursor-text")}`,
 					action: () => {
 						renameFolder(folder.value);
 					},
@@ -706,7 +707,7 @@ function getMenu() {
 		folder.value
 			? {
 					text: i18n.ts.deleteFolder,
-					icon: "ph-trash ph-bold ph-lg",
+					icon: `${icon("ph-trash")}`,
 					action: () => {
 						deleteFolder(
 							folder.value as firefish.entities.DriveFolder,
@@ -716,7 +717,7 @@ function getMenu() {
 			: undefined,
 		{
 			text: i18n.ts.createFolder,
-			icon: "ph-folder-notch-plus ph-bold ph-lg",
+			icon: `${icon("ph-folder-notch-plus")}`,
 			action: () => {
 				createFolder();
 			},
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index 3a93be639..9fe0a62ca 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -8,33 +8,21 @@
 			:title="file.name"
 			:cover="fit !== 'contain'"
 		/>
-		<i
-			v-else-if="is === 'image'"
-			class="ph-file-image ph-bold ph-lg icon"
-		></i>
-		<i
-			v-else-if="is === 'video'"
-			class="ph-file-video ph-bold ph-lg icon"
-		></i>
+		<i v-else-if="is === 'image'" :class="icon('ph-file-image icon')"></i>
+		<i v-else-if="is === 'video'" :class="icon('ph-file-video icon')"></i>
 		<i
 			v-else-if="is === 'audio' || is === 'midi'"
-			class="ph-file-audio ph-bold ph-lg icon"
+			:class="icon('ph-file-audio icon')"
 		></i>
-		<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
-		<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
-		<i
-			v-else-if="is === 'textfile'"
-			class="ph-file-text ph-bold ph-lg icon"
-		></i>
-		<i
-			v-else-if="is === 'archive'"
-			class="ph-file-zip ph-bold ph-lg icon"
-		></i>
-		<i v-else class="ph-file ph-bold ph-lg icon"></i>
+		<i v-else-if="is === 'csv'" :class="icon('ph-file-csv icon')"></i>
+		<i v-else-if="is === 'pdf'" :class="icon('ph-file-pdf icon')"></i>
+		<i v-else-if="is === 'textfile'" :class="icon('ph-file-text icon')"></i>
+		<i v-else-if="is === 'archive'" :class="icon('ph-file-zip icon')"></i>
+		<i v-else :class="icon('ph-file icon')"></i>
 
 		<i
 			v-if="isThumbnailAvailable && is === 'video'"
-			class="ph-file-video ph-bold ph-lg icon-sub"
+			:class="icon('ph-file-video icon-sub')"
 		></i>
 	</button>
 </template>
@@ -43,6 +31,7 @@
 import { computed } from "vue";
 import type * as firefish from "firefish-js";
 import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	file: firefish.entities.DriveFile;
diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index 2ffe84289..3eba80ee2 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -4,9 +4,7 @@
 			<i
 				class="toggle ph-fw ph-lg"
 				:class="
-					shown
-						? 'ph-caret-down ph-bold ph-lg'
-						: 'ph-caret-up ph-bold ph-lg'
+					icon(shown ? 'ph-caret-down ph-lg' : 'ph-caret-up ph-lg')
 				"
 			></i>
 			<slot></slot> ({{ emojis.length }})
@@ -21,7 +19,7 @@
 					"
 				>
 					<i
-						class="ph-circle ph-fill ph-fw ph-lg"
+						class="ph-circle ph-fill ph-fw"
 						:style="{ color: skinTone + ' !important' }"
 						:aria-label="
 							props.skinToneLabels
@@ -50,6 +48,7 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from "vue";
 import { addSkinTone } from "@/scripts/emojilist";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	emojis: string[];
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index f45195d1a..3e911c152 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -75,7 +75,7 @@
 
 					<section>
 						<header class="_acrylic">
-							<i class="ph-alarm ph-bold ph-fw ph-lg"></i>
+							<i :class="icon('ph-alarm ph-fw')"></i>
 							{{ i18n.ts.recentUsed }}
 						</header>
 						<div class="body">
@@ -135,28 +135,28 @@
 					:class="{ active: tab === 'index' }"
 					@click="tab = 'index'"
 				>
-					<i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i>
+					<i :class="icon('ph-asterisk ph-fw')"></i>
 				</button>
 				<button
 					class="_button tab"
 					:class="{ active: tab === 'custom' }"
 					@click="tab = 'custom'"
 				>
-					<i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i>
+					<i :class="icon('ph-smiley ph-fw')"></i>
 				</button>
 				<button
 					class="_button tab"
 					:class="{ active: tab === 'unicode' }"
 					@click="tab = 'unicode'"
 				>
-					<i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i>
+					<i :class="icon('ph-leaf ph-fw')"></i>
 				</button>
 				<button
 					class="_button tab"
 					:class="{ active: tab === 'tags' }"
 					@click="tab = 'tags'"
 				>
-					<i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i>
+					<i :class="icon('ph-hash ph-fw')"></i>
 				</button>
 			</div>
 		</div>
@@ -182,6 +182,7 @@ import { deviceKind } from "@/scripts/device-kind";
 import { emojiCategories, instance } from "@/instance";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkFileTypeIcon.vue b/packages/client/src/components/MkFileTypeIcon.vue
index 388b6d7fc..23072dff0 100644
--- a/packages/client/src/components/MkFileTypeIcon.vue
+++ b/packages/client/src/components/MkFileTypeIcon.vue
@@ -1,13 +1,14 @@
 <template>
 	<span class="mk-file-type-icon">
 		<template v-if="kind == 'image'"
-			><i class="ph-file-image ph-bold ph-lg"></i
+			><i :class="icon('ph-file-image')"></i
 		></template>
 	</span>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	type: string;
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 5de841b62..a168cbdcf 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -10,15 +10,15 @@
 				:aria-controls="bodyId"
 			>
 				<template v-if="showBody"
-					><i class="ph-caret-up ph-bold ph-lg"></i
+					><i :class="icon('ph-caret-up')"></i
 				></template>
 				<template v-else
-					><i class="ph-caret-down ph-bold ph-lg"></i
+					><i :class="icon('ph-caret-down')"></i
 				></template>
 			</button>
 		</header>
 		<transition
-			:name="$store.state.animation ? 'folder-toggle' : ''"
+			:name="defaultStore.state.animation ? 'folder-toggle' : ''"
 			@enter="enter"
 			@after-enter="afterEnter"
 			@leave="leave"
@@ -34,6 +34,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { getUniqueId } from "@/os";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const localStoragePrefix = "ui:folder:";
 
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index aba3e5161..961805f55 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -5,7 +5,7 @@
 		class="menu _button"
 		@click.stop="menu"
 	>
-		<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+		<i :class="icon('ph-dots-three-outline')"></i>
 	</button>
 	<button
 		v-if="$i != null && $i.id != user.id"
@@ -25,37 +25,37 @@
 		<template v-if="!wait">
 			<template v-if="isBlocking">
 				<span>{{ (state = i18n.ts.blocked) }}</span
-				><i class="ph-prohibit ph-bold ph-lg"></i>
+				><i :class="icon('ph-prohibit')"></i>
 			</template>
 			<template
 				v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
 			>
 				<span>{{ (state = i18n.ts.followRequestPending) }}</span
-				><i class="ph-hourglass-medium ph-bold ph-lg"></i>
+				><i :class="icon('ph-hourglass-medium')"></i>
 			</template>
 			<template
 				v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
 			>
 				<!-- つまりリモートフォローの場合。 -->
 				<span>{{ (state = i18n.ts.processing) }}</span
-				><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
+				><i :class="icon('ph-circle-notch fa-pulse')"></i>
 			</template>
 			<template v-else-if="isFollowing">
 				<span>{{ (state = i18n.ts.unfollow) }}</span
-				><i class="ph-minus ph-bold ph-lg"></i>
+				><i :class="icon('ph-minus')"></i>
 			</template>
 			<template v-else-if="!isFollowing && user.isLocked">
 				<span>{{ (state = i18n.ts.followRequest) }}</span
-				><i class="ph-lock-open ph-bold ph-lg"></i>
+				><i :class="icon('ph-lock-open')"></i>
 			</template>
 			<template v-else-if="!isFollowing && !user.isLocked">
 				<span>{{ (state = i18n.ts.follow) }}</span
-				><i class="ph-plus ph-bold ph-lg"></i>
+				><i :class="icon('ph-plus')"></i>
 			</template>
 		</template>
 		<template v-else>
 			<span>{{ (state = i18n.ts.processing) }}</span
-			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
+			><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
 		</template>
 	</button>
 </template>
@@ -70,6 +70,7 @@ import { $i } from "@/account";
 import { getUserMenu } from "@/scripts/get-user-menu";
 import { useRouter } from "@/router";
 import { vibrate } from "@/scripts/vibrate";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index c014607db..174f03f3c 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -2,7 +2,7 @@
 	<div class="mk-google" @click.stop>
 		<input v-model="query" type="search" :placeholder="q" />
 		<button @click="search">
-			<i class="ph-magnifying-glass ph-bold ph-lg"></i>
+			<i :class="icon('ph-magnifying-glass')"></i>
 			{{ i18n.ts.searchByGoogle }}
 		</button>
 	</div>
@@ -12,6 +12,7 @@
 import { ref } from "vue";
 import { i18n } from "@/i18n";
 import { useRouter } from "@/router";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index ff94443fe..1247903a9 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -1,11 +1,7 @@
 <template>
 	<div v-if="visible" class="info" :class="{ warn, card }">
-		<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
-		<i
-			v-else
-			class="ph-bold ph-lg"
-			:class="icon ? `ph-${icon}` : 'ph-info'"
-		></i>
+		<i v-if="warn" :class="iconClass('ph-warning')"></i>
+		<i v-else :class="iconClass(icon ? `ph-${icon}` : 'ph-info')"></i>
 		<slot></slot>
 		<button
 			v-if="closeable"
@@ -14,7 +10,7 @@
 			:aria-label="i18n.t('close')"
 			@click.stop="close"
 		>
-			<i class="ph-x ph-bold ph-lg"></i>
+			<i :class="iconClass('ph-x')"></i>
 		</button>
 	</div>
 </template>
@@ -22,6 +18,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { i18n } from "@/i18n";
+import iconClass from "@/scripts/icon";
 
 const visible = ref(true);
 
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index 4cc4d6777..a454ea949 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -12,17 +12,17 @@
 				style="margin-left: 0.5em"
 				@click="copy_"
 			>
-				<i class="ph-clipboard-text ph-bold"></i>
+				<i :class="icon('ph-clipboard-text', false)"></i>
 			</button>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index e63fb8fad..286f9ccf5 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -33,7 +33,7 @@
 							v-if="item.indicate"
 							class="indicator"
 							:class="{
-								animateIndicator: $store.state.animation,
+								animateIndicator: defaultStore.state.animation,
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
@@ -50,7 +50,7 @@
 							v-if="item.indicate"
 							class="indicator"
 							:class="{
-								animateIndicator: $store.state.animation,
+								animateIndicator: defaultStore.state.animation,
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index f58551717..b49bac86b 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -3,7 +3,7 @@
 		:is="self ? 'MkA' : 'a'"
 		ref="el"
 		class="xlcxczvw _link"
-		:[attr]="self ? url.substr(local.length) : url"
+		:[attr]="self ? url.substring(local.length) : url"
 		:rel="rel"
 		:target="target"
 		:title="url"
@@ -12,7 +12,7 @@
 		<slot></slot>
 		<i
 			v-if="target === '_blank'"
-			class="ph-arrow-square-out ph-bold ph-lg icon"
+			:class="icon('ph-arrow-square-out icon')"
 		></i>
 	</component>
 </template>
@@ -22,6 +22,7 @@ import { defineAsyncComponent, ref } from "vue";
 import { url as local } from "@/config";
 import { useTooltip } from "@/scripts/use-tooltip";
 import * as os from "@/os";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/MkMedia.vue
index fb0c181a0..24db8d4e7 100644
--- a/packages/client/src/components/MkMedia.vue
+++ b/packages/client/src/components/MkMedia.vue
@@ -9,7 +9,7 @@
 			<div class="text">
 				<div class="wrapper">
 					<b style="display: block"
-						><i class="ph-warning ph-bold ph-lg"></i>
+						><i :class="icon('ph-warning')"></i>
 						{{ i18n.ts.sensitive }}</b
 					>
 					<span style="display: block">{{
@@ -74,7 +74,7 @@
 				class="_button"
 				@click.stop="captionPopup"
 			>
-				<i class="ph-subtitles ph-bold ph-lg"></i>
+				<i :class="icon('ph-subtitles')"></i>
 			</button>
 			<button
 				v-if="!hide"
@@ -82,7 +82,7 @@
 				class="_button"
 				@click.stop="hide = true"
 			>
-				<i class="ph-eye-slash ph-bold ph-lg"></i>
+				<i :class="icon('ph-eye-slash')"></i>
 			</button>
 		</div>
 	</div>
@@ -98,6 +98,7 @@ import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	media: firefish.entities.DriveFile;
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index df9e7d160..8c3fd680a 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -5,7 +5,7 @@
 			class="sensitive"
 			@click="hide = false"
 		>
-			<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
+			<span class="icon"><i :class="icon('ph-warning')"></i></span>
 			<b>{{ i18n.ts.sensitive }}</b>
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
@@ -48,7 +48,7 @@
 			:download="media.name"
 		>
 			<span class="icon"
-				><i class="ph-download-simple ph-bold ph-lg"></i
+				><i :class="icon('ph-download-simple')"></i
 			></span>
 			<b>{{ media.name }}</b>
 		</a>
@@ -62,6 +62,7 @@ import type * as firefish from "firefish-js";
 import { ColdDeviceStorage } from "@/store";
 import "vue-plyr/dist/vue-plyr.css";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 59e0fb92e..fa8e2a871 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -11,7 +11,7 @@
 		<span class="main">
 			<span class="username">@{{ username }}</span>
 			<span
-				v-if="host != localHost || $store.state.showFullAcct"
+				v-if="host != localHost || defaultStore.state.showFullAcct"
 				class="host"
 				>@{{ toUnicode(host) }}</span
 			>
@@ -38,6 +38,7 @@ import { toUnicode } from "punycode";
 import {} from "vue";
 import { host as localHost } from "@/config";
 import { $i } from "@/account";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	username: string;
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index e3021ee59..1054061db 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -57,7 +57,7 @@
 							v-if="item.indicate"
 							class="indicator"
 							:class="{
-								animateIndicator: $store.state.animation,
+								animateIndicator: defaultStore.state.animation,
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
@@ -74,8 +74,7 @@
 					>
 						<i
 							v-if="item.icon"
-							class="ph-fw ph-lg"
-							:class="item.icon"
+							:class="icon(`${item.icon} ph-fw`)"
 						></i>
 						<span :style="item.textStyle || ''">{{
 							item.text
@@ -84,7 +83,7 @@
 							v-if="item.indicate"
 							class="indicator"
 							:class="{
-								animateIndicator: $store.state.animation,
+								animateIndicator: defaultStore.state.animation,
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
@@ -107,7 +106,7 @@
 							v-if="item.indicate"
 							class="indicator"
 							:class="{
-								animateIndicator: $store.state.animation,
+								animateIndicator: defaultStore.state.animation,
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
@@ -135,16 +134,13 @@
 					>
 						<i
 							v-if="item.icon"
-							class="ph-fw ph-lg"
-							:class="item.icon"
+							:class="icon(`${item.icon} ph-fw`)"
 						></i>
 						<span :style="item.textStyle || ''">{{
 							item.text
 						}}</span>
 						<span class="caret"
-							><i
-								class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"
-							></i
+							><i :class="icon('ph-caret-right ph-fw')"></i
 						></span>
 					</button>
 					<button
@@ -162,8 +158,7 @@
 					>
 						<i
 							v-if="item.icon"
-							class="ph-fw ph-lg"
-							:class="item.icon"
+							:class="icon(`${item.icon} ph-fw`)"
 						></i>
 						<MkAvatar
 							v-if="item.avatar"
@@ -178,7 +173,7 @@
 							v-if="item.indicate"
 							class="indicator"
 							:class="{
-								animateIndicator: $store.state.animation,
+								animateIndicator: defaultStore.state.animation,
 							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
@@ -190,6 +185,7 @@
 			</div>
 			<div v-if="childMenu" class="child">
 				<XChild
+					v-if="childTarget && itemsEl"
 					ref="child"
 					:items="childMenu"
 					:target-element="childTarget"
@@ -221,6 +217,8 @@ import type {
 } from "@/types/menu";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
 const focusTrap = ref();
diff --git a/packages/client/src/components/MkModPlayer.vue b/packages/client/src/components/MkModPlayer.vue
index aa31c27a8..08bfa69b8 100644
--- a/packages/client/src/components/MkModPlayer.vue
+++ b/packages/client/src/components/MkModPlayer.vue
@@ -5,10 +5,7 @@
 	</div>
 	<div class="mod-player-disabled" v-else-if="hide" @click="toggleVisible()">
 		<div>
-			<b
-				><i class="ph-warning ph-bold ph-lg"></i>
-				{{ i18n.ts.sensitive }}</b
-			>
+			<b><i class="ph-warning"></i> {{ i18n.ts.sensitive }}</b>
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
@@ -40,16 +37,16 @@
 		</div>
 		<div class="controls">
 			<button class="play" @click="playPause()" v-if="!loading">
-				<i class="ph-pause ph-fill ph-lg" v-if="playing"></i>
-				<i class="ph-play ph-fill ph-lg" v-else></i>
+				<i class="ph-pause ph-fill" v-if="playing"></i>
+				<i class="ph-play ph-fill" v-else></i>
 			</button>
 			<MkLoading v-else :em="true" />
 			<button class="stop" @click="stop()">
-				<i class="ph-stop ph-fill ph-lg"></i>
+				<i class="ph-stop ph-fill"></i>
 			</button>
 			<button class="loop" @click="toggleLoop()">
-				<i class="ph-repeat ph-fill ph-lg" v-if="loop === -1"></i>
-				<i class="ph-repeat-once ph-fill ph-lg" v-else></i>
+				<i class="ph-repeat ph-fill" v-if="loop === -1"></i>
+				<i class="ph-repeat-once ph-fill" v-else></i>
 			</button>
 			<FormRange
 				class="progress"
@@ -64,8 +61,8 @@
 				@update:modelValue="performSeek()"
 			></FormRange>
 			<button class="mute" @click="toggleMute()">
-				<i class="ph-speaker-simple-x ph-fill ph-lg" v-if="muted"></i>
-				<i class="ph-speaker-simple-high ph-fill ph-lg" v-else></i>
+				<i class="ph-speaker-simple-x ph-fill" v-if="muted"></i>
+				<i class="ph-speaker-simple-high ph-fill" v-else></i>
 			</button>
 			<FormRange
 				class="volume"
@@ -84,7 +81,7 @@
 				:href="module.url"
 				target="_blank"
 			>
-				<i class="ph-download-simple ph-fill ph-lg"></i>
+				<i class="ph-download-simple ph-fill"></i>
 			</a>
 		</div>
 		<div class="buttons">
@@ -94,7 +91,7 @@
 				class="_button"
 				@click.stop="captionPopup"
 			>
-				<i class="ph-subtitles ph-bold ph-lg"></i>
+				<i class="ph-subtitles"></i>
 			</button>
 			<button
 				v-if="!hide"
@@ -102,7 +99,7 @@
 				class="_button"
 				@click.stop="toggleVisible()"
 			>
-				<i class="ph-eye-slash ph-bold ph-lg"></i>
+				<i class="ph-eye-slash"></i>
 			</button>
 		</div>
 	</div>
@@ -116,6 +113,7 @@ import { i18n } from "@/i18n";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { ChiptuneJsPlayer, ChiptuneJsConfig } from "@/scripts/chiptune2";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	module: firefish.entities.DriveFile;
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index e745499dd..bcf763e3a 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -15,14 +15,14 @@
 					class="_button"
 					@click="back()"
 				>
-					<i class="ph-caret-left ph-bold ph-lg"></i>
+					<i :class="icon('ph-caret-left')"></i>
 				</button>
 				<span v-else style="display: inline-block; width: 20px"></span>
 				<span v-if="pageMetadata?.value" class="title">
 					<i
 						v-if="pageMetadata?.value.icon"
 						class="icon"
-						:class="pageMetadata?.value.icon"
+						:class="icon(pageMetadata?.value.icon)"
 					></i>
 					<span>{{ pageMetadata?.value.title }}</span>
 				</span>
@@ -31,7 +31,7 @@
 					:aria-label="i18n.t('close')"
 					@click="$refs.modal.close()"
 				>
-					<i class="ph-x ph-bold ph-lg"></i>
+					<i :class="icon('ph-x')"></i>
 				</button>
 			</div>
 			<div class="body">
@@ -64,6 +64,8 @@ import { i18n } from "@/i18n";
 import type { PageMetadata } from "@/scripts/page-metadata";
 import { provideMetadataReceiver } from "@/scripts/page-metadata";
 import { Router } from "@/nirax";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	initialPath: string;
@@ -101,18 +103,18 @@ const contextmenu = computed(() => {
 			text: path.value,
 		},
 		{
-			icon: "ph-arrows-out-simple ph-bold ph-lg",
+			icon: `${icon("ph-arrows-out-simple")}`,
 			text: i18n.ts.showInPage,
 			action: expand,
 		},
 		{
-			icon: "ph-arrow-square-out ph-bold ph-lg",
+			icon: `${icon("ph-arrow-square-out")}`,
 			text: i18n.ts.popout,
 			action: popout,
 		},
 		null,
 		{
-			icon: "ph-arrow-square-out ph-bold ph-lg",
+			icon: `${icon("ph-arrow-square-out")}`,
 			text: i18n.ts.openInNewTab,
 			action: () => {
 				window.open(pageUrl.value, "_blank");
@@ -120,7 +122,7 @@ const contextmenu = computed(() => {
 			},
 		},
 		{
-			icon: "ph-link-simple ph-bold ph-lg",
+			icon: `${icon("ph-link-simple")}`,
 			text: i18n.ts.copyLink,
 			action: () => {
 				copyToClipboard(pageUrl.value);
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 6e5a321ae..1a2b3db85 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -30,7 +30,7 @@
 						class="_button"
 						@click="$emit('close')"
 					>
-						<i class="ph-x ph-bold ph-lg"></i>
+						<i :class="icon('ph-x')"></i>
 					</button>
 					<span class="title">
 						<slot name="header"></slot>
@@ -41,7 +41,7 @@
 						class="_button"
 						@click="$emit('close')"
 					>
-						<i class="ph-x ph-bold ph-lg"></i>
+						<i :class="icon('ph-x')"></i>
 					</button>
 					<button
 						v-if="props.withOkButton"
@@ -50,7 +50,7 @@
 						:disabled="props.okButtonDisabled"
 						@click="$emit('ok')"
 					>
-						<i class="ph-check ph-bold ph-lg"></i>
+						<i :class="icon('ph-check')"></i>
 					</button>
 				</div>
 				<div class="body">
@@ -67,6 +67,7 @@ import { shallowRef } from "vue";
 import { FocusTrap } from "focus-trap-vue";
 import MkModal from "./MkModal.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkMoved.vue b/packages/client/src/components/MkMoved.vue
index b2f8095a2..abb2d14ab 100644
--- a/packages/client/src/components/MkMoved.vue
+++ b/packages/client/src/components/MkMoved.vue
@@ -1,9 +1,6 @@
 <template>
 	<div class="msjugskd _block">
-		<i
-			class="ph-airplane-takeoff ph-bold ph-lg"
-			style="margin-right: 8px"
-		/>
+		<i :class="icon('ph-airplane-takeoff')" style="margin-right: 8px" />
 		{{ i18n.ts.accountMoved }}
 		<MkMention class="link" :username="acct" :host="host" />
 	</div>
@@ -12,6 +9,7 @@
 <script lang="ts" setup>
 import MkMention from "./MkMention.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 defineProps<{
 	acct: string;
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index be5144dc5..7463d32f9 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -27,23 +27,22 @@
 		>
 			<div class="line"></div>
 			<div v-if="appearNote._prId_" class="info">
-				<i class="ph-megaphone-simple-bold ph-lg"></i>
+				<i :class="icon('ph-megaphone-simple-bold')"></i>
 				{{ i18n.ts.promotion
 				}}<button class="_textButton hide" @click.stop="readPromo()">
 					{{ i18n.ts.hideThisNote }}
-					<i class="ph-x ph-bold ph-lg"></i>
+					<i :class="icon('ph-x')"></i>
 				</button>
 			</div>
 			<div v-if="appearNote._featuredId_" class="info">
-				<i class="ph-lightning ph-bold ph-lg"></i>
+				<i :class="icon('ph-lightning')"></i>
 				{{ i18n.ts.featured }}
 			</div>
 			<div v-if="pinned" class="info">
-				<i class="ph-push-pin ph-bold ph-lg"></i
-				>{{ i18n.ts.pinnedNote }}
+				<i :class="icon('ph-push-pin')"></i>{{ i18n.ts.pinnedNote }}
 			</div>
 			<div v-if="isRenote" class="renote">
-				<i class="ph-rocket-launch ph-bold ph-lg"></i>
+				<i :class="icon('ph-rocket-launch')"></i>
 				<I18n :src="i18n.ts.renotedBy" tag="span">
 					<template #user>
 						<MkA
@@ -64,7 +63,7 @@
 					>
 						<i
 							v-if="isMyRenote"
-							class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
+							:class="icon('ph-dots-three-outline dropdownIcon')"
 						></i>
 						<MkTime :time="note.createdAt" />
 					</button>
@@ -149,7 +148,7 @@
 						class="channel"
 						:to="`/channels/${appearNote.channel.id}`"
 						@click.stop
-						><i class="ph-television ph-bold"></i>
+						><i :class="icon('ph-television', false)"></i>
 						{{ appearNote.channel.name }}</MkA
 					>
 				</div>
@@ -164,7 +163,7 @@
 						class="button _button"
 						@click.stop="reply()"
 					>
-						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+						<i :class="icon('ph-arrow-u-up-left')"></i>
 						<template
 							v-if="appearNote.repliesCount > 0 && !detailedView"
 						>
@@ -209,7 +208,7 @@
 						class="button _button"
 						@click.stop="react()"
 					>
-						<i class="ph-smiley ph-bold ph-lg"></i>
+						<i :class="icon('ph-smiley')"></i>
 					</button>
 					<button
 						v-if="
@@ -221,7 +220,7 @@
 						class="button _button reacted"
 						@click.stop="undoReact(appearNote)"
 					>
-						<i class="ph-minus ph-bold ph-lg"></i>
+						<i :class="icon('ph-minus')"></i>
 					</button>
 					<XQuoteButton class="button" :note="appearNote" />
 					<button
@@ -234,7 +233,7 @@
 						class="button _button"
 						@click.stop="translate"
 					>
-						<i class="ph-translate ph-bold ph-lg"></i>
+						<i :class="icon('ph-translate')"></i>
 					</button>
 					<button
 						ref="menuButton"
@@ -242,7 +241,7 @@
 						class="button _button"
 						@click.stop="menu()"
 					>
-						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+						<i :class="icon('ph-dots-three-outline')"></i>
 					</button>
 				</footer>
 			</div>
@@ -302,6 +301,7 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
 import { notePage } from "@/filters/note";
 import { deepClone } from "@/scripts/clone";
 import { getNoteSummary } from "@/scripts/get-note-summary";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -494,7 +494,7 @@ function onContextmenu(ev: MouseEvent): void {
 					text: notePage(appearNote.value),
 				},
 				{
-					icon: "ph-browser ph-bold ph-lg",
+					icon: `${icon("ph-browser")}`,
 					text: i18n.ts.openInWindow,
 					action: () => {
 						os.pageWindow(notePage(appearNote.value));
@@ -502,7 +502,7 @@ function onContextmenu(ev: MouseEvent): void {
 				},
 				notePage(appearNote.value) != location.pathname
 					? {
-							icon: "ph-arrows-out-simple ph-bold ph-lg",
+							icon: `${icon("ph-arrows-out-simple")}`,
 							text: i18n.ts.showInPage,
 							action: () => {
 								router.push(
@@ -515,13 +515,13 @@ function onContextmenu(ev: MouseEvent): void {
 				null,
 				{
 					type: "a",
-					icon: "ph-arrow-square-out ph-bold ph-lg",
+					icon: `${icon("ph-arrow-square-out")}`,
 					text: i18n.ts.openInNewTab,
 					href: notePage(appearNote.value),
 					target: "_blank",
 				},
 				{
-					icon: "ph-link-simple ph-bold ph-lg",
+					icon: `${icon("ph-link-simple")}`,
 					text: i18n.ts.copyLink,
 					action: () => {
 						copyToClipboard(`${url}${notePage(appearNote.value)}`);
@@ -530,7 +530,7 @@ function onContextmenu(ev: MouseEvent): void {
 				appearNote.value.user.host != null
 					? {
 							type: "a",
-							icon: "ph-arrow-square-up-right ph-bold ph-lg",
+							icon: `${icon("ph-arrow-square-up-right")}`,
 							text: i18n.ts.showOnRemote,
 							href:
 								appearNote.value.url ??
@@ -568,7 +568,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 		[
 			{
 				text: i18n.ts.unrenote,
-				icon: "ph-trash ph-bold ph-lg",
+				icon: `${icon("ph-trash")}`,
 				danger: true,
 				action: () => {
 					os.api("notes/delete", {
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 023121e43..5e0770e15 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -35,7 +35,7 @@
 
 		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
 			<option value="replies">
-				<!-- <i class="ph-arrow-u-up-left ph-bold ph-lg"></i> -->
+				<!-- <i :class="icon('ph-arrow-u-up-left')"></i> -->
 				{{
 					wordWithCount(
 						note.repliesCount,
@@ -45,7 +45,7 @@
 				}}
 			</option>
 			<option v-if="note.renoteCount > 0" value="renotes">
-				<!-- <i class="ph-rocket-launch ph-bold ph-lg"></i> -->
+				<!-- <i :class="icon('ph-rocket-launch')"></i> -->
 				{{
 					wordWithCount(
 						note.renoteCount,
@@ -55,7 +55,7 @@
 				}}
 			</option>
 			<option v-if="reactionsCount > 0" value="reactions">
-				<!-- <i class="ph-smiley ph-bold ph-lg"></i> -->
+				<!-- <i :class="icon('ph-smiley')"></i> -->
 				{{
 					wordWithCount(
 						reactionsCount,
@@ -65,7 +65,7 @@
 				}}
 			</option>
 			<option v-if="directQuotes?.length > 0" value="quotes">
-				<!-- <i class="ph-quotes ph-bold ph-lg"></i> -->
+				<!-- <i :class="icon('ph-quotes')"></i> -->
 				{{
 					wordWithCount(
 						directQuotes.length,
@@ -75,7 +75,7 @@
 				}}
 			</option>
 			<option v-if="clips?.length > 0" value="clips">
-				<!-- <i class="ph-paperclip ph-bold ph-lg"></i> -->
+				<!-- <i :class="icon('ph-paperclip')"></i> -->
 				{{ wordWithCount(clips.length, i18n.ts.clip, i18n.ts.clips) }}
 			</option>
 		</MkTab>
@@ -188,6 +188,7 @@ import { getNoteMenu } from "@/scripts/get-note-menu";
 import { useNoteCapture } from "@/scripts/use-note-capture";
 import { deepClone } from "@/scripts/clone";
 import { stream } from "@/stream";
+// import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: firefish.entities.Note;
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 48826c9a9..5f580faad 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -30,7 +30,7 @@
 									).toLocaleTimeString(),
 								})
 							"
-							class="ph-pencil ph-bold"
+							:class="icon('ph-pencil', false)"
 							style="margin-left: 0.4rem"
 						></i>
 					</MkA>
@@ -58,6 +58,7 @@ import { notePage } from "@/filters/note";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
 import { pageWindow } from "@/os";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: firefish.entities.Note;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 6aa6aceb8..535320079 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -67,7 +67,7 @@
 						class="button _button"
 						@click.stop="reply()"
 					>
-						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+						<i :class="icon('ph-arrow-u-up-left')"></i>
 						<template v-if="appearNote.repliesCount > 0">
 							<p class="count">{{ appearNote.repliesCount }}</p>
 						</template>
@@ -109,7 +109,7 @@
 						class="button _button"
 						@click.stop="react()"
 					>
-						<i class="ph-smiley ph-bold ph-lg"></i>
+						<i :class="icon('ph-smiley')"></i>
 					</button>
 					<button
 						v-if="
@@ -121,7 +121,7 @@
 						class="button _button reacted"
 						@click.stop="undoReact(appearNote)"
 					>
-						<i class="ph-minus ph-bold ph-lg"></i>
+						<i :class="icon('ph-minus')"></i>
 					</button>
 					<XQuoteButton class="button" :note="appearNote" />
 					<button
@@ -134,7 +134,7 @@
 						class="button _button"
 						@click.stop="translate"
 					>
-						<i class="ph-translate ph-bold ph-lg"></i>
+						<i :class="icon('ph-translate')"></i>
 					</button>
 					<button
 						ref="menuButton"
@@ -142,7 +142,7 @@
 						class="button _button"
 						@click.stop="menu()"
 					>
-						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+						<i :class="icon('ph-dots-three-outline')"></i>
 					</button>
 				</footer>
 			</div>
@@ -165,7 +165,7 @@
 				<div class="line"></div>
 				<MkA class="text _link" :to="notePage(note)"
 					>{{ i18n.ts.continueThread }}
-					<i class="ph-caret-double-right ph-bold ph-lg"></i
+					<i :class="icon('ph-caret-double-right')"></i
 				></MkA>
 			</div>
 		</template>
@@ -192,7 +192,6 @@
 import { computed, inject, ref } from "vue";
 import type { Ref } from "vue";
 import type * as firefish from "firefish-js";
-import * as mfm from "mfm-js";
 import XNoteHeader from "@/components/MkNoteHeader.vue";
 import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
 import XReactionsViewer from "@/components/MkReactionsViewer.vue";
@@ -216,6 +215,7 @@ import { i18n } from "@/i18n";
 import { useNoteCapture } from "@/scripts/use-note-capture";
 import { defaultStore } from "@/store";
 import { deepClone } from "@/scripts/clone";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -412,7 +412,7 @@ function onContextmenu(ev: MouseEvent): void {
 					text: notePage(appearNote.value),
 				},
 				{
-					icon: "ph-browser ph-bold ph-lg",
+					icon: `${icon("ph-browser")}`,
 					text: i18n.ts.openInWindow,
 					action: () => {
 						os.pageWindow(notePage(appearNote.value));
@@ -420,7 +420,7 @@ function onContextmenu(ev: MouseEvent): void {
 				},
 				notePage(appearNote.value) != location.pathname
 					? {
-							icon: "ph-arrows-out-simple ph-bold ph-lg",
+							icon: `${icon("ph-arrows-out-simple")}`,
 							text: i18n.ts.showInPage,
 							action: () => {
 								router.push(
@@ -433,13 +433,13 @@ function onContextmenu(ev: MouseEvent): void {
 				null,
 				{
 					type: "a",
-					icon: "ph-arrow-square-out ph-bold ph-lg",
+					icon: `${icon("ph-arrow-square-out")}`,
 					text: i18n.ts.openInNewTab,
 					href: notePage(appearNote.value),
 					target: "_blank",
 				},
 				{
-					icon: "ph-link-simple ph-bold ph-lg",
+					icon: `${icon("ph-link-simple")}`,
 					text: i18n.ts.copyLink,
 					action: () => {
 						copyToClipboard(`${url}${notePage(appearNote.value)}`);
@@ -448,7 +448,7 @@ function onContextmenu(ev: MouseEvent): void {
 				note.value.user.host != null
 					? {
 							type: "a",
-							icon: "ph-arrow-square-up-right ph-bold ph-lg",
+							icon: `${icon("ph-arrow-square-up-right")}`,
 							text: i18n.ts.showOnRemote,
 							href: note.value.url ?? note.value.uri ?? "",
 							target: "_blank",
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index fb6e7e059..b6541f84a 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -25,43 +25,43 @@
 			<div class="sub-icon" :class="notification.type">
 				<i
 					v-if="notification.type === 'follow'"
-					class="ph-hand-waving ph-bold"
+					:class="icon('ph-hand-waving', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'receiveFollowRequest'"
-					class="ph-clock ph-bold"
+					:class="icon('ph-clock', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'followRequestAccepted'"
-					class="ph-check ph-bold"
+					:class="icon('ph-check', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'groupInvited'"
-					class="ph-identification-card ph-bold"
+					:class="icon('ph-identification-card', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'renote'"
-					class="ph-rocket-launch ph-bold"
+					:class="icon('ph-rocket-launch', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'reply'"
-					class="ph-arrow-bend-up-left ph-bold"
+					:class="icon('ph-arrow-bend-up-left', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'mention'"
-					class="ph-at ph-bold"
+					:class="icon('ph-at', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'quote'"
-					class="ph-quotes ph-bold"
+					:class="icon('ph-quotes', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'pollVote'"
-					class="ph-microphone-stage ph-bold"
+					:class="icon('ph-microphone-stage', false)"
 				></i>
 				<i
 					v-else-if="notification.type === 'pollEnded'"
-					class="ph-microphone-stage ph-bold"
+					:class="icon('ph-microphone-stage', false)"
 				></i>
 				<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 				<XReactionIcon
@@ -122,7 +122,7 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
+				<i class="ph-quotes ph-fill"></i>
 			</MkA>
 			<MkA
 				v-if="notification.type === 'renote'"
@@ -138,7 +138,7 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.renote.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
+				<i class="ph-quotes ph-fill"></i>
 			</MkA>
 			<MkA
 				v-if="notification.type === 'reply'"
@@ -193,7 +193,7 @@
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
+				<i class="ph-quotes ph-fill"></i>
 			</MkA>
 			<MkA
 				v-if="notification.type === 'pollEnded'"
@@ -201,14 +201,14 @@
 				:to="notePage(notification.note)"
 				:title="getNoteSummary(notification.note)"
 			>
-				<i class="ph-quotes ph-fill ph-lg"></i>
+				<i class="ph-quotes ph-fill"></i>
 				<Mfm
 					:text="getNoteSummary(notification.note)"
 					:plain="true"
 					:nowrap="!full"
 					:custom-emojis="notification.note.emojis"
 				/>
-				<i class="ph-quotes ph-fill ph-lg"></i>
+				<i class="ph-quotes ph-fill"></i>
 			</MkA>
 			<span
 				v-if="notification.type === 'follow'"
@@ -287,6 +287,7 @@ import { stream } from "@/stream";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { defaultStore } from "@/store";
 import { instance } from "@/instance";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index 491595e23..c5ca37d36 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="mk-notification-toast" :style="{ zIndex }">
 		<transition
-			:name="$store.state.animation ? 'notification-toast' : ''"
+			:name="defaultStore.state.animation ? 'notification-toast' : ''"
 			appear
 			@after-leave="$emit('closed')"
 		>
@@ -18,6 +18,7 @@
 import { onMounted, ref } from "vue";
 import XNotification from "@/components/MkNotification.vue";
 import * as os from "@/os";
+import { defaultStore } from "@/store";
 
 defineProps<{
 	notification: any; // TODO
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index 47c9db522..9739c5e42 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -42,6 +42,7 @@ import { Router } from "@/nirax";
 import { i18n } from "@/i18n";
 import type { PageMetadata } from "@/scripts/page-metadata";
 import { provideMetadataReceiver } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	initialPath: string;
@@ -66,7 +67,7 @@ const buttonsLeft = computed(() => {
 
 	if (history.value.length > 1) {
 		buttons.push({
-			icon: "ph-caret-left ph-bold ph-lg",
+			icon: `${icon("ph-caret-left")}`,
 			onClick: back,
 		});
 	}
@@ -76,7 +77,7 @@ const buttonsLeft = computed(() => {
 const buttonsRight = computed(() => {
 	const buttons = [
 		{
-			icon: "ph-arrows-out-simple ph-bold ph-lg",
+			icon: `${icon("ph-arrows-out-simple")}`,
 			title: i18n.ts.showInPage,
 			onClick: expand,
 		},
@@ -99,17 +100,17 @@ provide("shouldHeaderThin", true);
 
 const contextmenu = computed(() => [
 	{
-		icon: "ph-arrows-out-simple ph-bold ph-lg",
+		icon: `${icon("ph-arrows-out-simple")}`,
 		text: i18n.ts.showInPage,
 		action: expand,
 	},
 	{
-		icon: "ph-arrow-square-out ph-bold ph-lg",
+		icon: `${icon("ph-arrow-square-out")}`,
 		text: i18n.ts.popout,
 		action: popout,
 	},
 	{
-		icon: "ph-arrow-square-out ph-bold ph-lg",
+		icon: `${icon("ph-arrow-square-out")}`,
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(url + router.getCurrentPath(), "_blank");
@@ -117,7 +118,7 @@ const contextmenu = computed(() => [
 		},
 	},
 	{
-		icon: "ph-link-simple ph-bold ph-lg",
+		icon: `${icon("ph-link-simple")}`,
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(url + router.getCurrentPath());
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index dfe674a2c..f06e8a11d 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -1,5 +1,8 @@
 <template>
-	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+	<transition
+		:name="defaultStore.state.animation ? 'fade' : ''"
+		mode="out-in"
+	>
 		<MkLoading v-if="fetching" />
 
 		<MkError v-else-if="error" @retry="init()" />
@@ -44,7 +47,8 @@
 				<MkButton
 					v-if="!moreFetching"
 					v-appear="
-						$store.state.enableInfiniteScroll && !disableAutoLoad
+						defaultStore.state.enableInfiniteScroll &&
+						!disableAutoLoad
 							? fetchMore
 							: null
 					"
@@ -75,6 +79,7 @@ import {
 } from "@/scripts/scroll";
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 export interface Paging<
 	E extends keyof firefish.Endpoints = keyof firefish.Endpoints,
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index b73c615da..21540ba45 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -17,7 +17,7 @@
 				></div>
 				<span>
 					<template v-if="choice.isVoted"
-						><i class="ph-check ph-bold ph-lg"></i
+						><i :class="icon('ph-check')"></i
 					></template>
 					<Mfm
 						:text="choice.text"
@@ -59,6 +59,7 @@ import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { useInterval } from "@/scripts/use-interval";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: firefish.entities.Note;
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index 51d0a80d3..d6dcd75b3 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="zmdxowus">
 		<p v-if="choices.length < 2" class="caution">
-			<i class="ph-warning ph-bold ph-lg"></i
+			<i :class="icon('ph-warning')"></i
 			>{{ i18n.ts._poll.noOnlyOneChoice }}
 		</p>
 		<ul>
@@ -19,7 +19,7 @@
 					:aria-label="i18n.t('remove')"
 					@click="remove(i)"
 				>
-					<i class="ph-x ph-bold ph-lg"></i>
+					<i :class="icon('ph-x')"></i>
 				</button>
 			</li>
 		</ul>
@@ -83,6 +83,7 @@ import MkButton from "./MkButton.vue";
 import { formatDateTimeString } from "@/scripts/format-time-string";
 import { addTime } from "@/scripts/time";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	modelValue: {
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index b71dac698..fabf44411 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -11,7 +11,7 @@
 	>
 		<header>
 			<button v-if="!fixed" class="cancel _button" @click="cancel">
-				<i class="ph-x ph-bold ph-lg" :aria-label="i18n.t('close')"></i>
+				<i :class="icon('ph-x')" :aria-label="i18n.t('close')"></i>
 			</button>
 			<button
 				v-if="$props.editId == null"
@@ -29,7 +29,7 @@
 					>{{ maxTextLength - textLength }}</span
 				>
 				<span v-if="localOnly" class="local-only"
-					><i class="ph-users ph-bold ph-lg"></i
+					><i :class="icon('ph-users')"></i
 				></span>
 				<button
 					ref="visibilityButton"
@@ -39,16 +39,16 @@
 					@click="setVisibility"
 				>
 					<span v-if="visibility === 'public'"
-						><i class="ph-planet ph-bold ph-lg"></i
+						><i :class="icon('ph-planet')"></i
 					></span>
 					<span v-if="visibility === 'home'"
-						><i class="ph-house ph-bold ph-lg"></i
+						><i :class="icon('ph-house')"></i
 					></span>
 					<span v-if="visibility === 'followers'"
-						><i class="ph-lock ph-bold ph-lg"></i
+						><i :class="icon('ph-lock')"></i
 					></span>
 					<span v-if="visibility === 'specified'"
-						><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+						><i :class="icon('ph-envelope-simple-open')"></i
 					></span>
 				</button>
 				<button
@@ -57,7 +57,7 @@
 					:class="{ active: showPreview }"
 					@click="showPreview = !showPreview"
 				>
-					<i class="ph-binoculars ph-bold ph-lg"></i>
+					<i :class="icon('ph-binoculars')"></i>
 				</button>
 				<button
 					class="submit _buttonGradate"
@@ -68,11 +68,13 @@
 					{{ submitText
 					}}<i
 						:class="
-							reply
-								? 'ph-arrow-u-up-left ph-bold ph-lg'
-								: renote
-								? 'ph-quotes ph-bold ph-lg'
-								: 'ph-paper-plane-tilt ph-bold ph-lg'
+							icon(
+								reply
+									? 'ph-arrow-u-up-left'
+									: renote
+									? 'ph-quotes'
+									: 'ph-paper-plane-tilt',
+							)
 						"
 					></i>
 				</button>
@@ -82,14 +84,14 @@
 			<XNoteSimple v-if="reply" class="preview" :note="reply" />
 			<XNoteSimple v-if="renote" class="preview" :note="renote" />
 			<div v-if="quoteId" class="with-quote">
-				<i class="ph-quotes ph-bold ph-lg"></i>
+				<i :class="icon('ph-quotes')"></i>
 				{{ i18n.ts.quoteAttached
 				}}<button
 					class="_button"
 					:aria-label="i18n.t('removeQuote')"
 					@click="quoteId = null"
 				>
-					<i class="ph-x ph-bold ph-lg"></i>
+					<i :class="icon('ph-x')"></i>
 				</button>
 			</div>
 			<div v-if="visibility === 'specified'" class="to-specified">
@@ -102,11 +104,11 @@
 							:aria-label="i18n.t('removeRecipient')"
 							@click="removeVisibleUser(u)"
 						>
-							<i class="ph-x ph-bold ph-lg"></i>
+							<i :class="icon('ph-x')"></i>
 						</button>
 					</span>
 					<button class="_button" @click="addVisibleUser">
-						<i class="ph-plus ph-bold ph-md ph-fw ph-lg"></i>
+						<i :class="icon('ph-plus ph-md ph-fw')"></i>
 					</button>
 				</div>
 			</div>
@@ -164,7 +166,7 @@
 					class="_button"
 					@click="chooseFileFrom"
 				>
-					<i class="ph-upload ph-bold ph-lg"></i>
+					<i :class="icon('ph-upload')"></i>
 				</button>
 				<button
 					v-tooltip="i18n.ts.poll"
@@ -172,7 +174,7 @@
 					:class="{ active: poll }"
 					@click="togglePoll"
 				>
-					<i class="ph-microphone-stage ph-bold ph-lg"></i>
+					<i :class="icon('ph-microphone-stage')"></i>
 				</button>
 				<button
 					v-tooltip="i18n.ts.useCw"
@@ -180,14 +182,14 @@
 					:class="{ active: useCw }"
 					@click="useCw = !useCw"
 				>
-					<i class="ph-eye-slash ph-bold ph-lg"></i>
+					<i :class="icon('ph-eye-slash')"></i>
 				</button>
 				<button
 					v-tooltip="i18n.ts.mention"
 					class="_button"
 					@click="insertMention"
 				>
-					<i class="ph-at ph-bold ph-lg"></i>
+					<i :class="icon('ph-at')"></i>
 				</button>
 				<button
 					v-tooltip="i18n.ts.hashtags"
@@ -195,14 +197,14 @@
 					:class="{ active: withHashtags }"
 					@click="withHashtags = !withHashtags"
 				>
-					<i class="ph-hash ph-bold ph-lg"></i>
+					<i :class="icon('ph-hash')"></i>
 				</button>
 				<button
 					v-tooltip="i18n.ts.emoji"
 					class="_button"
 					@click="insertEmoji"
 				>
-					<i class="ph-smiley ph-bold ph-lg"></i>
+					<i :class="icon('ph-smiley')"></i>
 				</button>
 				<button
 					v-if="postFormActions.length > 0"
@@ -210,7 +212,7 @@
 					class="_button"
 					@click="showActions"
 				>
-					<i class="ph-plug ph-bold ph-lg"></i>
+					<i :class="icon('ph-plug')"></i>
 				</button>
 				<!--	v-if="showMfmCheatsheet" -->
 				<button
@@ -218,7 +220,7 @@
 					class="_button right"
 					@click="openCheatSheet"
 				>
-					<i class="ph-question ph-bold ph-lg"></i>
+					<i :class="icon('ph-question')"></i>
 				</button>
 			</footer>
 			<datalist id="hashtags">
@@ -276,6 +278,7 @@ import { deepClone } from "@/scripts/clone";
 import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
 import preprocess from "@/scripts/preprocess";
 import { vibrate } from "@/scripts/vibrate";
+import icon from "@/scripts/icon";
 
 const modal = inject("modal");
 
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index d6262f641..8e6e41a27 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -21,7 +21,7 @@
 					fit="cover"
 				/>
 				<div v-if="element.isSensitive" class="sensitive">
-					<i class="ph-warning ph-bold ph-lg icon"></i>
+					<i :class="icon('ph-warning icon')"></i>
 				</div>
 			</div>
 		</VueDraggable>
@@ -30,11 +30,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from "vue";
+import { computed, defineAsyncComponent } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps({
 	files: {
@@ -124,7 +126,7 @@ function showFileMenu(file, ev: MouseEvent) {
 		[
 			{
 				text: i18n.ts.renameFile,
-				icon: "ph-cursor-text ph-bold ph-lg",
+				icon: `${icon("ph-cursor-text")}`,
 				action: () => {
 					rename(file);
 				},
@@ -133,23 +135,21 @@ function showFileMenu(file, ev: MouseEvent) {
 				text: file.isSensitive
 					? i18n.ts.unmarkAsSensitive
 					: i18n.ts.markAsSensitive,
-				icon: file.isSensitive
-					? "ph-eye ph-bold ph-lg"
-					: "ph-eye-slash ph-bold ph-lg",
+				icon: file.isSensitive ? "ph-eye ph-lg" : "ph-eye-slash ph-lg",
 				action: () => {
 					toggleSensitive(file);
 				},
 			},
 			{
 				text: i18n.ts.describeFile,
-				icon: "ph-subtitles ph-bold ph-lg",
+				icon: `${icon("ph-subtitles")}`,
 				action: () => {
 					describe(file);
 				},
 			},
 			{
 				text: i18n.ts.attachCancel,
-				icon: "ph-x ph-bold ph-lg",
+				icon: `${icon("ph-x")}`,
 				action: () => {
 					detachMedia(file.id);
 				},
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
index 21dd268c5..3832a13d3 100644
--- a/packages/client/src/components/MkQuoteButton.vue
+++ b/packages/client/src/components/MkQuoteButton.vue
@@ -1,11 +1,11 @@
 <template>
 	<button
-		v-if="canRenote && $store.state.seperateRenoteQuote"
+		v-if="canRenote && defaultStore.state.seperateRenoteQuote"
 		v-tooltip.noDelay.bottom="i18n.ts.quote"
 		class="eddddedb _button"
 		@click.stop="quote()"
 	>
-		<i class="ph-quotes ph-bold ph-lg"></i>
+		<i :class="icon('ph-quotes')"></i>
 	</button>
 </template>
 
@@ -16,6 +16,8 @@ import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: Note;
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 68f89d166..90ecb3217 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -7,7 +7,7 @@
 		:class="{ renoted: hasRenotedBefore }"
 		@click.stop="renote(false, $event)"
 	>
-		<i class="ph-rocket-launch ph-bold ph-lg"></i>
+		<i :class="icon('ph-rocket-launch')"></i>
 		<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>
 	</button>
 	<button
@@ -16,7 +16,7 @@
 		class="_button"
 		disabled="true"
 	>
-		<i class="ph-rocket-launch ph-bold ph-lg"></i>
+		<i :class="icon('ph-rocket-launch')"></i>
 	</button>
 </template>
 
@@ -33,6 +33,7 @@ import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 import type { MenuItem } from "@/types/menu";
 import { vibrate } from "@/scripts/vibrate";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: firefish.entities.Note;
@@ -88,7 +89,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	if (props.note.visibility === "public") {
 		buttonActions.push({
 			text: i18n.ts.renote,
-			icon: "ph-rocket-launch ph-bold ph-lg",
+			icon: `${icon("ph-rocket-launch")}`,
 			danger: false,
 			action: () => {
 				os.api("notes/create", {
@@ -115,7 +116,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	if (["public", "home"].includes(props.note.visibility)) {
 		buttonActions.push({
 			text: `${i18n.ts.renote} (${i18n.ts._visibility.home})`,
-			icon: "ph-house ph-bold ph-lg",
+			icon: `${icon("ph-house")}`,
 			danger: false,
 			action: () => {
 				os.api("notes/create", {
@@ -142,7 +143,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	if (props.note.visibility === "specified") {
 		buttonActions.push({
 			text: `${i18n.ts.renote} (${i18n.ts.recipient})`,
-			icon: "ph-envelope-simple-open ph-bold ph-lg",
+			icon: `${icon("ph-envelope-simple-open")}`,
 			danger: false,
 			action: () => {
 				os.api("notes/create", {
@@ -168,7 +169,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	} else {
 		buttonActions.push({
 			text: `${i18n.ts.renote} (${i18n.ts._visibility.followers})`,
-			icon: "ph-lock ph-bold ph-lg",
+			icon: `${icon("ph-lock")}`,
 			danger: false,
 			action: () => {
 				os.api("notes/create", {
@@ -195,7 +196,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	if (canRenote.value) {
 		buttonActions.push({
 			text: `${i18n.ts.renote} (${i18n.ts.local})`,
-			icon: "ph-users ph-bold ph-lg",
+			icon: `${icon("ph-users")}`,
 			danger: false,
 			action: () => {
 				vibrate([30, 30, 60]);
@@ -234,7 +235,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	if (!defaultStore.state.seperateRenoteQuote) {
 		buttonActions.push({
 			text: i18n.ts.quote,
-			icon: "ph-quotes ph-bold ph-lg",
+			icon: `${icon("ph-quotes")}`,
 			danger: false,
 			action: () => {
 				os.post({
@@ -247,7 +248,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	if (hasRenotedBefore.value) {
 		buttonActions.push({
 			text: i18n.ts.unrenote,
-			icon: "ph-trash ph-bold ph-lg",
+			icon: `${icon("ph-trash")}`,
 			danger: true,
 			action: () => {
 				os.api("notes/unrenote", {
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 2708cc07f..a19d833ed 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -44,7 +44,7 @@
 					data-cy-signin-password
 				>
 					<template #prefix
-						><i class="ph-lock ph-bold ph-lg"></i
+						><i :class="icon('ph-lock')"></i
 					></template>
 					<template #caption
 						><button
@@ -96,7 +96,7 @@
 					>
 						<template #label>{{ i18n.ts.password }}</template>
 						<template #prefix
-							><i class="ph-lock ph-bold ph-lg"></i
+							><i :class="icon('ph-lock')"></i
 						></template>
 					</MkInput>
 					<MkInput
@@ -109,7 +109,7 @@
 					>
 						<template #label>{{ i18n.ts._2fa.token }}</template>
 						<template #prefix
-							><i class="ph-poker-chip ph-bold ph-lg"></i
+							><i :class="icon('ph-poker-chip')"></i
 						></template>
 					</MkInput>
 					<MkButton
@@ -138,6 +138,7 @@ import { byteify, hexify } from "@/scripts/2fa";
 import * as os from "@/os";
 import { login } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const signing = ref(false);
 const user = ref(null);
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index 933a26204..ff41c5a5d 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -23,7 +23,7 @@
 			@update:modelValue="onChangeInvitationCode"
 		>
 			<template #label>{{ i18n.ts.invitationCode }}</template>
-			<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
+			<template #prefix><i :class="icon('ph-key')"></i></template>
 		</MkInput>
 		<div
 			v-if="
@@ -47,51 +47,49 @@
 						v-tooltip:dialog="i18n.ts.usernameInfo"
 						class="_button _help"
 					>
-						<i class="ph-question ph-bold"></i></div
+						<i :class="icon('ph-question', false)"></i></div
 				></template>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 				<template #caption>
 					<span v-if="usernameState === 'wait'" style="color: #6e6a86"
-						><i
-							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
-						></i>
+						><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
 						{{ i18n.ts.checking }}</span
 					>
 					<span
 						v-else-if="usernameState === 'ok'"
 						style="color: var(--success)"
-						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-check ph-fw')"></i>
 						{{ i18n.ts.available }}</span
 					>
 					<span
 						v-else-if="usernameState === 'unavailable'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.unavailable }}</span
 					>
 					<span
 						v-else-if="usernameState === 'error'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.error }}</span
 					>
 					<span
 						v-else-if="usernameState === 'invalid-format'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.usernameInvalidFormat }}</span
 					>
 					<span
 						v-else-if="usernameState === 'min-range'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.tooShort }}</span
 					>
 					<span
 						v-else-if="usernameState === 'max-range'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.tooLong }}</span
 					>
 				</template>
@@ -113,64 +111,62 @@
 						v-tooltip:dialog="i18n.ts._signup.emailAddressInfo"
 						class="_button _help"
 					>
-						<i class="ph-question ph-bold"></i></div
+						<i :class="icon('ph-question', false)"></i></div
 				></template>
 				<template #prefix
-					><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+					><i :class="icon('ph-envelope-simple-open')"></i
 				></template>
 				<template #caption>
 					<span v-if="emailState === 'wait'" style="color: #6e6a86"
-						><i
-							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
-						></i>
+						><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i>
 						{{ i18n.ts.checking }}</span
 					>
 					<span
 						v-else-if="emailState === 'ok'"
 						style="color: var(--success)"
-						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-check ph-fw')"></i>
 						{{ i18n.ts.available }}</span
 					>
 					<span
 						v-else-if="emailState === 'unavailable:used'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts._emailUnavailable.used }}</span
 					>
 					<span
 						v-else-if="emailState === 'unavailable:format'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts._emailUnavailable.format }}</span
 					>
 					<span
 						v-else-if="emailState === 'unavailable:disposable'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts._emailUnavailable.disposable }}</span
 					>
 					<span
 						v-else-if="emailState === 'unavailable:mx'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts._emailUnavailable.mx }}</span
 					>
 					<span
 						v-else-if="emailState === 'unavailable:smtp'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts._emailUnavailable.smtp }}</span
 					>
 					<span
 						v-else-if="emailState === 'unavailable'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.unavailable }}</span
 					>
 					<span
 						v-else-if="emailState === 'error'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.error }}</span
 					>
 				</template>
@@ -185,26 +181,24 @@
 				@update:modelValue="onChangePassword"
 			>
 				<template #label>{{ i18n.ts.password }}</template>
-				<template #prefix
-					><i class="ph-lock ph-bold ph-lg"></i
-				></template>
+				<template #prefix><i :class="icon('ph-lock')"></i></template>
 				<template #caption>
 					<span
 						v-if="passwordStrength == 'low'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.weakPassword }}</span
 					>
 					<span
 						v-if="passwordStrength == 'medium'"
 						style="color: var(--warn)"
-						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-check ph-fw')"></i>
 						{{ i18n.ts.normalPassword }}</span
 					>
 					<span
 						v-if="passwordStrength == 'high'"
 						style="color: var(--success)"
-						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-check ph-fw')"></i>
 						{{ i18n.ts.strongPassword }}</span
 					>
 				</template>
@@ -221,20 +215,18 @@
 				<template #label
 					>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template
 				>
-				<template #prefix
-					><i class="ph-lock ph-bold ph-lg"></i
-				></template>
+				<template #prefix><i :class="icon('ph-lock')"></i></template>
 				<template #caption>
 					<span
 						v-if="passwordRetypeState == 'match'"
 						style="color: var(--success)"
-						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-check ph-fw')"></i>
 						{{ i18n.ts.passwordMatched }}</span
 					>
 					<span
 						v-if="passwordRetypeState == 'not-match'"
 						style="color: var(--error)"
-						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						><i :class="icon('ph-warning ph-fw')"></i>
 						{{ i18n.ts.passwordNotMatched }}</span
 					>
 				</template>
@@ -297,6 +289,7 @@ import * as os from "@/os";
 import { login } from "@/account";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
index f236ae699..b5a276763 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -31,13 +31,13 @@
 		</svg>
 		<i
 			v-else-if="instance.defaultReaction === '👍'"
-			class="ph-thumbs-up ph-bold ph-lg"
+			:class="icon('ph-thumbs-up')"
 		></i>
 		<i
 			v-else-if="instance.defaultReaction === '❤️'"
-			class="ph-heart ph-bold ph-lg"
+			:class="icon('ph-heart')"
 		></i>
-		<i v-else class="ph-star ph-bold ph-lg"></i>
+		<i v-else :class="icon('ph-star')"></i>
 	</button>
 </template>
 
@@ -49,6 +49,7 @@ import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: Note;
diff --git a/packages/client/src/components/MkStarButtonNoEmoji.vue b/packages/client/src/components/MkStarButtonNoEmoji.vue
index 161290a20..bda65ea75 100644
--- a/packages/client/src/components/MkStarButtonNoEmoji.vue
+++ b/packages/client/src/components/MkStarButtonNoEmoji.vue
@@ -10,30 +10,26 @@
 		<span v-if="!reacted">
 			<i
 				v-if="instance.defaultReaction === '👍'"
-				class="ph-thumbs-up ph-bold ph-lg"
+				:class="icon('ph-thumbs-up')"
 			></i>
 			<i
 				v-else-if="instance.defaultReaction === '❤️'"
-				class="ph-heart ph-bold ph-lg"
+				:class="icon('ph-heart')"
 			></i>
-			<i v-else class="ph-star ph-bold ph-lg"></i>
+			<i v-else :class="icon('ph-star')"></i>
 		</span>
 		<span v-else>
 			<i
 				v-if="instance.defaultReaction === '👍'"
-				class="ph-thumbs-up ph-bold ph-lg ph-fill"
+				class="ph-thumbs-up ph-lg ph-fill"
 				:class="$style.yellow"
 			></i>
 			<i
 				v-else-if="instance.defaultReaction === '❤️'"
-				class="ph-heart ph-bold ph-lg ph-fill"
+				class="ph-heart ph-lg ph-fill"
 				:class="$style.red"
 			></i>
-			<i
-				v-else
-				class="ph-star ph-bold ph-lg ph-fill"
-				:class="$style.yellow"
-			></i>
+			<i v-else class="ph-star ph-lg ph-fill" :class="$style.yellow"></i>
 		</span>
 		<template v-if="count > 0"
 			><p class="count">{{ count }}</p></template
@@ -51,6 +47,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 import { useTooltip } from "@/scripts/use-tooltip";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: Note;
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 93bf85e2e..a3b6e4408 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -9,7 +9,7 @@
 			class="reply-icon"
 			@click.stop
 		>
-			<i class="ph-quotes ph-bold ph-lg"></i>
+			<i :class="icon('ph-quotes')"></i>
 		</MkA>
 		<MkA
 			v-else-if="!detailed && note.replyId"
@@ -23,7 +23,7 @@
 			class="reply-icon"
 			@click.stop
 		>
-			<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+			<i :class="icon('ph-arrow-bend-left-up')"></i>
 		</MkA>
 		<Mfm
 			v-if="note.cw != ''"
@@ -81,7 +81,7 @@
 						class="reply-icon"
 						@click.stop
 					>
-						<i class="ph-quotes ph-bold ph-lg"></i>
+						<i :class="icon('ph-quotes')"></i>
 					</MkA>
 					<MkA
 						v-else-if="!detailed && note.replyId"
@@ -95,7 +95,7 @@
 						class="reply-icon"
 						@click.stop
 					>
-						<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+						<i :class="icon('ph-arrow-bend-left-up')"></i>
 					</MkA>
 				</template>
 				<Mfm
@@ -162,10 +162,12 @@
 			@click.stop="toggleMfm"
 		>
 			<template v-if="disableMfm">
-				<i class="ph-play ph-bold"></i> {{ i18n.ts._mfm.play }}
+				<i :class="icon('ph-play', false)"></i>
+				{{ i18n.ts._mfm.play }}
 			</template>
 			<template v-else>
-				<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }}
+				<i :class="icon('ph-stop', false)"></i>
+				{{ i18n.ts._mfm.stop }}
 			</template>
 		</MkButton>
 		<!-- <div
@@ -192,6 +194,7 @@ import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import { extractMfmWithAnimation } from "@/scripts/extract-mfm";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: firefish.entities.Note;
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 812c33071..864876b6c 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -12,16 +12,16 @@
 	<div v-if="queue > 0" class="new">
 		<button
 			class="_buttonPrimary _shadow"
-			:class="{ instant: !$store.state.animation }"
+			:class="{ instant: !defaultStore.state.animation }"
 			@click="tlComponent.scrollTop()"
 		>
 			{{ i18n.ts.newNoteRecived }}
-			<i class="ph-arrow-up ph-bold"></i>
+			<i :class="icon('ph-arrow-up', false)"></i>
 		</button>
 	</div>
 	<XNotes
 		ref="tlComponent"
-		:no-gap="!$store.state.showGapBetweenNotesInTimeline"
+		:no-gap="!defaultStore.state.showGapBetweenNotesInTimeline"
 		:pagination="pagination"
 		@queue="(x) => (queue = x)"
 	/>
@@ -36,6 +36,7 @@ import * as sound from "@/scripts/sound";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	src: string;
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 8ef5abbb9..5ee7e5005 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="mk-toast">
 		<transition
-			:name="$store.state.animation ? 'toast' : ''"
+			:name="defaultStore.state.animation ? 'toast' : ''"
 			appear
 			@after-leave="emit('closed')"
 		>
@@ -20,6 +20,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 import * as os from "@/os";
+import { defaultStore } from "@/store";
 
 defineProps<{
 	message: string;
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue
index dd3d801e2..883067c51 100644
--- a/packages/client/src/components/MkTooltip.vue
+++ b/packages/client/src/components/MkTooltip.vue
@@ -1,6 +1,6 @@
 <template>
 	<transition
-		:name="$store.state.animation ? 'tooltip' : ''"
+		:name="defaultStore.state.animation ? 'tooltip' : ''"
 		appear
 		@after-leave="emit('closed')"
 	>
@@ -22,6 +22,7 @@
 import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import * as os from "@/os";
 import { calcPopupPosition } from "@/scripts/popup-position";
+import { defaultStore } from "@/store";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index 5f9a108e9..767e8c3fd 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -17,7 +17,7 @@
 								:disabled="tutorial === 0"
 								@click="tutorial--"
 							>
-								<i class="ph-caret-left ph-bold ph-lg"></i>
+								<i :class="icon('ph-caret-left')"></i>
 							</button>
 							<span>{{ tutorial + 1 }} / 6</span>
 							<button
@@ -25,7 +25,7 @@
 								:disabled="tutorial === 5"
 								@click="tutorial++"
 							>
-								<i class="ph-caret-right ph-bold ph-lg"></i>
+								<i :class="icon('ph-caret-right')"></i>
 							</button>
 						</div>
 						<MkButton
@@ -33,18 +33,18 @@
 							class="ok"
 							primary
 							@click="close"
-							><i class="ph-check ph-bold ph-lg"></i>
+							><i :class="icon('ph-check')"></i>
 							{{ i18n.ts.gotIt }}</MkButton
 						>
 						<MkButton v-else class="ok" primary @click="tutorial++"
-							><i class="ph-check ph-bold ph-lg"></i>
+							><i :class="icon('ph-check')"></i>
 							{{ i18n.ts.next }}</MkButton
 						>
 					</div>
 					<Transition name="fade">
 						<section v-if="tutorial === 0" key="1" class="_content">
 							<h2 class="_title title">
-								<i class="ph-info ph-bold ph-lg"></i>
+								<i :class="icon('ph-info')"></i>
 								{{ i18n.ts._tutorial.title }}
 							</h2>
 							<h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
@@ -53,7 +53,7 @@
 							<!-- <FormSwitch v-model="autoplayMfm" class="_formBlock">
 								{{ i18n.ts._mfm.alwaysPlay }}
 								<template #caption>
-									<i class="ph-warning ph-bold ph-lg" style="color: var(--warn)"></i>
+									<i :class="icon('ph-warning')" style="color: var(--warn)"></i>
 									{{ i18n.ts._mfm.warn }}
 								</template>
 							</FormSwitch> -->
@@ -85,7 +85,7 @@
 							<XFeaturedUsers />
 							<br />
 							<MkButton class="ok" primary @click="tutorial++"
-								><i class="ph-check ph-bold ph-lg"></i>
+								><i :class="icon('ph-check')"></i>
 								{{ i18n.ts.next }}</MkButton
 							>
 						</section>
@@ -126,7 +126,7 @@
 										tag="div"
 									>
 										<template #icon>
-											<i class="ph-house ph-bold ph-lg" />
+											<i :class="icon('ph-house')" />
 										</template>
 									</I18n>
 								</li>
@@ -136,7 +136,7 @@
 										tag="div"
 									>
 										<template #icon>
-											<i class="ph-users ph-bold ph-lg" />
+											<i :class="icon('ph-users')" />
 										</template>
 									</I18n>
 								</li>
@@ -146,9 +146,7 @@
 										tag="div"
 									>
 										<template #icon>
-											<i
-												class="ph-handshake ph-bold ph-lg"
-											/>
+											<i :class="icon('ph-handshake')" />
 										</template>
 									</I18n>
 								</li>
@@ -158,9 +156,7 @@
 										tag="div"
 									>
 										<template #icon>
-											<i
-												class="ph-thumbs-up ph-bold ph-lg"
-											/>
+											<i :class="icon('ph-thumbs-up')" />
 										</template>
 									</I18n>
 								</li>
@@ -170,9 +166,7 @@
 										tag="div"
 									>
 										<template #icon>
-											<i
-												class="ph-planet ph-bold ph-lg"
-											/>
+											<i :class="icon('ph-planet')" />
 										</template>
 									</I18n>
 								</li>
@@ -219,6 +213,7 @@ import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { instance } from "@/instance";
+import icon from "@/scripts/icon";
 
 const isLocalTimelineAvailable =
 	!instance.disableLocalTimeline ||
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 098b9a846..8632ce717 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -28,9 +28,9 @@
 					>
 						<i
 							v-if="!tweetExpanded"
-							class="ph-twitter-logo ph-bold ph-lg"
+							:class="iconClass('ph-twitter-logo')"
 						></i>
-						<i v-else class="ph-x ph-bold ph-lg"></i>
+						<i v-else :class="iconClass('ph-x')"></i>
 					</button>
 					<button
 						v-else-if="player.url"
@@ -42,9 +42,9 @@
 					>
 						<i
 							v-if="!playerEnabled"
-							class="ph-play ph-bold ph-lg"
+							:class="iconClass('ph-play')"
 						></i>
-						<i v-else class="ph-x ph-bold ph-lg"></i>
+						<i v-else :class="iconClass('ph-x')"></i>
 					</button>
 				</div>
 				<div v-if="fetching">
@@ -103,6 +103,7 @@ import { onUnmounted, ref } from "vue";
 import { lang, url as local } from "@/config";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import iconClass from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
index c0ee0b284..0f0ac1ec6 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -4,7 +4,7 @@
 		:style="{ zIndex, top: top + 'px', left: left + 'px' }"
 	>
 		<transition
-			:name="$store.state.animation ? 'zoom' : ''"
+			:name="defaultStore.state.animation ? 'zoom' : ''"
 			@after-leave="emit('closed')"
 		>
 			<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" />
@@ -16,6 +16,7 @@
 import { onMounted, ref } from "vue";
 import MkUrlPreview from "@/components/MkUrlPreview.vue";
 import * as os from "@/os";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 76b7878e3..b9c50d99f 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -1,6 +1,6 @@
 <template>
 	<transition
-		:name="$store.state.animation ? 'popup' : ''"
+		:name="defaultStore.state.animation ? 'popup' : ''"
 		appear
 		@after-leave="emit('closed')"
 	>
@@ -33,6 +33,7 @@ import * as Acct from "firefish-js/built/acct";
 import type * as firefish from "firefish-js";
 import MkUserInfo from "@/components/MkUserInfo.vue";
 import * as os from "@/os";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 5ac17f7ec..598c0b4cb 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -3,34 +3,31 @@
 		<i
 			v-if="note.visibility === 'home'"
 			v-tooltip="i18n.ts._visibility.home"
-			class="ph-house ph-bold ph-lg"
+			:class="icon('ph-house')"
 		></i>
 		<i
 			v-else-if="note.visibility === 'followers'"
 			v-tooltip="i18n.ts._visibility.followers"
-			class="ph-lock ph-bold ph-lg"
+			:class="icon('ph-lock')"
 		></i>
 		<i
 			v-else-if="note.visibility === 'specified'"
 			ref="specified"
-			class="ph-envelope-simple-open ph-bold ph-lg"
+			:class="icon('ph-envelope-simple-open')"
 		></i>
 	</span>
 	<span v-if="note.localOnly" :class="$style.localOnly"
-		><i
-			v-tooltip="i18n.ts._visibility.localOnly"
-			class="ph-users ph-bold ph-lg"
-		></i
+		><i v-tooltip="i18n.ts._visibility.localOnly" class="ph-users ph-lg"></i
 	></span>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
-
 import XDetails from "@/components/MkUsersTooltip.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	note: {
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 5d0330e8a..3d4d76233 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -15,7 +15,7 @@
 				@click="choose('public')"
 			>
 				<div :class="$style.icon">
-					<i class="ph-planet ph-bold ph-lg"></i>
+					<i :class="icon('ph-planet')"></i>
 				</div>
 				<div :class="$style.body">
 					<span :class="$style.itemTitle">{{
@@ -34,7 +34,7 @@
 				@click="choose('home')"
 			>
 				<div :class="$style.icon">
-					<i class="ph-house ph-bold ph-lg"></i>
+					<i :class="icon('ph-house')"></i>
 				</div>
 				<div :class="$style.body">
 					<span :class="$style.itemTitle">{{
@@ -53,7 +53,7 @@
 				@click="choose('followers')"
 			>
 				<div :class="$style.icon">
-					<i class="ph-lock ph-bold ph-lg"></i>
+					<i :class="icon('ph-lock')"></i>
 				</div>
 				<div :class="$style.body">
 					<span :class="$style.itemTitle">{{
@@ -73,7 +73,7 @@
 				@click="choose('specified')"
 			>
 				<div :class="$style.icon">
-					<i class="ph-envelope-simple-open ph-bold ph-lg"></i>
+					<i :class="icon('ph-envelope-simple-open')"></i>
 				</div>
 				<div :class="$style.body">
 					<span :class="$style.itemTitle">{{
@@ -97,7 +97,7 @@
 				@click="localOnly = !localOnly"
 			>
 				<div :class="$style.icon">
-					<i class="ph-users ph-bold ph-lg"></i>
+					<i :class="icon('ph-users')"></i>
 				</div>
 				<div :class="$style.body">
 					<span :class="$style.itemTitle">{{
@@ -110,9 +110,11 @@
 				<div :class="$style.toggle">
 					<i
 						:class="
-							localOnly
-								? 'ph-toggle-right ph-bold ph-lg'
-								: 'ph-toggle-left ph-bold ph-lg'
+							icon(
+								localOnly
+									? 'ph-toggle-right'
+									: 'ph-toggle-left',
+							)
 						"
 					></i>
 				</div>
@@ -126,6 +128,8 @@ import { nextTick, ref, shallowRef, watch } from "vue";
 import type * as firefish from "firefish-js";
 import MkModal from "@/components/MkModal.vue";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index d16be15eb..944ec2937 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -15,7 +15,7 @@
 			<i
 				v-if="success"
 				:class="[$style.icon, $style.success]"
-				class="ph-check ph-bold ph-lg"
+				class="ph-check ph-lg"
 			></i>
 			<MkLoading
 				v-else
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index c73475712..0991cefc4 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -21,7 +21,7 @@
 					primary
 					class="mk-widget-add"
 					@click="addWidget"
-					><i class="ph-plus ph-bold ph-lg"></i>
+					><i :class="icon('ph-plus')"></i>
 					{{ i18n.ts.add }}</MkButton
 				>
 				<MkButton inline @click="$emit('exit')">{{
@@ -35,14 +35,14 @@
 							class="config _button"
 							@click.prevent.stop="configWidget(element.id)"
 						>
-							<i class="ph-gear-six ph-bold ph-lg"></i>
+							<i :class="icon('ph-gear-six')"></i>
 						</button>
 						<button
 							class="remove _button"
 							:aria-label="i18n.t('close')"
 							@click.prevent.stop="removeWidget(element)"
 						>
-							<i class="ph-x ph-bold ph-lg"></i>
+							<i :class="icon('ph-x')"></i>
 						</button>
 						<div class="handle">
 							<component
@@ -80,6 +80,7 @@ import MkButton from "@/components/MkButton.vue";
 import { widgets as widgetDefs } from "@/widgets";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 interface Widget {
 	name: string;
@@ -153,7 +154,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 				text: i18n.t(`_widgets.${widget.name}`),
 			},
 			{
-				icon: "ph-gear-six ph-bold ph-lg",
+				icon: `${icon("ph-gear-six")}`,
 				text: i18n.ts.settings,
 				action: () => {
 					configWidget(widget.id);
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 98482c8e3..102ff2447 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -1,6 +1,6 @@
 <template>
 	<transition
-		:name="$store.state.animation ? 'window' : ''"
+		:name="defaultStore.state.animation ? 'window' : ''"
 		appear
 		@after-leave="$emit('closed')"
 	>
@@ -54,21 +54,21 @@
 							class="button _button"
 							@click="unMaximize()"
 						>
-							<i class="ph-copy ph-bold ph-lg"></i>
+							<i :class="icon('ph-copy')"></i>
 						</button>
 						<button
 							v-else-if="canResize && !maximized"
 							class="button _button"
 							@click="maximize()"
 						>
-							<i class="ph-browser ph-bold ph-lg"></i>
+							<i :class="icon('ph-browser')"></i>
 						</button>
 						<button
 							v-if="closeButton"
 							class="button _button"
 							@click="close()"
 						>
-							<i class="ph-x ph-bold ph-lg"></i>
+							<i :class="icon('ph-x')"></i>
 						</button>
 					</span>
 				</div>
@@ -119,6 +119,8 @@ import { onBeforeUnmount, onMounted, provide, ref } from "vue";
 import contains from "@/scripts/contains";
 import * as os from "@/os";
 import type { MenuItem } from "@/types/menu";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const minHeight = 50;
 const minWidth = 250;
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index 352fbac9e..78a6f68f4 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -13,7 +13,7 @@
 			class="button"
 			@click.prevent="toggle"
 		>
-			<i class="check ph-check ph-bold ph-lg"></i>
+			<i class="check ph-check ph-lg"></i>
 		</span>
 		<span class="label">
 			<!-- TODO: 無名slotの方は廃止 -->
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index fb0b081ad..9446dabe6 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -5,8 +5,8 @@
 			<span class="text"><slot name="label"></slot></span>
 			<span class="right">
 				<span class="text"><slot name="suffix"></slot></span>
-				<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i>
-				<i v-else class="ph-caret-down ph-bold ph-lg icon"></i>
+				<i v-if="opened" :class="icon('ph-caret-up icon')"></i>
+				<i v-else :class="icon('ph-caret-down icon')"></i>
 			</span>
 		</summary>
 		<div class="body">
@@ -18,6 +18,8 @@
 </template>
 
 <script lang="ts" setup>
+import icon from "@/scripts/icon";
+
 defineProps<{
 	defaultOpen: boolean;
 }>();
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 91f401ac9..e54302ed9 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -40,7 +40,7 @@
 			primary
 			class="save"
 			@click="updated"
-			><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton
+			><i :class="icon('ph-check')"></i> {{ i18n.ts.save }}</MkButton
 		>
 	</div>
 </template>
@@ -51,6 +51,7 @@ import { debounce } from "throttle-debounce";
 import MkButton from "@/components/MkButton.vue";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	modelValue: string | number | null;
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index 208b40430..f20d37dc2 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -5,7 +5,7 @@
 			<span class="text"><slot></slot></span>
 			<span class="right">
 				<span class="text"><slot name="suffix"></slot></span>
-				<i class="ph-arrow-square-out ph-bold ph-lg icon"></i>
+				<i :class="icon('ph-arrow-square-out icon')"></i>
 			</span>
 		</a>
 		<MkA
@@ -19,14 +19,16 @@
 			<span class="text"><slot></slot></span>
 			<span class="right">
 				<span class="text"><slot name="suffix"></slot></span>
-				<i class="ph-caret-right ph-bold ph-lg icon"></i>
+				<i :class="icon('ph-caret-right icon')"></i>
 			</span>
 		</MkA>
 	</div>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{
+import icon from "@/scripts/icon";
+
+defineProps<{
 	to: string;
 	active?: boolean;
 	external?: boolean;
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index cf5b90a53..6ad9967bc 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -25,7 +25,7 @@
 			</select>
 			<div ref="suffixEl" class="suffix">
 				<i
-					class="ph-caret-down ph-bold ph-lg"
+					class="ph-caret-down ph-lg"
 					:class="[
 						$style.chevron,
 						{ [$style.chevronOpening]: opening },
@@ -36,7 +36,7 @@
 		<div class="caption"><slot name="caption"></slot></div>
 
 		<MkButton v-if="manualSave && changed" primary @click="updated"
-			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			><i :class="icon('ph-floppy-disk-back')"></i>
 			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
@@ -57,6 +57,7 @@ import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	modelValue: string | null;
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 2b06bcbbb..d8965f13f 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -1,5 +1,8 @@
 <template>
-	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+	<transition
+		:name="defaultStore.state.animation ? 'fade' : ''"
+		mode="out-in"
+	>
 		<div v-if="pending">
 			<MkLoading />
 		</div>
@@ -9,11 +12,11 @@
 		<div v-else>
 			<div class="wszdbhzo">
 				<div>
-					<i class="ph-warning ph-bold ph-lg"></i>
+					<i :class="icon('ph-warning')"></i>
 					{{ i18n.ts.somethingHappened }}
 				</div>
 				<MkButton inline class="retry" @click="retry"
-					><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+					><i :class="icon('ph-arrow-clockwise')"></i>
 					{{ i18n.ts.retry }}</MkButton
 				>
 			</div>
@@ -26,6 +29,8 @@ import type { PropType } from "vue";
 import { defineComponent, ref, watch } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 537b9df93..4c0031194 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -31,7 +31,10 @@
 			primary
 			class="save"
 			@click="updated"
-			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+		>
+			<!-- FIXME: icon function doesn't work here -->
+			<!-- <i :class="icon('ph-floppy-disk-back')"></i> -->
+			<i class="ph-floppy-disk-back ph-bold ph-lg"></i>
 			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
@@ -50,6 +53,7 @@ import {
 import { debounce } from "throttle-debounce";
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
+// import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index f34689758..fbe5472a2 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -18,6 +18,7 @@ import { url } from "@/config";
 // import { popout as popout_ } from "@/scripts/popout";
 import { i18n } from "@/i18n";
 import { useRouter } from "@/router";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
@@ -53,14 +54,14 @@ function onContextmenu(ev) {
 				text: props.to,
 			},
 			{
-				icon: "ph-browser ph-bold ph-lg",
+				icon: `${icon("ph-browser")}`,
 				text: i18n.ts.openInWindow,
 				action: () => {
 					os.pageWindow(props.to);
 				},
 			},
 			{
-				icon: "ph-arrows-out-simple ph-bold ph-lg",
+				icon: `${icon("ph-arrows-out-simple")}`,
 				text: i18n.ts.showInPage,
 				action: () => {
 					router.push(props.to, "forcePage");
@@ -68,14 +69,14 @@ function onContextmenu(ev) {
 			},
 			null,
 			{
-				icon: "ph-arrow-square-out ph-bold ph-lg",
+				icon: `${icon("ph-arrow-square-out")}`,
 				text: i18n.ts.openInNewTab,
 				action: () => {
 					window.open(props.to, "_blank");
 				},
 			},
 			{
-				icon: "ph-link-simple ph-bold ph-lg",
+				icon: `${icon("ph-link-simple")}`,
 				text: i18n.ts.copyLink,
 				action: () => {
 					copyToClipboard(`${url}${props.to}`);
diff --git a/packages/client/src/components/global/MkAcct.vue b/packages/client/src/components/global/MkAcct.vue
index bf2f466ae..826e01fed 100644
--- a/packages/client/src/components/global/MkAcct.vue
+++ b/packages/client/src/components/global/MkAcct.vue
@@ -2,7 +2,7 @@
 	<span class="mk-acct">
 		<span class="name">@{{ user.username }}</span>
 		<span
-			v-if="user.host || detail || $store.state.showFullAcct"
+			v-if="user.host || detail || defaultStore.state.showFullAcct"
 			class="host"
 			>@{{ user.host || host }}</span
 		>
@@ -13,6 +13,7 @@
 import type * as firefish from "firefish-js";
 import { toUnicode } from "punycode/";
 import { host as hostRaw } from "@/config";
+import { defaultStore } from "@/store";
 
 defineProps<{
 	user: firefish.entities.UserDetailed;
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index d415351d0..542070aa8 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -15,7 +15,7 @@
 			<a :href="chosen.url" target="_blank">
 				<img :src="chosen.imageUrl" />
 				<button class="_button menu" @click.prevent.stop="toggleMenu">
-					<span class="ph-info ph-bold ph-lg info-circle"></span>
+					<span :class="icon('ph-info info-circle')"></span>
 				</button>
 			</a>
 		</div>
@@ -46,6 +46,7 @@ import MkButton from "@/components/MkButton.vue";
 import { defaultStore } from "@/store";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 type Ad = (typeof instance)["ads"][number];
 
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index 16a694f69..5d1f4e63c 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -3,7 +3,10 @@
 		v-if="disableLink"
 		v-user-preview="disablePreview ? undefined : user.id"
 		class="eiwwqkts _noSelect"
-		:class="{ cat: user.isCat, square: $store.state.squareAvatars }"
+		:class="{
+			cat: user.isCat,
+			square: defaultStore.state.squareAvatars,
+		}"
 		:style="{ color }"
 		:title="acct(user)"
 		@click="onClick"
@@ -19,7 +22,10 @@
 		v-else
 		v-user-preview="disablePreview ? undefined : user.id"
 		class="eiwwqkts _noSelect"
-		:class="{ cat: user.isCat, square: $store.state.squareAvatars }"
+		:class="{
+			cat: user.isCat,
+			square: defaultStore.state.squareAvatars,
+		}"
 		:style="{ color }"
 		:to="userPage(user)"
 		:title="acct(user)"
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
index 05eb0f27a..7472542ee 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -1,5 +1,5 @@
 <template>
-	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+	<transition :name="defaultStore.state.animation ? 'zoom' : ''" appear>
 		<div class="mjndxjcg">
 			<img
 				src="/static-assets/badges/error.webp"
@@ -7,7 +7,7 @@
 				alt="Error"
 			/>
 			<p>
-				<i class="ph-warning ph-bold ph-lg"></i>
+				<i :class="icon('ph-warning')"></i>
 				{{ i18n.ts.somethingHappened }}
 			</p>
 			<MkButton class="button" @click="() => $emit('retry')">{{
@@ -20,6 +20,8 @@
 <script lang="ts" setup>
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 4f7ea0b02..78abe21b3 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -17,7 +17,7 @@
 					@click.stop="goBack()"
 					@touchstart="preventDrag"
 				>
-					<i class="ph-caret-left ph-bold ph-lg"></i>
+					<i :class="icon('ph-caret-left')"></i>
 				</button>
 				<MkAvatar
 					v-if="narrow && props.displayMyAvatar && $i"
@@ -140,6 +140,7 @@ import { scrollToTop } from "@/scripts/scroll";
 import { injectPageMetadata } from "@/scripts/page-metadata";
 import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 interface Tab {
 	key?: string | null;
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 41bb05392..5a8c62453 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -25,7 +25,7 @@
 		<span class="hash">{{ hash }}</span>
 		<i
 			v-if="target === '_blank'"
-			class="ph-arrow-square-out ph-bold ph-lg icon"
+			:class="icon('ph-arrow-square-out icon')"
 		></i>
 	</component>
 </template>
@@ -37,6 +37,7 @@ import { url as local } from "@/config";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { safeURIDecode } from "@/scripts/safe-uri-decode";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	url: string;
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 2b9b57917..7366d2c4a 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -7,8 +7,8 @@
 			:disabled="posting || posted"
 			@click="post()"
 		>
-			<i v-if="posted" class="ph-check ph-bold ph-lg"></i>
-			<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+			<i v-if="posted" :class="icon('ph-check')"></i>
+			<i v-else :class="icon('ph-paper-plane-tilt')"></i>
 		</MkButton>
 	</div>
 </template>
@@ -22,6 +22,7 @@ import { apiUrl } from "@/config";
 import * as os from "@/os";
 import type { PostBlock } from "@/scripts/hpml/block";
 import type { Hpml } from "@/scripts/hpml/evaluator";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
@@ -60,10 +61,10 @@ export default defineComponent({
 				canvas.toBlob((blob) => {
 					const formData = new FormData();
 					formData.append("file", blob);
-					if (this.$store.state.uploadFolder) {
+					if (this.defaultStore.state.uploadFolder) {
 						formData.append(
 							"folderId",
-							this.$store.state.uploadFolder,
+							this.defaultStore.state.uploadFolder,
 						);
 					}
 
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index c416b6f06..ddcdfc207 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -6,8 +6,12 @@
 import "vite/modulepreload-polyfill";
 
 import "@/style.scss";
-import "@phosphor-icons/web/bold";
+
 import "@phosphor-icons/web/fill";
+import "@phosphor-icons/web/bold";
+import "@phosphor-icons/web/regular";
+import "@phosphor-icons/web/light";
+import "@phosphor-icons/web/duotone";
 
 // #region account indexedDB migration
 import { set } from "@/scripts/idb-proxy";
@@ -72,7 +76,6 @@ function checkForSplash() {
 		console.info(`vue ${vueVersion}`);
 
 		(window as any).$i = $i;
-		(window as any).$store = defaultStore;
 
 		window.addEventListener("error", (event) => {
 			console.error(event);
@@ -201,10 +204,7 @@ function checkForSplash() {
 
 	app.config.globalProperties = {
 		$i,
-		$store: defaultStore,
 		$instance: instance,
-		$t: i18n.t,
-		$ts: i18n.ts,
 	};
 
 	widgets(app);
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index c4b9c7a6e..c2ab1d4d1 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -1,102 +1,103 @@
-import { computed, reactive, ref } from "vue";
+import { computed, reactive } from "vue";
 import { $i } from "./account";
 import { search } from "@/scripts/search";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { ui } from "@/config";
 import { unisonReload } from "@/scripts/unison-reload";
+import icon from "@/scripts/icon";
 
 export const navbarItemDef = reactive({
 	notifications: {
 		title: "notifications",
-		icon: "ph-bell ph-bold ph-lg",
+		icon: `${icon("ph-bell")}`,
 		show: computed(() => $i != null),
 		indicated: computed(() => $i?.hasUnreadNotification),
 		to: "/my/notifications",
 	},
 	messaging: {
 		title: "messaging",
-		icon: "ph-chats-teardrop ph-bold ph-lg",
+		icon: `${icon("ph-chats-teardrop")}`,
 		show: computed(() => $i != null),
 		indicated: computed(() => $i?.hasUnreadMessagingMessage),
 		to: "/my/messaging",
 	},
 	drive: {
 		title: "drive",
-		icon: "ph-cloud ph-bold ph-lg",
+		icon: `${icon("ph-cloud")}`,
 		show: computed(() => $i != null),
 		to: "/my/drive",
 	},
 	followRequests: {
 		title: "followRequests",
-		icon: "ph-hand-waving ph-bold ph-lg",
+		icon: `${icon("ph-hand-waving")}`,
 		show: computed(() => $i?.isLocked || $i?.hasPendingReceivedFollowRequest),
 		indicated: computed(() => $i?.hasPendingReceivedFollowRequest),
 		to: "/my/follow-requests",
 	},
 	explore: {
 		title: "explore",
-		icon: "ph-compass ph-bold ph-lg",
+		icon: `${icon("ph-compass")}`,
 		to: "/explore",
 	},
 	announcements: {
 		title: "announcements",
-		icon: "ph-megaphone-simple ph-bold ph-lg",
+		icon: `${icon("ph-megaphone-simple")}`,
 		indicated: computed(() => $i?.hasUnreadAnnouncement),
 		to: "/announcements",
 	},
 	search: {
 		title: "search",
-		icon: "ph-magnifying-glass ph-bold ph-lg",
+		icon: `${icon("ph-magnifying-glass")}`,
 		action: () => search(),
 	},
 	lists: {
 		title: "lists",
-		icon: "ph-list-bullets ph-bold ph-lg",
+		icon: `${icon("ph-list-bullets")}`,
 		show: computed(() => $i != null),
 		to: "/my/lists",
 	},
 	antennas: {
 		title: "antennas",
-		icon: "ph-flying-saucer ph-bold ph-lg",
+		icon: `${icon("ph-flying-saucer")}`,
 		show: computed(() => $i != null),
 		to: "/my/antennas",
 	},
 	favorites: {
 		title: "favorites",
-		icon: "ph-bookmark-simple ph-bold ph-lg",
+		icon: `${icon("ph-bookmark-simple")}`,
 		show: computed(() => $i != null),
 		to: "/my/favorites",
 	},
 	pages: {
 		title: "pages",
-		icon: "ph-file-text ph-bold ph-lg",
+		icon: `${icon("ph-file-text")}`,
 		to: "/pages",
 	},
 	gallery: {
 		title: "gallery",
-		icon: "ph-image-square ph-bold ph-lg",
+		icon: `${icon("ph-image-square")}`,
 		to: "/gallery",
 	},
 	clips: {
 		title: "clips",
-		icon: "ph-paperclip ph-bold ph-lg",
+		icon: `${icon("ph-paperclip")}`,
 		show: computed(() => $i != null),
 		to: "/my/clips",
 	},
 	channels: {
 		title: "channel",
-		icon: "ph-television ph-bold ph-lg",
+		icon: `${icon("ph-television")}`,
 		to: "/channels",
 	},
 	groups: {
 		title: "groups",
-		icon: "ph-users-three ph-bold ph-lg",
+		icon: `${icon("ph-users-three")}`,
 		to: "/my/groups",
 	},
 	ui: {
 		title: "switchUi",
-		icon: "ph-layout ph-bold ph-lg",
+		icon: `${icon("ph-layout")}`,
 		action: (ev) => {
 			os.popupMenu(
 				[
@@ -131,7 +132,7 @@ export const navbarItemDef = reactive({
 	},
 	reload: {
 		title: "reload",
-		icon: "ph-arrows-clockwise ph-bold ph-lg",
+		icon: `${icon("ph-arrows-clockwise")}`,
 		action: (ev) => {
 			location.reload();
 		},
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index 8f814d93c..8d3005f8b 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -1,6 +1,6 @@
 <template>
 	<MkLoading v-if="!loaded" />
-	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+	<transition :name="defaultStore.state.animation ? 'zoom' : ''" appear>
 		<div v-show="loaded" class="mjndxjch">
 			<img
 				src="/static-assets/badges/error.webp"
@@ -9,7 +9,7 @@
 			/>
 			<p>
 				<b
-					><i class="ph-warning ph-bold ph-lg"></i>
+					><i :class="icon('ph-warning')"></i>
 					{{ i18n.ts.pageLoadError }}</b
 				>
 			</p>
@@ -44,8 +44,10 @@ import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
-const props = withDefaults(
+withDefaults(
 	defineProps<{
 		error?: Error;
 	}>(),
@@ -77,7 +79,7 @@ function reload() {
 
 definePageMetadata({
 	title: i18n.ts.error,
-	icon: "ph-warning ph-bold ph-lg",
+	icon: `${icon("ph-warning")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/about-firefish.vue b/packages/client/src/pages/about-firefish.vue
index d63586303..1268c579b 100644
--- a/packages/client/src/pages/about-firefish.vue
+++ b/packages/client/src/pages/about-firefish.vue
@@ -61,7 +61,7 @@
 								external
 							>
 								<template #icon
-									><i class="ph-code ph-bold ph-lg"></i
+									><i :class="icon('ph-code')"></i
 								></template>
 								{{ i18n.ts._aboutFirefish.source }}
 								<template #suffix>GitLab</template>
@@ -71,7 +71,7 @@
 								external
 							>
 								<template #icon
-									><i class="ph-money ph-bold ph-lg"></i
+									><i :class="icon('ph-money')"></i
 								></template>
 								{{ i18n.ts._aboutFirefish.donate }}
 								<template #suffix>Donate</template>
@@ -81,7 +81,7 @@
 								external
 							>
 								<template #icon
-									><i class="ph-translate ph-bold ph-lg"></i
+									><i :class="icon('ph-translate')"></i
 								></template>
 								{{ i18n.ts._aboutFirefish.translation }}
 								<template #suffix>Translate</template>
@@ -219,6 +219,7 @@ import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 let patrons = [],
 	sponsors = [];
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index 1b9b03076..4f4ac5db8 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -3,7 +3,7 @@
 		<div class="query">
 			<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
 				<template #prefix
-					><i class="ph-magnifying-glass ph-bold ph-lg"></i
+					><i :class="icon('ph-magnifying-glass')"></i
 				></template>
 			</MkInput>
 
@@ -56,6 +56,7 @@ import MkFolder from "@/components/MkFolder.vue";
 import MkTab from "@/components/MkTab.vue";
 import { emojiCategories, emojiTags } from "@/instance";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index 9ac4b469d..163166a38 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -3,7 +3,7 @@
 		<div class="query">
 			<MkInput v-model="host" :debounce="true" class="">
 				<template #prefix
-					><i class="ph-magnifying-glass ph-bold ph-lg"></i
+					><i :class="icon('ph-magnifying-glass')"></i
 				></template>
 				<template #label>{{ i18n.ts.host }}</template>
 			</MkInput>
@@ -112,6 +112,7 @@ import MkPagination from "@/components/MkPagination.vue";
 import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
 import FormSplit from "@/components/form/split.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const host = ref("");
 const state = ref("federating");
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 5aecece8c..e830e9ac5 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -95,7 +95,7 @@
 								external
 							>
 								<template #icon
-									><i class="ph-money ph-bold ph-lg"></i
+									><i :class="icon('ph-money')"></i
 								></template>
 								{{
 									i18n.t("_aboutFirefish.donateHost", {
@@ -193,6 +193,7 @@ import { deviceKind } from "@/scripts/device-kind";
 import { iAmModerator } from "@/account";
 import { instance } from "@/instance";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -227,17 +228,17 @@ const theTabs = [
 	{
 		key: "overview",
 		title: i18n.ts.overview,
-		icon: "ph-map-trifold ph-bold ph-lg",
+		icon: `${icon("ph-map-trifold")}`,
 	},
 	{
 		key: "emojis",
 		title: i18n.ts.customEmojis,
-		icon: "ph-smiley ph-bold ph-lg",
+		icon: `${icon("ph-smiley")}`,
 	},
 	{
 		key: "charts",
 		title: i18n.ts.charts,
-		icon: "ph-chart-bar ph-bold ph-lg",
+		icon: `${icon("ph-chart-bar")}`,
 	},
 ];
 
@@ -245,7 +246,7 @@ if (iAmModerator) {
 	theTabs.push({
 		key: "federation",
 		title: i18n.ts.federation,
-		icon: "ph-planet ph-bold ph-lg",
+		icon: `${icon("ph-planet")}`,
 	});
 }
 
@@ -254,7 +255,7 @@ const headerTabs = computed(() => theTabs);
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.instanceInfo,
-		icon: "ph-info ph-bold ph-lg",
+		icon: `${icon("ph-info")}`,
 	})),
 );
 
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 8306defdc..a8c8e9ce4 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -111,7 +111,7 @@
 
 						<div class="_formBlock">
 							<MkButton danger @click="del"
-								><i class="ph-trash ph-bold ph-lg"></i>
+								><i :class="icon('ph-trash')"></i>
 								{{ i18n.ts.delete }}</MkButton
 							>
 						</div>
@@ -174,6 +174,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { iAmAdmin, iAmModerator } from "@/account";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -224,7 +225,7 @@ async function toggleIsSensitive(v) {
 const headerActions = computed(() => [
 	{
 		text: i18n.ts.openInNewTab,
-		icon: "ph-arrow-square-out ph-bold ph-lg",
+		icon: `${icon("ph-arrow-square-out")}`,
 		handler: () => {
 			window.open(file.value.url, "_blank");
 		},
@@ -235,19 +236,19 @@ const headerTabs = computed(() => [
 	{
 		key: "overview",
 		title: i18n.ts.overview,
-		icon: "ph-info ph-bold ph-lg",
+		icon: `${icon("ph-info")}`,
 	},
 	iAmModerator
 		? {
 				key: "ip",
 				title: "IP",
-				icon: "ph-receipt ph-bold ph-lg",
+				icon: `${icon("ph-receipt")}`,
 		  }
 		: null,
 	{
 		key: "raw",
 		title: "Raw data",
-		icon: "ph-code ph-bold ph-lg",
+		icon: `${icon("ph-code")}`,
 	},
 ]);
 
@@ -256,7 +257,7 @@ definePageMetadata(
 		title: file.value
 			? i18n.ts.file + ": " + file.value.name
 			: i18n.ts.file,
-		icon: "ph-file ph-bold ph-lg",
+		icon: `${icon("ph-file")}`,
 	})),
 );
 
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index f599c2622..174b4d571 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -98,6 +98,7 @@ import MkPagination from "@/components/MkPagination.vue";
 import XAbuseReport from "@/components/MkAbuseReport.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const reports = ref<InstanceType<typeof MkPagination>>();
 
@@ -127,7 +128,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.abuseReports,
-	icon: "ph-warning-circle ph-bold ph-lg",
+	icon: `${icon("ph-warning-circle")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index d8fa3bc74..4b666d43a 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -44,16 +44,14 @@
 								inline
 								primary
 								@click="save(announcement)"
-								><i
-									class="ph-floppy-disk-back ph-bold ph-lg"
-								></i>
+								><i :class="icon('ph-floppy-disk-back')"></i>
 								{{ i18n.ts.save }}</MkButton
 							>
 							<MkButton
 								class="button"
 								inline
 								@click="remove(announcement)"
-								><i class="ph-trash ph-bold ph-lg"></i>
+								><i :class="icon('ph-trash')"></i>
 								{{ i18n.ts.remove }}</MkButton
 							>
 						</div>
@@ -74,6 +72,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const announcements = ref<any[]>([]);
 
@@ -140,7 +139,7 @@ function save(announcement) {
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.add,
 		handler: add,
 	},
@@ -150,7 +149,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: "ph-megaphone-simple ph-bold ph-lg",
+	icon: `${icon("ph-megaphone-simple")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 6964fc1d5..54d1b2ae1 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -13,7 +13,7 @@
 				<template v-if="provider === 'hcaptcha'">
 					<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
 						<template #prefix
-							><i class="ph-key ph-bold ph-lg"></i
+							><i :class="icon('ph-key')"></i
 						></template>
 						<template #label>{{
 							i18n.ts.hcaptchaSiteKey
@@ -21,7 +21,7 @@
 					</FormInput>
 					<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
 						<template #prefix
-							><i class="ph-key ph-bold ph-lg"></i
+							><i :class="icon('ph-key')"></i
 						></template>
 						<template #label>{{
 							i18n.ts.hcaptchaSecretKey
@@ -41,7 +41,7 @@
 				<template v-else-if="provider === 'recaptcha'">
 					<FormInput v-model="recaptchaSiteKey" class="_formBlock">
 						<template #prefix
-							><i class="ph-key ph-bold ph-lg"></i
+							><i :class="icon('ph-key')"></i
 						></template>
 						<template #label>{{
 							i18n.ts.recaptchaSiteKey
@@ -49,7 +49,7 @@
 					</FormInput>
 					<FormInput v-model="recaptchaSecretKey" class="_formBlock">
 						<template #prefix
-							><i class="ph-key ph-bold ph-lg"></i
+							><i :class="icon('ph-key')"></i
 						></template>
 						<template #label>{{
 							i18n.ts.recaptchaSecretKey
@@ -65,7 +65,7 @@
 				</template>
 
 				<FormButton primary @click="save"
-					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					><i :class="icon('ph-floppy-disk-back')"></i>
 					{{ i18n.ts.save }}</FormButton
 				>
 			</div>
@@ -83,6 +83,7 @@ import FormSlot from "@/components/form/slot.vue";
 import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const MkCaptcha = defineAsyncComponent(
 	() => import("@/components/MkCaptcha.vue"),
diff --git a/packages/client/src/pages/admin/custom-css.vue b/packages/client/src/pages/admin/custom-css.vue
index e41c29eac..e742a63ec 100644
--- a/packages/client/src/pages/admin/custom-css.vue
+++ b/packages/client/src/pages/admin/custom-css.vue
@@ -22,6 +22,7 @@ import FormTextarea from "@/components/form/textarea.vue";
 import FormInfo from "@/components/MkInfo.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 // const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
 
@@ -45,6 +46,6 @@ watch(globalCustomCss, async () => {
 
 definePageMetadata({
 	title: i18n.ts.customCss,
-	icon: "ph-code ph-bold ph-lg",
+	icon: `${icon("ph-code")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index 51b2bc617..e2da64812 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -45,6 +45,7 @@ import number from "@/filters/number";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { indexPosts } from "@/scripts/index-posts";
+import icon from "@/scripts/icon";
 
 const databasePromiseFactory = () =>
 	os
@@ -59,6 +60,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.database,
-	icon: "ph-database ph-bold ph-lg",
+	icon: `${icon("ph-database")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 578692e3a..52dadc15b 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -103,6 +103,7 @@ import * as os from "@/os";
 import { fetchInstance, instance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const enableEmail = ref(false);
 const email: any = ref(null);
@@ -154,13 +155,13 @@ function save() {
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-test-tube ph-bold ph-lg",
+		icon: `${icon("ph-test-tube")}`,
 		text: i18n.ts.testEmail,
 		handler: testEmail,
 	},
 	{
 		asFullButton: true,
-		icon: "ph-check ph-bold ph-lg",
+		icon: `${icon("ph-check")}`,
 		text: i18n.ts.save,
 		handler: save,
 	},
@@ -170,6 +171,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.emailServer,
-	icon: "ph-envelope-simple-open ph-bold ph-lg",
+	icon: `${icon("ph-envelope-simple-open")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index dca480693..a09822f7e 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -32,7 +32,7 @@
 					<template #label>{{ i18n.ts.license }}</template>
 				</MkTextarea>
 				<MkButton danger @click="del()"
-					><i class="ph-trash ph-bold ph-lg"></i>
+					><i :class="icon('ph-trash')"></i>
 					{{ i18n.ts.delete }}</MkButton
 				>
 			</div>
@@ -50,6 +50,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { emojiCategories } from "@/instance";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	emoji: any;
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index c15026371..bc67be360 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -13,9 +13,7 @@
 					<div v-if="tab === 'local'" class="local">
 						<MkInput v-model="query" :debounce="true" type="search">
 							<template #prefix
-								><i
-									class="ph-magnifying-glass ph-bold ph-lg"
-								></i
+								><i :class="icon('ph-magnifying-glass')"></i
 							></template>
 							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
@@ -105,9 +103,7 @@
 								type="search"
 							>
 								<template #prefix
-									><i
-										class="ph-magnifying-glass ph-bold ph-lg"
-									></i
+									><i :class="icon('ph-magnifying-glass')"></i
 								></template>
 								<template #label>{{ i18n.ts.search }}</template>
 							</MkInput>
@@ -164,6 +160,7 @@ import { selectFile, selectFiles } from "@/scripts/select-file";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
 
@@ -272,7 +269,7 @@ const remoteMenu = (emoji, ev: MouseEvent) => {
 			},
 			{
 				text: i18n.ts.import,
-				icon: "ph-plus ph-bold ph-lg",
+				icon: `${icon("ph-plus")}`,
 				action: () => {
 					im(emoji);
 				},
@@ -286,7 +283,7 @@ const menu = (ev: MouseEvent) => {
 	os.popupMenu(
 		[
 			{
-				icon: "ph-download-simple ph-bold ph-lg",
+				icon: `${icon("ph-download-simple")}`,
 				text: i18n.ts.exportZip,
 				action: async () => {
 					os.api("export-custom-emojis", {})
@@ -305,7 +302,7 @@ const menu = (ev: MouseEvent) => {
 				},
 			},
 			{
-				icon: "ph-upload-simple ph-bold ph-lg",
+				icon: `${icon("ph-upload-simple")}`,
 				text: i18n.ts.importZip,
 				action: async () => {
 					const file = await selectFile(
@@ -329,7 +326,7 @@ const menu = (ev: MouseEvent) => {
 				},
 			},
 			{
-				icon: "ph-info ph-bold ph-lg",
+				icon: `${icon("ph-info")}`,
 				text: i18n.ts.emojiPackCreator,
 				action: () => {
 					window.open(
@@ -418,12 +415,12 @@ const delBulk = async () => {
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.addEmoji,
 		handler: add,
 	},
 	{
-		icon: "ph-file-zip ph-bold ph-lg",
+		icon: `${icon("ph-file-zip")}`,
 		handler: menu,
 	},
 ]);
@@ -431,12 +428,12 @@ const headerActions = computed(() => [
 const headerTabs = computed(() => [
 	{
 		key: "local",
-		icon: "ph-users ph-bold ph-lg",
+		icon: `${icon("ph-users")}`,
 		title: i18n.ts.local,
 	},
 	{
 		key: "remote",
-		icon: "ph-planet ph-bold ph-lg",
+		icon: `${icon("ph-planet")}`,
 		title: i18n.ts.remote,
 	},
 ]);
@@ -444,7 +441,7 @@ const headerTabs = computed(() => [
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.customEmojis,
-		icon: "ph-smiley ph-bold ph-lg",
+		icon: `${icon("ph-smiley")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/admin/experiments.vue b/packages/client/src/pages/admin/experiments.vue
index 66ef6b6e8..2740d9de6 100644
--- a/packages/client/src/pages/admin/experiments.vue
+++ b/packages/client/src/pages/admin/experiments.vue
@@ -14,7 +14,7 @@
 					@update:modelValue="save"
 				>
 					<template #label>
-						<i class="ph-download-simple ph-bold ph-lg"></i>
+						<i :class="icon('ph-download-simple')"></i>
 						{{ i18n.ts._experiments.enablePostImports }}
 					</template>
 					<template #caption>{{
@@ -36,6 +36,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const enablePostImports = ref(false);
 const meta = ref<MetaExperiments | null>(null);
@@ -71,6 +72,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._experiments.title,
-	icon: "ph-flask ph-bold ph-lg",
+	icon: `${icon("ph-flask")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/federation.vue b/packages/client/src/pages/admin/federation.vue
index bf8b549f5..9570840e1 100644
--- a/packages/client/src/pages/admin/federation.vue
+++ b/packages/client/src/pages/admin/federation.vue
@@ -19,6 +19,7 @@ import { computed } from "vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import XFederation from "@/pages/about.federation.vue";
+import icon from "@/scripts/icon";
 
 const headerActions = computed(() => []);
 
@@ -27,7 +28,7 @@ const headerTabs = computed(() => []);
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.federation,
-		icon: "ph-planet ph-bold ph-lg",
+		icon: `${icon("ph-planet")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index d210489da..ef2dd28a2 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -88,6 +88,7 @@ import { lookupFile } from "@/scripts/lookup-file";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const origin = ref("local");
 const type = ref(null);
@@ -122,12 +123,12 @@ function clear() {
 const headerActions = computed(() => [
 	{
 		text: i18n.ts.lookup,
-		icon: "ph-magnifying-glass ph-bold ph-lg",
+		icon: `${icon("ph-magnifying-glass")}`,
 		handler: lookupFile,
 	},
 	{
 		text: i18n.ts.clearCachedFiles,
-		icon: "ph-trash ph-bold ph-lg",
+		icon: `${icon("ph-trash")}`,
 		handler: clear,
 	},
 ]);
@@ -135,7 +136,7 @@ const headerActions = computed(() => [
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.files,
-		icon: "ph-cloud ph-bold ph-lg",
+		icon: `${icon("ph-cloud")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/admin/hashtags.vue b/packages/client/src/pages/admin/hashtags.vue
index 150149097..12e24e161 100644
--- a/packages/client/src/pages/admin/hashtags.vue
+++ b/packages/client/src/pages/admin/hashtags.vue
@@ -17,7 +17,7 @@
 				</FormTextarea>
 
 				<FormButton primary class="_formBlock" @click="save"
-					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					><i :class="icon('ph-floppy-disk-back')"></i>
 					{{ i18n.ts.save }}</FormButton
 				>
 			</FormSuspense>
@@ -35,6 +35,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const hiddenTags = ref("");
 
@@ -58,6 +59,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.hiddenTags,
-	icon: "ph-hash ph-bold ph-lg",
+	icon: `${icon("ph-hash")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 7deffdddd..f4c549042 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -85,6 +85,7 @@ import {
 	definePageMetadata,
 	provideMetadataReceiver,
 } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const isEmpty = (x: string | null) => x == null || x === "";
 const el = ref<HTMLElement | null>(null);
@@ -92,7 +93,7 @@ const router = useRouter();
 
 const indexInfo = {
 	title: i18n.ts.controlPanel,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 	hideHeader: true,
 };
 
@@ -141,7 +142,7 @@ const menuDef = computed(() => [
 		items: [
 			{
 				type: "button",
-				icon: "ph-magnifying-glass ph-bold ph-lg",
+				icon: `${icon("ph-magnifying-glass")}`,
 				text: i18n.ts.lookup,
 				action: lookup,
 			},
@@ -149,7 +150,7 @@ const menuDef = computed(() => [
 				? [
 						{
 							type: "button",
-							icon: "ph-user-plus ph-bold ph-lg",
+							icon: `${icon("ph-user-plus")}`,
 							text: i18n.ts.invite,
 							action: invite,
 						},
@@ -159,7 +160,7 @@ const menuDef = computed(() => [
 				? [
 						{
 							type: "button",
-							icon: "ph-list-magnifying-glass ph-bold ph-lg",
+							icon: `${icon("ph-list-magnifying-glass")}`,
 							text: i18n.ts.indexPosts,
 							action: indexPosts,
 						},
@@ -171,55 +172,55 @@ const menuDef = computed(() => [
 		title: i18n.ts.administration,
 		items: [
 			{
-				icon: "ph-gauge ph-bold ph-lg",
+				icon: `${icon("ph-gauge")}`,
 				text: i18n.ts.dashboard,
 				to: "/admin/overview",
 				active: currentPage.value?.route.name === "overview",
 			},
 			{
-				icon: "ph-users ph-bold ph-lg",
+				icon: `${icon("ph-users")}`,
 				text: i18n.ts.users,
 				to: "/admin/users",
 				active: currentPage.value?.route.name === "users",
 			},
 			{
-				icon: "ph-smiley ph-bold ph-lg",
+				icon: `${icon("ph-smiley")}`,
 				text: i18n.ts.customEmojis,
 				to: "/admin/emojis",
 				active: currentPage.value?.route.name === "emojis",
 			},
 			{
-				icon: "ph-planet ph-bold ph-lg",
+				icon: `${icon("ph-planet")}`,
 				text: i18n.ts.federation,
 				to: "/admin/federation",
 				active: currentPage.value?.route.name === "federation",
 			},
 			{
-				icon: "ph-queue ph-bold ph-lg",
+				icon: `${icon("ph-queue")}`,
 				text: i18n.ts.jobQueue,
 				to: "/admin/queue",
 				active: currentPage.value?.route.name === "queue",
 			},
 			{
-				icon: "ph-cloud ph-bold ph-lg",
+				icon: `${icon("ph-cloud")}`,
 				text: i18n.ts.files,
 				to: "/admin/files",
 				active: currentPage.value?.route.name === "files",
 			},
 			{
-				icon: "ph-megaphone-simple ph-bold ph-lg",
+				icon: `${icon("ph-megaphone-simple")}`,
 				text: i18n.ts.announcements,
 				to: "/admin/announcements",
 				active: currentPage.value?.route.name === "announcements",
 			},
 			{
-				icon: "ph-money ph-bold ph-lg",
+				icon: `${icon("ph-money")}`,
 				text: i18n.ts.ads,
 				to: "/admin/ads",
 				active: currentPage.value?.route.name === "ads",
 			},
 			{
-				icon: "ph-warning-circle ph-bold ph-lg",
+				icon: `${icon("ph-warning-circle")}`,
 				text: i18n.ts.abuseReports,
 				to: "/admin/abuses",
 				active: currentPage.value?.route.name === "abuses",
@@ -232,14 +233,14 @@ const menuDef = computed(() => [
 					title: i18n.ts.settings,
 					items: [
 						{
-							icon: "ph-gear-six ph-bold ph-lg",
+							icon: `${icon("ph-gear-six")}`,
 							text: i18n.ts.general,
 							to: "/admin/settings",
 							active:
 								currentPage.value?.route.name === "settings",
 						},
 						{
-							icon: "ph-envelope-simple-open ph-bold ph-lg",
+							icon: `${icon("ph-envelope-simple-open")}`,
 							text: i18n.ts.emailServer,
 							to: "/admin/email-settings",
 							active:
@@ -247,7 +248,7 @@ const menuDef = computed(() => [
 								"email-settings",
 						},
 						{
-							icon: "ph-cloud ph-bold ph-lg",
+							icon: `${icon("ph-cloud")}`,
 							text: i18n.ts.objectStorage,
 							to: "/admin/object-storage",
 							active:
@@ -255,20 +256,20 @@ const menuDef = computed(() => [
 								"object-storage",
 						},
 						{
-							icon: "ph-lock ph-bold ph-lg",
+							icon: `${icon("ph-lock")}`,
 							text: i18n.ts.security,
 							to: "/admin/security",
 							active:
 								currentPage.value?.route.name === "security",
 						},
 						{
-							icon: "ph-arrows-merge ph-bold ph-lg",
+							icon: `${icon("ph-arrows-merge")}`,
 							text: i18n.ts.relays,
 							to: "/admin/relays",
 							active: currentPage.value?.route.name === "relays",
 						},
 						{
-							icon: "ph-prohibit ph-bold ph-lg",
+							icon: `${icon("ph-prohibit")}`,
 							text: i18n.ts.instanceBlocking,
 							to: "/admin/instance-block",
 							active:
@@ -276,14 +277,14 @@ const menuDef = computed(() => [
 								"instance-block",
 						},
 						{
-							icon: "ph-hash ph-bold ph-lg",
+							icon: `${icon("ph-hash")}`,
 							text: i18n.ts.hiddenTags,
 							to: "/admin/hashtags",
 							active:
 								currentPage.value?.route.name === "hashtags",
 						},
 						{
-							icon: "ph-ghost ph-bold ph-lg",
+							icon: `${icon("ph-ghost")}`,
 							text: i18n.ts.proxyAccount,
 							to: "/admin/proxy-account",
 							active:
@@ -291,14 +292,14 @@ const menuDef = computed(() => [
 								"proxy-account",
 						},
 						{
-							icon: "ph-database ph-bold ph-lg",
+							icon: `${icon("ph-database")}`,
 							text: i18n.ts.database,
 							to: "/admin/database",
 							active:
 								currentPage.value?.route.name === "database",
 						},
 						{
-							icon: "ph-flask ph-bold ph-lg",
+							icon: `${icon("ph-flask")}`,
 							text: i18n.ts._experiments.title,
 							to: "/admin/experiments",
 							active:
@@ -401,28 +402,28 @@ const lookup = (ev) => {
 		[
 			{
 				text: i18n.ts.user,
-				icon: "ph-user ph-bold ph-lg",
+				icon: `${icon("ph-user")}`,
 				action: () => {
 					lookupUser();
 				},
 			},
 			{
 				text: i18n.ts.note,
-				icon: "ph-pencil ph-bold ph-lg",
+				icon: `${icon("ph-pencil")}`,
 				action: () => {
 					lookupNote();
 				},
 			},
 			{
 				text: i18n.ts.file,
-				icon: "ph-cloud ph-bold ph-lg",
+				icon: `${icon("ph-cloud")}`,
 				action: () => {
 					lookupFile();
 				},
 			},
 			{
 				text: i18n.ts.instance,
-				icon: "ph-planet ph-bold ph-lg",
+				icon: `${icon("ph-planet")}`,
 				action: () => {
 					lookupInstance();
 				},
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
index 3fa3452d8..fd80a1564 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -34,7 +34,7 @@
 				</FormTextarea>
 
 				<FormButton primary class="_formBlock" @click="save"
-					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					><i :class="icon('ph-floppy-disk-back')"></i>
 					{{ i18n.ts.save }}</FormButton
 				>
 			</FormSuspense>
@@ -53,6 +53,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const blockedHosts = ref("");
 const silencedHosts = ref("");
@@ -82,6 +83,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceBlocking,
-	icon: "ph-prohibit ph-bold ph-lg",
+	icon: `${icon("ph-prohibit")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index 52e347064..55532c612 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -80,7 +80,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-key ph-bold ph-lg"></i
+									><i :class="icon('ph-key')"></i
 								></template>
 								<template #label>Access key</template>
 							</FormInput>
@@ -91,7 +91,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-key ph-bold ph-lg"></i
+									><i :class="icon('ph-key')"></i
 								></template>
 								<template #label>Secret key</template>
 							</FormInput>
@@ -159,6 +159,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const useObjectStorage = ref(false);
 const objectStorageBaseUrl = ref<string | null>(null);
@@ -214,7 +215,7 @@ function save() {
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-check ph-bold ph-lg",
+		icon: `${icon("ph-check")}`,
 		text: i18n.ts.save,
 		handler: save,
 	},
@@ -224,6 +225,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.objectStorage,
-	icon: "ph-cloud ph-bold ph-lg",
+	icon: `${icon("ph-cloud")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index 523f05d6a..9d844a72a 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -20,6 +20,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 async function init() {
 	await os.api("admin/meta");
@@ -34,7 +35,7 @@ function save() {
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-check ph-bold ph-lg",
+		icon: `${icon("ph-check")}`,
 		text: i18n.ts.save,
 		handler: save,
 	},
@@ -44,6 +45,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 9c25d81b4..a9f918737 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -20,7 +20,7 @@
 			<div v-if="!fetching" class="items">
 				<div class="item _panel sub">
 					<div class="icon">
-						<i class="ph-download ph-bold ph-xl"></i>
+						<i :class="icon('ph-download ph-xl', false)"></i>
 					</div>
 					<div class="body">
 						<div class="value">
@@ -36,7 +36,7 @@
 				</div>
 				<div class="item _panel pub">
 					<div class="icon">
-						<i class="ph-upload ph-bold ph-xl"></i>
+						<i :class="icon('ph-upload ph-xl', false)"></i>
 					</div>
 					<div class="body">
 						<div class="value">
@@ -63,6 +63,7 @@ import number from "@/filters/number";
 import MkNumberDiff from "@/components/MkNumberDiff.vue";
 import { i18n } from "@/i18n";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import icon from "@/scripts/icon";
 
 const topSubInstancesForPie = ref<any>(null);
 const topPubInstancesForPie = ref<any>(null);
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
index 0dce60f3c..73e4ab386 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="wbrkwale">
 		<Transition
-			:name="$store.state.animation ? '_transition_zoom' : ''"
+			:name="defaultStore.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
 			<MkLoading v-if="fetching" />
@@ -27,6 +27,7 @@ import { ref } from "vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
+import { defaultStore } from "@/store";
 
 const instances = ref([]);
 const fetching = ref(true);
diff --git a/packages/client/src/pages/admin/overview.metrics.vue b/packages/client/src/pages/admin/overview.metrics.vue
index 0d97abb64..647e06675 100644
--- a/packages/client/src/pages/admin/overview.metrics.vue
+++ b/packages/client/src/pages/admin/overview.metrics.vue
@@ -4,7 +4,7 @@
 			<div class="_panel">
 				<XPie class="pie" :value="cpuUsage" />
 				<div>
-					<p><i class="ph-cpu ph-bold ph-lg"></i>CPU</p>
+					<p><i :class="icon('ph-cpu')"></i>CPU</p>
 					<p>{{ meta.cpu.cores }} Logical cores</p>
 					<p>{{ meta.cpu.model }}</p>
 				</div>
@@ -13,7 +13,7 @@
 			<div class="_panel">
 				<XPie class="pie" :value="memUsage" />
 				<div>
-					<p><i class="ph-microchip ph-bold ph-lg"></i>RAM</p>
+					<p><i :class="icon('ph-microchip')"></i>RAM</p>
 					<p>Total: {{ bytes(memTotal, 1) }}</p>
 					<p>Used: {{ bytes(memUsed, 1) }}</p>
 					<p>Free: {{ bytes(memFree, 1) }}</p>
@@ -23,7 +23,7 @@
 			<div class="_panel">
 				<XPie class="pie" :value="diskUsage" />
 				<div>
-					<p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
+					<p><i :class="icon('ph-hard-drives')"></i>Disk</p>
 					<p>Total: {{ bytes(diskTotal, 1) }}</p>
 					<p>Free: {{ bytes(diskAvailable, 1) }}</p>
 					<p>Used: {{ bytes(diskUsed, 1) }}</p>
@@ -33,9 +33,7 @@
 			<div class="_panel">
 				<XPie class="pie" :value="meiliProgress" />
 				<div>
-					<p>
-						<i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch
-					</p>
+					<p><i :class="icon('ph-file-search')"></i>MeiliSearch</p>
 					<p>
 						{{ i18n.ts._widgets.meiliStatus }}: {{ meiliAvailable }}
 					</p>
@@ -60,6 +58,7 @@ import bytes from "@/filters/bytes";
 import { stream } from "@/stream";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const meta = await os.api("server-info", {});
 const serverStats = await os.api("stats");
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
index c8af5e63f..507a2650a 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<Transition
-			:name="$store.state.animation ? '_transition_zoom' : ''"
+			:name="defaultStore.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
 			<MkLoading v-if="fetching" />
@@ -27,6 +27,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
 import * as os from "@/os";
+import { defaultStore } from "@/store";
 
 const moderators = ref<any>(null);
 const fetching = ref(true);
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 81d90d93e..ca5f102a5 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -1,14 +1,14 @@
 <template>
 	<div>
 		<Transition
-			:name="$store.state.animation ? '_transition_zoom' : ''"
+			:name="defaultStore.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
 			<MkLoading v-if="fetching" />
 			<div v-else :class="$style.root">
 				<div class="item _panel users">
 					<div class="icon">
-						<i class="ph-users ph-bold ph-xl"></i>
+						<i :class="icon('ph-users ph-xl', false)"></i>
 					</div>
 					<div class="body">
 						<div class="value">
@@ -27,7 +27,7 @@
 				</div>
 				<div class="item _panel notes">
 					<div class="icon">
-						<i class="ph-pencil ph-bold ph-xl"></i>
+						<i :class="icon('ph-pencil ph-xl', false)"></i>
 					</div>
 					<div class="body">
 						<div class="value">
@@ -46,7 +46,7 @@
 				</div>
 				<div class="item _panel instances">
 					<div class="icon">
-						<i class="ph-planet ph-bold ph-xl"></i>
+						<i :class="icon('ph-planet ph-xl', false)"></i>
 					</div>
 					<div class="body">
 						<div class="value">
@@ -60,7 +60,7 @@
 				</div>
 				<div class="item _panel online">
 					<div class="icon">
-						<i class="ph-broadcast ph-bold ph-xl"></i>
+						<i :class="icon('ph-broadcast ph-xl', false)"></i>
 					</div>
 					<div class="body">
 						<div class="value">
@@ -74,7 +74,7 @@
 				</div>
 				<div class="item _panel emojis">
 					<div class="icon">
-						<i class="ph-smiley ph-bold ph-xl"></i>
+						<i :class="icon('ph-smiley ph-xl', false)"></i>
 					</div>
 					<div class="body">
 						<div class="value">
@@ -99,6 +99,8 @@ import * as os from "@/os";
 import MkNumberDiff from "@/components/MkNumberDiff.vue";
 import MkNumber from "@/components/MkNumber.vue";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const stats = ref(null);
 const usersComparedToThePrevDay = ref<number>();
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index 6c9b36d2e..562645ab2 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.root">
 		<Transition
-			:name="$store.state.animation ? '_transition_zoom' : ''"
+			:name="defaultStore.state.animation ? '_transition_zoom' : ''"
 			mode="out-in"
 		>
 			<MkLoading v-if="fetching" />
@@ -24,6 +24,7 @@ import { ref } from "vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import { defaultStore } from "@/store";
 
 const newUsers = ref(null);
 const fetching = ref(true);
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index ed5dfa3ed..6a5e253bf 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -83,6 +83,7 @@ import { stream } from "@/stream";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import MkFolder from "@/components/MkFolder.vue";
+import icon from "@/scripts/icon";
 
 const rootEl = shallowRef<HTMLElement>();
 const serverInfo = ref<any>(null);
@@ -181,7 +182,7 @@ onBeforeUnmount(() => {
 
 definePageMetadata({
 	title: i18n.ts.dashboard,
-	icon: "ph-gauge ph-bold ph-lg",
+	icon: `${icon("ph-gauge")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/promotions.vue b/packages/client/src/pages/admin/promotions.vue
index 00ed3d926..7f3da4d18 100644
--- a/packages/client/src/pages/admin/promotions.vue
+++ b/packages/client/src/pages/admin/promotions.vue
@@ -44,7 +44,7 @@
 							primary
 							style="margin-right: 12px"
 							@click="save(ad)"
-							><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+							><i :class="icon('ph-floppy-disk-back')"></i>
 							{{ i18n.ts.save }}</MkButton
 						>
 						<MkButton
@@ -52,7 +52,7 @@
 							inline
 							danger
 							@click="remove(ad)"
-							><i class="ph-trash ph-bold ph-lg"></i>
+							><i :class="icon('ph-trash')"></i>
 							{{ i18n.ts.remove }}</MkButton
 						>
 					</div>
@@ -74,6 +74,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { formatDateTimeString } from "@/scripts/format-time-string";
+import icon from "@/scripts/icon";
 
 const ads = ref([]);
 
@@ -132,7 +133,7 @@ function save(ad) {
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.add,
 		handler: add,
 	},
@@ -142,7 +143,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.ads,
-	icon: "ph-money ph-bold ph-lg",
+	icon: `${icon("ph-money")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index 221362afb..4d0be071c 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -45,6 +45,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const proxyAccount = ref<any>(null);
 const proxyAccountId = ref<any>(null);
@@ -89,6 +90,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.proxyAccount,
-	icon: "ph-ghost ph-bold ph-lg",
+	icon: `${icon("ph-ghost")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index 28ea6b72e..be8b7f532 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -20,13 +20,14 @@ import XQueue from "./queue.chart.vue";
 import * as config from "@/config";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const tab = ref("deliver");
 
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-arrow-square-up-right ph-bold ph-lg",
+		icon: `${icon("ph-arrow-square-up-right")}`,
 		text: i18n.ts.dashboard,
 		handler: () => {
 			window.open(config.url + "/queue", "_blank");
@@ -38,17 +39,17 @@ const headerTabs = computed(() => [
 	{
 		key: "deliver",
 		title: "Deliver",
-		icon: "ph-upload ph-bold ph-lg",
+		icon: `${icon("ph-upload")}`,
 	},
 	{
 		key: "inbox",
 		title: "Inbox",
-		icon: "ph-download ph-bold ph-lg",
+		icon: `${icon("ph-download")}`,
 	},
 ]);
 
 definePageMetadata({
 	title: i18n.ts.jobQueue,
-	icon: "ph-queue ph-bold ph-lg",
+	icon: `${icon("ph-queue")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 1a6cc899f..6ffd4ae5b 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -17,16 +17,13 @@
 				<div class="status">
 					<i
 						v-if="relay.status === 'accepted'"
-						class="ph-check ph-bold ph-lg icon accepted"
+						:class="icon('ph-check icon accepted')"
 					></i>
 					<i
 						v-else-if="relay.status === 'rejected'"
-						class="ph-prohibit ph-bold ph-lg icon rejected"
-					></i>
-					<i
-						v-else
-						class="ph-clock ph-bold ph-lg icon requesting"
+						:class="icon('ph-prohibit icon rejected')"
 					></i>
+					<i v-else :class="icon('ph-clock icon requesting')"></i>
 					<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
 				</div>
 				<MkButton
@@ -34,7 +31,7 @@
 					inline
 					danger
 					@click="remove(relay.inbox)"
-					><i class="ph-trash ph-bold ph-lg"></i>
+					><i :class="icon('ph-trash')"></i>
 					{{ i18n.ts.remove }}</MkButton
 				>
 			</div>
@@ -49,6 +46,7 @@ import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const relays = ref([]);
 
@@ -99,7 +97,7 @@ refresh();
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.addRelay,
 		handler: addRelay,
 	},
@@ -109,7 +107,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.relays,
-	icon: "ph-arrows-merge ph-bold ph-lg",
+	icon: `${icon("ph-arrows-merge")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 860283745..dd8eff4fe 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -11,7 +11,7 @@
 				<div class="_formRoot">
 					<FormFolder class="_formBlock">
 						<template #icon
-							><i class="ph-robot ph-bold ph-lg"></i
+							><i :class="icon('ph-robot')"></i
 						></template>
 						<template #label>{{ i18n.ts.botProtection }}</template>
 						<template v-if="enableHcaptcha" #suffix
@@ -31,7 +31,7 @@
 
 					<FormFolder class="_formBlock">
 						<template #icon
-							><i class="ph-eye-slash ph-bold ph-lg"></i
+							><i :class="icon('ph-eye-slash')"></i
 						></template>
 						<template #label>{{
 							i18n.ts.sensitiveMediaDetection
@@ -131,9 +131,7 @@
 						-->
 
 							<FormButton primary class="_formBlock" @click="save"
-								><i
-									class="ph-floppy-disk-back ph-bold ph-lg"
-								></i>
+								><i :class="icon('ph-floppy-disk-back')"></i>
 								{{ i18n.ts.save }}</FormButton
 							>
 						</div>
@@ -187,15 +185,13 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-link-simple ph-bold ph-lg"></i
+									><i :class="icon('ph-link-simple')"></i
 								></template>
 								<template #label>Summaly Proxy URL</template>
 							</FormInput>
 
 							<FormButton primary class="_formBlock" @click="save"
-								><i
-									class="ph-floppy-disk-back ph-bold ph-lg"
-								></i>
+								><i :class="icon('ph-floppy-disk-back')"></i>
 								{{ i18n.ts.save }}</FormButton
 							>
 						</div>
@@ -241,9 +237,7 @@
 								primary
 								class="_formBlock"
 								@click="saveInstance"
-								><i
-									class="ph-floppy-disk-back ph-bold ph-lg"
-								></i>
+								><i :class="icon('ph-floppy-disk-back')"></i>
 								{{ i18n.ts.save }}</FormButton
 							>
 						</div>
@@ -270,6 +264,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const summalyProxy = ref("");
 const enableHcaptcha = ref(false);
@@ -356,6 +351,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: "ph-lock ph-bold ph-lg",
+	icon: `${icon("ph-lock")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index 27f45e524..8de9f749e 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -24,7 +24,7 @@
 
 						<FormInput v-model="tosUrl" class="_formBlock">
 							<template #prefix
-								><i class="ph-link-simple ph-bold ph-lg"></i
+								><i :class="icon('ph-link-simple')"></i
 							></template>
 							<template #label>{{ i18n.ts.tosUrl }}</template>
 						</FormInput>
@@ -46,7 +46,7 @@
 							>
 								<template #prefix
 									><i
-										class="ph-envelope-simple-open ph-bold ph-lg"
+										:class="icon('ph-envelope-simple-open')"
 									></i
 								></template>
 								<template #label>{{
@@ -59,7 +59,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-hand-heart ph-bold ph-lg"></i
+									><i :class="icon('ph-hand-heart')"></i
 								></template>
 								<template #label>{{
 									i18n.ts.donationLink
@@ -167,7 +167,7 @@
 
 							<FormInput v-model="iconUrl" class="_formBlock">
 								<template #prefix
-									><i class="ph-link-simple ph-bold ph-lg"></i
+									><i :class="icon('ph-link-simple')"></i
 								></template>
 								<template #label>{{
 									i18n.ts.iconUrl
@@ -176,7 +176,7 @@
 
 							<FormInput v-model="bannerUrl" class="_formBlock">
 								<template #prefix
-									><i class="ph-link-simple ph-bold ph-lg"></i
+									><i :class="icon('ph-link-simple')"></i
 								></template>
 								<template #label>{{
 									i18n.ts.bannerUrl
@@ -188,7 +188,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-link-simple ph-bold ph-lg"></i
+									><i :class="icon('ph-link-simple')"></i
 								></template>
 								<template #label>{{
 									i18n.ts.logoImageUrl
@@ -200,7 +200,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-link-simple ph-bold ph-lg"></i
+									><i :class="icon('ph-link-simple')"></i
 								></template>
 								<template #label>{{
 									i18n.ts.backgroundImageUrl
@@ -209,7 +209,7 @@
 
 							<FormInput v-model="themeColor" class="_formBlock">
 								<template #prefix
-									><i class="ph-paconstte ph-bold ph-lg"></i
+									><i :class="icon('ph-paconstte')"></i
 								></template>
 								<template #label>{{
 									i18n.ts.themeColor
@@ -338,7 +338,7 @@
 									class="_formBlock"
 								>
 									<template #prefix
-										><i class="ph-key ph-bold ph-lg"></i
+										><i :class="icon('ph-key')"></i
 									></template>
 									<template #label>Public key</template>
 								</FormInput>
@@ -348,7 +348,7 @@
 									class="_formBlock"
 								>
 									<template #prefix
-										><i class="ph-key ph-bold ph-lg"></i
+										><i :class="icon('ph-key')"></i
 									></template>
 									<template #label>Private key</template>
 								</FormInput>
@@ -384,7 +384,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-key ph-bold ph-lg"></i
+									><i :class="icon('ph-key')"></i
 								></template>
 								<template #label>DeepL Auth Key</template>
 							</FormInput>
@@ -401,7 +401,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-link ph-bold ph-lg"></i
+									><i :class="icon('ph-link')"></i
 								></template>
 								<template #label
 									>Libre Translate API URL</template
@@ -413,7 +413,7 @@
 								class="_formBlock"
 							>
 								<template #prefix
-									><i class="ph-key ph-bold ph-lg"></i
+									><i :class="icon('ph-key')"></i
 								></template>
 								<template #label
 									>Libre Translate API Key</template
@@ -441,6 +441,7 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const name = ref<string | null>(null);
 const description = ref<string | null>(null);
@@ -576,7 +577,7 @@ function save() {
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-check ph-bold ph-lg",
+		icon: `${icon("ph-check")}`,
 		text: i18n.ts.save,
 		handler: save,
 	},
@@ -586,6 +587,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 });
 </script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 07eebe946..56855a8ea 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -132,6 +132,7 @@ import { lookupUser } from "@/scripts/lookup-user";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import icon from "@/scripts/icon";
 
 const paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
@@ -185,19 +186,19 @@ function show(user) {
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-magnifying-glass ph-bold ph-lg",
+		icon: `${icon("ph-magnifying-glass")}`,
 		text: i18n.ts.search,
 		handler: searchUser,
 	},
 	{
 		asFullButton: true,
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.addUser,
 		handler: addUser,
 	},
 	{
 		asFullButton: true,
-		icon: "ph-magnifying-glass ph-bold ph-lg",
+		icon: `${icon("ph-magnifying-glass")}`,
 		text: i18n.ts.lookup,
 		handler: lookupUser,
 	},
@@ -208,7 +209,7 @@ const headerTabs = computed(() => []);
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.users,
-		icon: "ph-users ph-bold ph-lg",
+		icon: `${icon("ph-users")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index bf4f099fc..7dfb4e64b 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -38,7 +38,7 @@
 					</div>
 					<div v-if="$i && !announcement.isRead" class="_footer">
 						<MkButton primary @click="read(announcement.id)"
-							><i class="ph-check ph-bold ph-lg"></i>
+							><i :class="icon('ph-check')"></i>
 							{{ i18n.ts.gotIt }}</MkButton
 						>
 					</div>
@@ -55,6 +55,7 @@ import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const pagination = {
 	endpoint: "announcements" as const,
@@ -77,7 +78,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: "ph-megaphone-simple ph-bold ph-lg",
+	icon: `${icon("ph-megaphone-simple")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 2ce66793f..1c1b54307 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -30,6 +30,7 @@ import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -78,7 +79,7 @@ const headerActions = computed(() =>
 	antenna.value
 		? [
 				{
-					icon: "ph-gear-six ph-bold ph-lg",
+					icon: `${icon("ph-gear-six")}`,
 					text: i18n.ts.settings,
 					handler: settings,
 				},
@@ -93,7 +94,7 @@ definePageMetadata(
 		antenna.value
 			? {
 					title: antenna.value.name,
-					icon: "ph-flying-saucer ph-bold ph-lg",
+					icon: `${icon("ph-flying-saucer")}`,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index 80d9a4d03..63957c115 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -28,7 +28,7 @@
 					>
 						<template v-if="sending"><MkEllipsis /></template>
 						<template v-else
-							><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+							><i :class="icon('ph-paper-plane-tilt')"></i>
 							Send</template
 						>
 					</MkButton>
@@ -53,6 +53,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import MkSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const body = ref("{}");
 const endpoint = ref("");
@@ -116,6 +117,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: "API console",
-	icon: "ph-terminal-window ph-bold ph-lg",
+	icon: `${icon("ph-terminal-window")}`,
 });
 </script>
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index c3dd749f3..8406cc052 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -15,20 +15,20 @@
 
 				<div class="banner">
 					<MkButton v-if="bannerId == null" @click="setBannerImage"
-						><i class="ph-plus ph-bold ph-lg"></i>
+						><i :class="icon('ph-plus')"></i>
 						{{ i18n.ts._channel.setBanner }}</MkButton
 					>
 					<div v-else-if="bannerUrl">
 						<img :src="bannerUrl" style="width: 100%" />
 						<MkButton @click="removeBannerImage()"
-							><i class="ph-trash ph-bold ph-lg"></i>
+							><i :class="icon('ph-trash')"></i>
 							{{ i18n.ts._channel.removeBanner }}</MkButton
 						>
 					</div>
 				</div>
 				<div class="_formBlock">
 					<MkButton primary @click="save()"
-						><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+						><i :class="icon('ph-floppy-disk-back')"></i>
 						{{
 							channelId ? i18n.ts.save : i18n.ts.create
 						}}</MkButton
@@ -49,6 +49,7 @@ import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -131,11 +132,11 @@ definePageMetadata(
 		props.channelId
 			? {
 					title: i18n.ts._channel.edit,
-					icon: "ph-television ph-bold ph-lg",
+					icon: `${icon("ph-television")}`,
 			  }
 			: {
 					title: i18n.ts._channel.create,
-					icon: "ph-television ph-bold ph-lg",
+					icon: `${icon("ph-television")}`,
 			  },
 	),
 );
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 6269f3eee..e84b0e1d4 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -22,10 +22,10 @@
 						@click="() => (showBanner = !showBanner)"
 					>
 						<template v-if="showBanner"
-							><i class="ph-caret-up ph-bold ph-lg"></i
+							><i :class="icon('ph-caret-up')"></i
 						></template>
 						<template v-else
-							><i class="ph-caret-down ph-bold ph-lg"></i
+							><i :class="icon('ph-caret-down')"></i
 						></template>
 					</button>
 					<div v-if="!showBanner" class="hideOverlay"></div>
@@ -39,9 +39,7 @@
 					>
 						<div class="status">
 							<div>
-								<i
-									class="ph-users ph-bold ph-lg ph-fw ph-lg"
-								></i
+								<i :class="icon('ph-users ph-fw')"></i
 								><I18n
 									:src="i18n.ts._channel.usersCount"
 									tag="span"
@@ -54,9 +52,7 @@
 								>
 							</div>
 							<div>
-								<i
-									class="ph-pencil ph-bold ph-lg ph-fw ph-lg"
-								></i
+								<i :class="icon('ph-pencil ph-fw')"></i
 								><I18n
 									:src="i18n.ts._channel.notesCount"
 									tag="span"
@@ -110,6 +106,7 @@ import { useRouter } from "@/router";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -138,7 +135,7 @@ const headerActions = computed(() => [
 	...(channel.value && channel.value?.userId === $i?.id
 		? [
 				{
-					icon: "ph-gear-six ph-bold ph-lg",
+					icon: `${icon("ph-gear-six")}`,
 					text: i18n.ts.edit,
 					handler: edit,
 				},
@@ -153,7 +150,7 @@ definePageMetadata(
 		channel.value
 			? {
 					title: channel.value.name,
-					icon: "ph-television ph-bold ph-lg",
+					icon: `${icon("ph-television")}`,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 05e481789..ec92af54a 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -35,9 +35,7 @@
 							type="search"
 						>
 							<template #prefix
-								><i
-									class="ph-magnifying-glass ph-bold ph-lg"
-								></i
+								><i :class="icon('ph-magnifying-glass')"></i
 							></template>
 						</MkInput>
 						<MkRadios
@@ -97,7 +95,7 @@
 				<swiper-slide>
 					<div class="_content grwlizim owned">
 						<MkButton class="new" @click="create()"
-							><i class="ph-plus ph-bold ph-lg"></i
+							><i :class="icon('ph-plus')"></i
 						></MkButton>
 						<MkChannelList
 							key="owned"
@@ -124,6 +122,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -181,7 +180,7 @@ function create() {
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.create,
 		handler: create,
 	},
@@ -191,29 +190,29 @@ const headerTabs = computed(() => [
 	{
 		key: "search",
 		title: i18n.ts.search,
-		icon: "ph-magnifying-glass ph-bold ph-lg",
+		icon: `${icon("ph-magnifying-glass")}`,
 	},
 	{
 		key: "featured",
 		title: i18n.ts._channel.featured,
-		icon: "ph-fire-simple ph-bold ph-lg",
+		icon: `${icon("ph-fire-simple")}`,
 	},
 	{
 		key: "following",
 		title: i18n.ts._channel.following,
-		icon: "ph-heart ph-bold ph-lg",
+		icon: `${icon("ph-heart")}`,
 	},
 	{
 		key: "owned",
 		title: i18n.ts._channel.owned,
-		icon: "ph-crown-simple ph-bold ph-lg",
+		icon: `${icon("ph-crown-simple")}`,
 	},
 ]);
 
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.channel,
-		icon: "ph-television ph-bold ph-lg",
+		icon: `${icon("ph-television")}`,
 	})),
 );
 
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index e5e0305e6..7d8a2c27b 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -35,6 +35,7 @@ import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	clipId: string;
@@ -71,7 +72,7 @@ const headerActions = computed(() =>
 	clip.value && isOwned.value
 		? [
 				{
-					icon: "ph-pencil ph-bold ph-lg",
+					icon: `${icon("ph-pencil")}`,
 					text: i18n.ts.edit,
 					handler: async (): Promise<void> => {
 						const { canceled, result } = await os.form(
@@ -105,7 +106,7 @@ const headerActions = computed(() =>
 					},
 				},
 				{
-					icon: "ph-trash ph-bold ph-lg",
+					icon: `${icon("ph-trash")}`,
 					text: i18n.ts.delete,
 					danger: true,
 					handler: async (): Promise<void> => {
@@ -131,7 +132,7 @@ definePageMetadata(
 		clip.value
 			? {
 					title: clip.value.name,
-					icon: "ph-paperclip ph-bold ph-lg",
+					icon: `${icon("ph-paperclip")}`,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 842b49ca0..d0b53e309 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -9,13 +9,14 @@ import { computed, ref } from "vue";
 import XDrive from "@/components/MkDrive.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const folder = ref(null);
 
 definePageMetadata(
 	computed(() => ({
 		title: folder.value ? folder.value.name : i18n.ts.drive,
-		icon: "ph-cloud ph-bold ph-lg",
+		icon: `${icon("ph-cloud")}`,
 		hideHeader: true,
 	})),
 );
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index ed7d3a3c7..c1edd640d 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -12,6 +12,7 @@
 import * as os from "@/os";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	emoji: Record<string, unknown>; // TODO
@@ -26,7 +27,7 @@ function menu(ev) {
 			},
 			{
 				text: i18n.ts.copy,
-				icon: "ph-clipboard-text ph-bold ph-lg",
+				icon: `${icon("ph-clipboard-text")}`,
 				action: () => {
 					copyToClipboard(`:${props.emoji.name}:`);
 					os.success();
@@ -34,7 +35,7 @@ function menu(ev) {
 			},
 			{
 				text: i18n.ts.license,
-				icon: "ph-info ph-bold ph-lg",
+				icon: `${icon("ph-info")}`,
 				action: () => {
 					os.apiGet("emoji", { name: props.emoji.name }).then(
 						(res) => {
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 74134fdbb..89dd1efdf 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -1,4 +1,3 @@
-4.8 KiB
 <template>
 	<MkSpacer :content-max="1200">
 		<MkTab v-model="origin" style="margin-bottom: var(--margin)">
@@ -10,7 +9,7 @@
 				<MkFolder class="_gap" persist-key="explore-pinned-users">
 					<template #header
 						><i
-							class="ph-bookmark ph-bold ph-lg ph-fw"
+							:class="icon('ph-bookmark ph-fw')"
 							style="margin-right: 0.5em"
 						></i
 						>{{ i18n.ts.pinnedUsers }}</template
@@ -24,7 +23,7 @@
 				>
 					<template #header
 						><i
-							class="ph-chart-line-up ph-bold ph-lg ph-fw"
+							:class="icon('ph-chart-line-up ph-fw')"
 							style="margin-right: 0.5em"
 						></i
 						>{{ i18n.ts.popularUsers }}</template
@@ -38,7 +37,7 @@
 				>
 					<template #header
 						><i
-							class="ph-activity ph-bold ph-lg ph-fw"
+							:class="icon('ph-activity ph-fw')"
 							style="margin-right: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyUpdatedUsers }}</template
@@ -52,7 +51,7 @@
 				>
 					<template #header
 						><i
-							class="ph-butterfly ph-bold ph-lg ph-fw"
+							:class="icon('ph-butterfly ph-fw')"
 							style="margin-right: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyRegisteredUsers }}</template
@@ -70,7 +69,7 @@
 			>
 				<template #header
 					><i
-						class="ph-compass ph-bold ph-lg ph-fw"
+						:class="icon('ph-compass ph-fw')"
 						style="margin-right: 0.5em"
 					></i
 					>{{ i18n.ts.popularTags }}</template
@@ -96,7 +95,7 @@
 			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
 				<template #header
 					><i
-						class="ph-hash ph-bold ph-lg ph-fw"
+						:class="icon('ph-hash ph-fw')"
 						style="margin-right: 0.5em"
 					></i
 					>{{ tag }}</template
@@ -108,7 +107,7 @@
 				<MkFolder class="_gap">
 					<template #header
 						><i
-							class="ph-chart-line-up ph-bold ph-lg ph-fw"
+							:class="icon('ph-chart-line-up ph-fw')"
 							style="margin-right: 0.5em"
 						></i
 						>{{ i18n.ts.popularUsers }}</template
@@ -118,7 +117,7 @@
 				<MkFolder class="_gap">
 					<template #header
 						><i
-							class="ph-activity ph-bold ph-lg ph-fw"
+							:class="icon('ph-activity ph-fw')"
 							style="margin-right: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyUpdatedUsers }}</template
@@ -128,7 +127,7 @@
 				<MkFolder class="_gap">
 					<template #header
 						><i
-							class="ph-rocket-launch ph-bold ph-lg ph-fw"
+							:class="icon('ph-rocket-launch ph-fw')"
 							style="margin-right: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyDiscoveredUsers }}</template
@@ -148,6 +147,7 @@ import MkTab from "@/components/MkTab.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	tag?: string;
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index a6e9fc752..6087b92d3 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -46,6 +46,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -58,12 +59,12 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => [
 	{
 		key: "users",
-		icon: "ph-users ph-bold ph-lg",
+		icon: `${icon("ph-users")}`,
 		title: i18n.ts.users,
 	},
 	{
 		key: "featured",
-		icon: "ph-lightning ph-bold ph-lg",
+		icon: `${icon("ph-lightning")}`,
 		title: i18n.ts.featured,
 	},
 ]);
@@ -71,7 +72,7 @@ const headerTabs = computed(() => [
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.explore,
-		icon: "ph-compass ph-bold ph-lg",
+		icon: `${icon("ph-compass")}`,
 	})),
 );
 
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 74aac739e..f9fb36f29 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -41,6 +41,7 @@ import XNote from "@/components/MkNote.vue";
 import XList from "@/components/MkDateSeparatedList.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const pagination = {
 	endpoint: "i/favorites" as const,
@@ -51,7 +52,7 @@ const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 definePageMetadata({
 	title: i18n.ts.favorites,
-	icon: "ph-bookmark-simple ph-bold ph-lg",
+	icon: `${icon("ph-bookmark-simple")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index e8cb6617a..68d0ce78c 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -62,14 +62,14 @@
 										:aria-label="i18n.t('accept')"
 										@click="accept(req.follower)"
 									>
-										<i class="ph-check ph-bold ph-lg"></i>
+										<i :class="icon('ph-check')"></i>
 									</button>
 									<button
 										class="_button"
 										:aria-label="i18n.t('reject')"
 										@click="reject(req.follower)"
 									>
-										<i class="ph-x ph-bold ph-lg"></i>
+										<i :class="icon('ph-x')"></i>
 									</button>
 								</div>
 							</div>
@@ -89,6 +89,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
+import icon from "@/scripts/icon";
 
 const paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
@@ -113,7 +114,7 @@ function reject(user) {
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.followRequests,
-		icon: "ph-hand-waving ph-bold ph-lg",
+		icon: `${icon("ph-hand-waving")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index 7b444c624..330a12f2a 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -31,11 +31,11 @@
 							:aria-label="i18n.t('remove')"
 							@click="remove(file)"
 						>
-							<i class="ph-x ph-bold ph-lg"></i>
+							<i :class="icon('ph-x')"></i>
 						</button>
 					</div>
 					<FormButton primary @click="selectFile"
-						><i class="ph-plus ph-bold ph-lg"></i>
+						><i :class="icon('ph-plus')"></i>
 						{{ i18n.ts.attachFile }}</FormButton
 					>
 				</div>
@@ -45,16 +45,16 @@
 				}}</FormSwitch>
 
 				<FormButton v-if="postId" primary @click="save"
-					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					><i :class="icon('ph-floppy-disk-back')"></i>
 					{{ i18n.ts.save }}</FormButton
 				>
 				<FormButton v-else primary @click="save"
-					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					><i :class="icon('ph-floppy-disk-back')"></i>
 					{{ i18n.ts.publish }}</FormButton
 				>
 
 				<FormButton v-if="postId" danger @click="del"
-					><i class="ph-trash ph-bold ph-lg"></i>
+					><i :class="icon('ph-trash')"></i>
 					{{ i18n.ts.delete }}</FormButton
 				>
 			</FormSuspense>
@@ -74,6 +74,7 @@ import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -159,11 +160,11 @@ definePageMetadata(
 		props.postId
 			? {
 					title: i18n.ts.edit,
-					icon: "ph-pencil ph-bold ph-lg",
+					icon: `${icon("ph-pencil")}`,
 			  }
 			: {
 					title: i18n.ts.postToGallery,
-					icon: "ph-pencil ph-bold ph-lg",
+					icon: `${icon("ph-pencil")}`,
 			  },
 	),
 );
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index dc87fbca4..1857ffbf4 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -27,7 +27,7 @@
 				<swiper-slide v-if="true">
 					<MkFolder class="_gap">
 						<template #header
-							><i class="ph-clock ph-bold ph-lg"></i>
+							><i :class="icon('ph-clock')"></i>
 							{{ i18n.ts.recentPosts }}</template
 						>
 						<MkPagination
@@ -47,7 +47,7 @@
 					</MkFolder>
 					<MkFolder class="_gap">
 						<template #header
-							><i class="ph-fire-simple ph-bold ph-lg"></i>
+							><i :class="icon('ph-fire-simple')"></i>
 							{{ i18n.ts.popularPosts }}</template
 						>
 						<MkPagination
@@ -83,7 +83,7 @@
 				</swiper-slide>
 				<swiper-slide v-if="true">
 					<MkA to="/gallery/new" class="_link" style="margin: 16px"
-						><i class="ph-plus ph-bold ph-lg"></i>
+						><i :class="icon('ph-plus')"></i>
 						{{ i18n.ts.postToGallery }}</MkA
 					>
 					<MkPagination
@@ -117,6 +117,7 @@ import { deviceKind } from "@/scripts/device-kind";
 import { i18n } from "@/i18n";
 import { useRouter } from "@/router";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -158,7 +159,7 @@ watch(
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.create,
 		handler: () => {
 			router.push("/gallery/new");
@@ -170,23 +171,23 @@ const headerTabs = computed(() => [
 	{
 		key: "explore",
 		title: i18n.ts.gallery,
-		icon: "ph-image-square ph-bold ph-lg",
+		icon: `${icon("ph-image-square")}`,
 	},
 	{
 		key: "liked",
 		title: i18n.ts._gallery.liked,
-		icon: "ph-heart ph-bold ph-lg",
+		icon: `${icon("ph-heart")}`,
 	},
 	{
 		key: "my",
 		title: i18n.ts._gallery.my,
-		icon: "ph-crown-simple ph-bold ph-lg",
+		icon: `${icon("ph-crown-simple")}`,
 	},
 ]);
 
 definePageMetadata({
 	title: i18n.ts.gallery,
-	icon: "ph-image-square ph-bold ph-lg",
+	icon: `${icon("ph-image-square")}`,
 });
 
 let swiperRef = null;
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 9826bcb1f..78f497a82 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -6,7 +6,7 @@
 		<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
 			<div class="_root">
 				<transition
-					:name="$store.state.animation ? 'fade' : ''"
+					:name="defaultStore.state.animation ? 'fade' : ''"
 					mode="out-in"
 				>
 					<div v-if="post" class="rkxwuolj">
@@ -25,7 +25,7 @@
 								<Mfm :text="post.description" />
 							</div>
 							<div class="info">
-								<i class="ph-clock ph-bold ph-lg"></i>
+								<i :class="icon('ph-clock')"></i>
 								<MkTime :time="post.createdAt" mode="detail" />
 							</div>
 							<div class="actions">
@@ -36,7 +36,7 @@
 										class="button"
 										primary
 										@click="unlike()"
-										><i class="ph-heart ph-fill ph-lg"></i
+										><i class="ph-heart ph-fill"></i
 										><span
 											v-if="post.likedCount > 0"
 											class="count"
@@ -48,7 +48,7 @@
 										v-tooltip="i18n.ts._gallery.like"
 										class="button"
 										@click="like()"
-										><i class="ph-heart ph-bold"></i
+										><i :class="icon('ph-heart', false)"></i
 										><span
 											v-if="post.likedCount > 0"
 											class="count"
@@ -64,9 +64,7 @@
 										class="_button"
 										@click="edit"
 									>
-										<i
-											class="ph-pencil ph-bold ph-lg ph-fw ph-lg"
-										></i>
+										<i :class="icon('ph-pencil ph-fw')"></i>
 									</button>
 									<button
 										v-tooltip="i18n.ts.shareWithNote"
@@ -75,7 +73,9 @@
 										@click="shareWithNote"
 									>
 										<i
-											class="ph-rocket-launch ph-bold ph-lg ph-fw ph-lg"
+											:class="
+												icon('ph-rocket-launch ph-fw')
+											"
 										></i>
 									</button>
 									<button
@@ -86,7 +86,9 @@
 										@click="share"
 									>
 										<i
-											class="ph-share-network ph-bold ph-lg ph-fw ph-lg"
+											:class="
+												icon('ph-share-network ph-fw')
+											"
 										></i>
 									</button>
 								</div>
@@ -118,7 +120,7 @@
 							class="other"
 						>
 							<template #header
-								><i class="ph-clock ph-bold ph-lg"></i>
+								><i :class="icon('ph-clock')"></i>
 								{{ i18n.ts.recentPosts }}</template
 							>
 							<MkPagination
@@ -157,6 +159,8 @@ import { useRouter } from "@/router";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { shareAvailable } from "@/scripts/share-available";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -227,7 +231,7 @@ watch(() => props.postId, fetchPost, { immediate: true });
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-pencil ph-bold ph-lg",
+		icon: `${icon("ph-pencil")}`,
 		text: i18n.ts.edit,
 		handler: edit,
 	},
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 6a5e8c6e9..e3e727539 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -111,9 +111,7 @@
 								>
 							</FormSuspense>
 							<MkButton @click="refreshMetadata"
-								><i
-									class="ph-arrows-clockwise ph-bold ph-lg"
-								></i>
+								><i :class="icon('ph-arrows-clockwise')"></i>
 								Refresh metadata</MkButton
 							>
 						</FormSection>
@@ -359,9 +357,10 @@ import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
 import MkPagination from "@/components/MkPagination.vue";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
-import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 type AugmentedInstanceMetadata = firefish.entities.DetailedInstanceMetadata & {
 	blockedHosts: string[];
@@ -471,7 +470,7 @@ fetch();
 const headerActions = computed(() => [
 	{
 		text: `https://${props.host}`,
-		icon: "ph-arrow-square-out ph-bold ph-lg",
+		icon: `${icon("ph-arrow-square-out")}`,
 		handler: () => {
 			window.open(`https://${props.host}`, "_blank");
 		},
@@ -482,7 +481,7 @@ const theTabs = [
 	{
 		key: "overview",
 		title: i18n.ts.overview,
-		icon: "ph-info ph-bold ph-lg",
+		icon: `${icon("ph-info")}`,
 	},
 ];
 
@@ -491,17 +490,17 @@ if (iAmAdmin) {
 		{
 			key: "chart",
 			title: i18n.ts.charts,
-			icon: "ph-chart-bar ph-bold ph-lg",
+			icon: `${icon("ph-chart-bar")}`,
 		},
 		{
 			key: "users",
 			title: i18n.ts.users,
-			icon: "ph-users ph-bold ph-lg",
+			icon: `${icon("ph-users")}`,
 		},
 		{
 			key: "raw",
 			title: "Raw",
-			icon: "ph-code ph-bold ph-lg",
+			icon: `${icon("ph-code")}`,
 		},
 	);
 }
@@ -510,7 +509,7 @@ const headerTabs = computed(() => theTabs);
 
 definePageMetadata({
 	title: props.host,
-	icon: "ph-hard-drives ph-bold ph-lg",
+	icon: `${icon("ph-hard-drives")}`,
 });
 
 let swiperRef = null;
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 6f0498685..1649a6c31 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -31,7 +31,7 @@
 								primary
 								class="start"
 								@click="startUser"
-								><i class="ph-plus ph-bold ph-lg"></i>
+								><i :class="icon('ph-plus')"></i>
 								{{ i18n.ts.startMessaging }}</MkButton
 							>
 							<MkPagination
@@ -56,7 +56,7 @@
 									:link="true"
 									to="/my/groups"
 									><i
-										class="ph-user-circle-gear ph-bold ph-lg"
+										:class="icon('ph-user-circle-gear')"
 									></i>
 									{{ i18n.ts.manageGroups }}</MkButton
 								>
@@ -64,7 +64,7 @@
 									primary
 									class="start"
 									@click="startGroup"
-									><i class="ph-plus ph-bold ph-lg"></i>
+									><i :class="icon('ph-plus')"></i>
 									{{ i18n.ts.startMessaging }}</MkButton
 								>
 							</div>
@@ -103,6 +103,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
 import { deviceKind } from "@/scripts/device-kind";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -130,7 +131,7 @@ async function readAllMessagingMessages() {
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-check ph-bold ph-lg",
+		icon: `${icon("ph-check")}`,
 		text: i18n.ts.markAllAsRead,
 		handler: readAllMessagingMessages,
 	},
@@ -140,18 +141,18 @@ const headerTabs = computed(() => [
 	{
 		key: "dms",
 		title: i18n.ts._messaging.dms,
-		icon: "ph-user ph-bold ph-lg",
+		icon: `${icon("ph-user")}`,
 	},
 	{
 		key: "groups",
 		title: i18n.ts._messaging.groups,
-		icon: "ph-users-three ph-bold ph-lg",
+		icon: `${icon("ph-users-three")}`,
 	},
 ]);
 
 definePageMetadata({
 	title: i18n.ts.messaging,
-	icon: "ph-chats-teardrop ph-bold ph-lg",
+	icon: `${icon("ph-chats-teardrop")}`,
 });
 
 const dmsPagination = {
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 35226f10b..4b3e03d3e 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -22,14 +22,14 @@
 					:aria-label="i18n.t('attachFile')"
 					@click="chooseFile"
 				>
-					<i class="ph-upload ph-bold ph-lg"></i>
+					<i :class="icon('ph-upload')"></i>
 				</button>
 				<button
 					class="_button"
 					:aria-label="i18n.t('chooseEmoji')"
 					@click="insertEmoji"
 				>
-					<i class="ph-smiley ph-bold ph-lg"></i>
+					<i :class="icon('ph-smiley')"></i>
 				</button>
 				<button
 					class="send _button"
@@ -39,13 +39,9 @@
 					@click="send"
 				>
 					<template v-if="!sending"
-						><i
-							class="ph-paper-plane-tilt ph-bold ph-lg"
-						></i></template
+						><i :class="icon('ph-paper-plane-tilt')"></i></template
 					><template v-if="sending"
-						><i
-							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
-						></i
+						><i :class="icon('ph-circle-notch fa-pulse ph-fw')"></i
 					></template>
 				</button>
 			</div>
@@ -68,6 +64,7 @@ import { stream } from "@/stream";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { uploadFile } from "@/scripts/upload";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	user?: firefish.entities.UserDetailed | null;
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 74dce0a00..6094d2b4b 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -16,7 +16,7 @@
 				>
 					<i
 						style="color: var(--accentLighten)"
-						class="ph-x-circle ph-fill ph-lg"
+						class="ph-x-circle ph-fill"
 					></i>
 				</button>
 				<div v-if="!message.isDeleted" class="content">
@@ -74,7 +74,7 @@
 				</template>
 				<MkTime :time="message.createdAt" />
 				<template v-if="message.is_edited"
-					><i class="ph-pencil ph-bold ph-lg"></i
+					><i :class="icon('ph-pencil')"></i
 				></template>
 			</footer>
 		</div>
@@ -92,6 +92,7 @@ import MkUrlPreview from "@/components/MkUrlPreview.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	message: firefish.entities.MessagingMessage;
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index c1ea9f641..6655c5be8 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -77,7 +77,7 @@
 								@click="onIndicatorClick"
 							>
 								<i
-									class="fas ph-fw ph-lg ph-arrow-circle-down-bold ph-lg"
+									class="fas ph-fw ph-arrow-circle-down-bold ph-lg"
 								></i
 								>{{ i18n.ts.newMessageExists }}
 							</button>
@@ -125,6 +125,7 @@ import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { defaultStore } from "@/store";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	userAcct?: string;
@@ -353,7 +354,7 @@ onMounted(() => {
 	definePageMetadata(
 		computed(() => ({
 			title: group.value != null ? group.value.name : user.value?.name,
-			icon: "ph-chats-teardrop-bold ph-lg",
+			icon: `${icon("ph-chats-teardrop-bold")}`,
 		})),
 	);
 });
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index ea61667a5..4e8aee6b8 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -448,6 +448,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
+import icon from "@/scripts/icon";
 
 defineProps<{
 	popup?: boolean;
@@ -534,7 +535,7 @@ const preview_fade = ref(
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,
-	icon: "ph-question ph-bold ph-lg",
+	icon: `${icon("ph-question")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index a03fce16e..9d1e3fe6b 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -40,7 +40,7 @@
 							"
 						>
 							<i
-								class="ph-shield-warning ph-bold ph-xl"
+								:class="icon('ph-shield-warning ph-xl', false)"
 								style="margin-right: 0.5rem"
 							></i>
 							{{ i18n.ts._permissions.allPermissions }}
@@ -53,8 +53,7 @@
 							:class="[$style.permission]"
 						>
 							<i
-								:class="[`ph-${getIcon(p)}`]"
-								class="ph-bold ph-xl"
+								:class="icon(`ph-${getIcon(p)} ph-xl`, false)"
 								style="margin-right: 0.5rem"
 							></i>
 							{{ i18n.t(`_permissions.${p}`) }}
@@ -86,6 +85,7 @@ import * as os from "@/os";
 import { $i, login } from "@/account";
 import { appendQuery, query } from "@/scripts/url";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	session: string;
diff --git a/packages/client/src/pages/my-antennas/create.vue b/packages/client/src/pages/my-antennas/create.vue
index 0a6aed112..33f129888 100644
--- a/packages/client/src/pages/my-antennas/create.vue
+++ b/packages/client/src/pages/my-antennas/create.vue
@@ -13,6 +13,7 @@ import XAntenna from "./editor.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { useRouter } from "@/router";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -37,6 +38,6 @@ function onAntennaCreated() {
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: "ph-flying-saucer ph-bold ph-lg",
+	icon: `${icon("ph-flying-saucer")}`,
 });
 </script>
diff --git a/packages/client/src/pages/my-antennas/edit.vue b/packages/client/src/pages/my-antennas/edit.vue
index 386d21f3c..7c51e657d 100644
--- a/packages/client/src/pages/my-antennas/edit.vue
+++ b/packages/client/src/pages/my-antennas/edit.vue
@@ -15,6 +15,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -36,6 +37,6 @@ os.api("antennas/show", { antennaId: props.antennaId }).then(
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: "ph-flying-saucer ph-bold ph-lg",
+	icon: `${icon("ph-flying-saucer")}`,
 });
 </script>
diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue
index a2fba8c67..c2299c22e 100644
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -98,7 +98,7 @@
 		</div>
 		<div class="actions">
 			<MkButton inline primary @click="saveAntenna()"
-				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				><i :class="icon('ph-floppy-disk-back')"></i>
 				{{ i18n.ts.save }}</MkButton
 			>
 			<MkButton
@@ -106,7 +106,7 @@
 				inline
 				danger
 				@click="deleteAntenna()"
-				><i class="ph-trash ph-bold ph-lg"></i>
+				><i :class="icon('ph-trash')"></i>
 				{{ i18n.ts.delete }}</MkButton
 			>
 		</div>
@@ -123,6 +123,7 @@ import MkSelect from "@/components/form/select.vue";
 import MkSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	antenna: any;
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index d1185ceda..a027e8b42 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -15,7 +15,7 @@
 						to="/my/antennas/create"
 						primary
 						class="add"
-						><i class="ph-plus ph-bold ph-lg"></i>
+						><i :class="icon('ph-plus')"></i>
 						{{ i18n.ts.add }}</MkButton
 					>
 				</MkInfo>
@@ -28,9 +28,7 @@
 									:link="true"
 									:to="`/timeline/antenna/${antenna.id}`"
 								>
-									<i
-										class="ph-flying-saucer ph-bold ph-lg"
-									></i
+									<i :class="icon('ph-flying-saucer')"></i
 									><i
 										:class="`${
 											antenna.hasUnreadNote
@@ -61,6 +59,7 @@ import MkButton from "@/components/MkButton.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const pagination = {
 	endpoint: "antennas/list" as const,
@@ -98,7 +97,7 @@ onDeactivated(() => {
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: "ph-flying-saucer ph-bold ph-lg",
+	icon: `${icon("ph-flying-saucer")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index 7382695fd..daaef6f3a 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -45,6 +45,7 @@ import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const pagination = {
 	endpoint: "clips/list" as const,
@@ -84,9 +85,9 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.clip,
-	icon: "ph-paperclip ph-bold ph-lg",
+	icon: `${icon("ph-paperclip")}`,
 	action: {
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index ec687247e..d60646393 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -25,7 +25,7 @@
 									:aria-label="i18n.t('removeMember')"
 									@click="removeUser(user)"
 								>
-									<i class="ph-x ph-bold ph-lg"></i>
+									<i :class="icon('ph-x')"></i>
 								</button>
 							</div>
 						</div>
@@ -42,6 +42,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { useRouter } from "@/router";
 import * as os from "@/os";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	groupId: {
@@ -135,28 +136,28 @@ async function deleteGroup() {
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.members,
-		icon: "ph-users-three ph-bold ph-lg",
+		icon: `${icon("ph-users-three")}`,
 	})),
 );
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.invite,
 		handler: invite,
 	},
 	{
-		icon: "ph-cursor-text ph-bold ph-lg",
+		icon: `${icon("ph-cursor-text")}`,
 		text: i18n.ts.rename,
 		handler: renameGroup,
 	},
 	{
-		icon: "ph-arrows-left-right ph-bold ph-lg",
+		icon: `${icon("ph-arrows-left-right")}`,
 		text: i18n.ts.transfer,
 		handler: transfer,
 	},
 	{
-		icon: "ph-trash ph-bold ph-lg",
+		icon: `${icon("ph-trash")}`,
 		text: i18n.ts.delete,
 		handler: deleteGroup,
 	},
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index a976bee4e..1d6d1b9d2 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -8,7 +8,7 @@
 				primary
 				style="margin: 0 auto var(--margin) auto"
 				@click="create"
-				><i class="ph-plus ph-bold ph-lg"></i>
+				><i :class="icon('ph-plus')"></i>
 				{{ i18n.ts.createGroup }}</MkButton
 			>
 			<MkPagination
@@ -57,6 +57,7 @@ import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
+import icon from "@/scripts/icon";
 
 const owned = ref("owned");
 const joined = ref("joined");
@@ -73,7 +74,7 @@ const joinedPagination = {
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.createGroup,
 		handler: create,
 	},
@@ -82,7 +83,7 @@ const headerActions = computed(() => [
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.groups,
-		icon: "ph-users-three ph-bold ph-lg",
+		icon: `${icon("ph-users-three")}`,
 	})),
 );
 
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 9fb5bb8b1..990ce4567 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -11,7 +11,7 @@
 				<MkInfo class="_gap" :icon="'list-bullets'" :card="true">
 					<p>{{ i18n.ts.listsDesc }}</p>
 					<MkButton primary class="add" @click="create"
-						><i class="ph-plus ph-bold ph-lg"></i>
+						><i :class="icon('ph-plus')"></i>
 						{{ i18n.ts.createList }}</MkButton
 					>
 				</MkInfo>
@@ -32,7 +32,7 @@
 						<MkAvatars :user-ids="list.userIds" />
 					</MkA>
 					<MkButton @click="deleteAll"
-						><i class="ph-trash ph-bold ph-lg"></i>
+						><i :class="icon('ph-trash')"></i>
 						{{ i18n.ts.deleteAll }}</MkButton
 					>
 				</MkPagination>
@@ -51,6 +51,7 @@ import MkInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
@@ -85,9 +86,9 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageLists,
-	icon: "ph-list-bullets ph-bold ph-lg",
+	icon: `${icon("ph-list-bullets")}`,
 	action: {
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index 3fc28c9a0..0159bee68 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -6,7 +6,7 @@
 		<MkSpacer :content-max="700">
 			<div class="mk-list-page">
 				<transition
-					:name="$store.state.animation ? 'zoom' : ''"
+					:name="defaultStore.state.animation ? 'zoom' : ''"
 					mode="out-in"
 				>
 					<div v-if="list" class="_section">
@@ -25,7 +25,7 @@
 				</transition>
 
 				<transition
-					:name="$store.state.animation ? 'zoom' : ''"
+					:name="defaultStore.state.animation ? 'zoom' : ''"
 					mode="out-in"
 				>
 					<div v-if="list" class="_section members _gap">
@@ -52,7 +52,7 @@
 											:aria-label="i18n.t('removeMember')"
 											@click="removeUser(user)"
 										>
-											<i class="ph-x ph-bold ph-lg"></i>
+											<i :class="icon('ph-x')"></i>
 										</button>
 									</div>
 								</div>
@@ -72,6 +72,8 @@ import * as os from "@/os";
 import { mainRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	listId: string;
@@ -153,7 +155,7 @@ definePageMetadata(
 		list.value
 			? {
 					title: list.value.name,
-					icon: "ph-list-bullets ph-bold ph-lg",
+					icon: `${icon("ph-list-bullets")}`,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/no-graze.vue b/packages/client/src/pages/no-graze.vue
index 6e798e402..5b77f813f 100644
--- a/packages/client/src/pages/no-graze.vue
+++ b/packages/client/src/pages/no-graze.vue
@@ -1,5 +1,5 @@
 <template>
-	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+	<transition :name="defaultStore.state.animation ? 'zoom' : ''" appear>
 		<div :class="$style.root">
 			<img
 				src="/static-assets/badges/info.webp"
@@ -7,7 +7,7 @@
 				alt="Error"
 			/>
 			<p>
-				<i class="ph-warning ph-bold ph-lg"></i>
+				<i :class="icon('ph-warning')"></i>
 				{{ i18n.ts.noGraze }}
 			</p>
 		</div>
@@ -16,6 +16,8 @@
 
 <script lang="ts" setup>
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/pages/not-found.vue b/packages/client/src/pages/not-found.vue
index 528d5e6a9..ab26f0224 100644
--- a/packages/client/src/pages/not-found.vue
+++ b/packages/client/src/pages/not-found.vue
@@ -14,9 +14,10 @@
 <script lang="ts" setup>
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 definePageMetadata({
 	title: i18n.ts.notFound,
-	icon: "ph-warning ph-bold ph-lg",
+	icon: `${icon("ph-warning")}`,
 });
 </script>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index df558b75f..2feadb40a 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -10,7 +10,7 @@
 		<MkSpacer :content-max="800" :margin-min="6">
 			<div class="fcuexfpr">
 				<transition
-					:name="$store.state.animation ? 'fade' : ''"
+					:name="defaultStore.state.animation ? 'fade' : ''"
 					mode="out-in"
 				>
 					<div v-if="appearNote" class="note">
@@ -28,7 +28,7 @@
 								class="load next"
 								@click="showNext = true"
 							>
-								<i class="ph-caret-up ph-bold ph-lg"></i>
+								<i :class="icon('ph-caret-up')"></i>
 								{{ `${i18n.ts.loadMore} (${i18n.ts.newer})` }}
 							</MkButton>
 							<div class="note _gap">
@@ -47,7 +47,7 @@
 								class="load prev"
 								@click="showPrev = true"
 							>
-								<i class="ph-caret-down ph-bold ph-lg"></i>
+								<i :class="icon('ph-caret-down')"></i>
 								{{ `${i18n.ts.loadMore} (${i18n.ts.older})` }}
 							</MkButton>
 						</div>
@@ -78,6 +78,8 @@ import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	noteId: string;
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index fd2caa8d9..001a3b6b3 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -62,6 +62,7 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -106,7 +107,7 @@ function setFilter(ev) {
 		includeTypes.value != null
 			? [
 					{
-						icon: "ph-x ph-bold ph-lg",
+						icon: `${icon("ph-x")}`,
 						text: i18n.ts.clear,
 						action: () => {
 							includeTypes.value = null;
@@ -124,7 +125,7 @@ const headerActions = computed(() =>
 		tab.value === "all"
 			? {
 					text: i18n.ts.filter,
-					icon: "ph-funnel ph-bold ph-lg",
+					icon: `${icon("ph-funnel")}`,
 					highlighted: includeTypes.value != null,
 					handler: setFilter,
 			  }
@@ -132,7 +133,7 @@ const headerActions = computed(() =>
 		tab.value === "all"
 			? {
 					text: i18n.ts.markAllAsRead,
-					icon: "ph-check ph-bold ph-lg",
+					icon: `${icon("ph-check")}`,
 					handler: () => {
 						os.apiWithDialog("notifications/mark-all-as-read");
 					},
@@ -145,29 +146,29 @@ const headerTabs = computed(() => [
 	{
 		key: "all",
 		title: i18n.ts.all,
-		icon: "ph-bell ph-bold ph-lg",
+		icon: `${icon("ph-bell")}`,
 	},
 	{
 		key: "unread",
 		title: i18n.ts.unread,
-		icon: "ph-circle-wavy-warning ph-bold ph-lg",
+		icon: `${icon("ph-circle-wavy-warning")}`,
 	},
 	{
 		key: "mentions",
 		title: i18n.ts.mentions,
-		icon: "ph-at ph-bold ph-lg",
+		icon: `${icon("ph-at")}`,
 	},
 	{
 		key: "directNotes",
 		title: i18n.ts.directNotes,
-		icon: "ph-envelope-simple-open ph-bold ph-lg",
+		icon: `${icon("ph-envelope-simple-open")}`,
 	},
 ]);
 
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.notifications,
-		icon: "ph-bell ph-bold ph-lg",
+		icon: `${icon("ph-bell")}`,
 	})),
 );
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 2d76dda4a..049e19e04 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,7 +1,7 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-lightning ph-bold ph-lg"></i>
+			><i :class="icon('ph-lightning')"></i>
 			{{ i18n.ts._pages.blocks.button }}</template
 		>
 
@@ -101,6 +101,7 @@ import MkSelect from "@/components/form/select.vue";
 import MkInput from "@/components/form/input.vue";
 import MkSwitch from "@/components/form/switch.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index 28c831f37..777c0a089 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,14 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-paint-brush-household ph-bold ph-lg"></i>
+			><i :class="icon('ph-paint-brush-household')"></i>
 			{{ i18n.ts._pages.blocks.canvas }}</template
 		>
 
 		<section style="padding: 0 16px 0 16px">
 			<MkInput v-model="value.name">
 				<template #prefix
-					><i class="ph-magic-wand ph-bold ph-lg"></i
+					><i :class="icon('ph-magic-wand')"></i
 				></template>
 				<template #label>{{
 					i18n.ts._pages.blocks._canvas.id
@@ -34,6 +34,7 @@
 import XContainer from "../page-editor.container.vue";
 import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index 7e294202b..327b56811 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,14 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-lightning ph-bold ph-lg"></i>
+			><i :class="icon('ph-lightning')"></i>
 			{{ i18n.ts._pages.blocks.counter }}</template
 		>
 
 		<section style="padding: 0 16px 0 16px">
 			<MkInput v-model="value.name">
 				<template #prefix
-					><i class="ph-magic-wand ph-bold ph-lg"></i
+					><i :class="icon('ph-magic-wand')"></i
 				></template>
 				<template #label>{{
 					i18n.ts._pages.blocks._counter.name
@@ -32,6 +32,7 @@
 import XContainer from "../page-editor.container.vue";
 import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index 6b32ff1bf..b5a9496aa 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -1,12 +1,12 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-question ph-bold ph-lg"></i>
+			><i :class="icon('ph-question')"></i>
 			{{ i18n.ts._pages.blocks.if }}</template
 		>
 		<template #func>
 			<button class="_button" @click="add()">
-				<i class="ph-plus ph-bold ph-lg"></i>
+				<i :class="icon('ph-plus')"></i>
 			</button>
 		</template>
 
@@ -51,6 +51,7 @@ import XContainer from "../page-editor.container.vue";
 import MkSelect from "@/components/form/select.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 1e5311d5c..859f0f111 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -1,12 +1,12 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-image ph-bold ph-lg"></i>
+			><i :class="icon('ph-image')"></i>
 			{{ i18n.ts._pages.blocks.image }}</template
 		>
 		<template #func>
 			<button @click="choose()">
-				<i class="ph-folder-notch-open ph-bold ph-lg"></i>
+				<i :class="icon('ph-folder-notch-open')"></i>
 			</button>
 		</template>
 
@@ -28,6 +28,7 @@ import XContainer from "../page-editor.container.vue";
 import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index d0f289d8f..60c4f9eff 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,7 +1,7 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-sticker ph-bold ph-lg"></i>
+			><i :class="icon('ph-sticker')"></i>
 			{{ i18n.ts._pages.blocks.note }}</template
 		>
 
@@ -43,6 +43,7 @@ import XNote from "@/components/MkNote.vue";
 import XNoteDetailed from "@/components/MkNoteDetailed.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index 16dbc6668..2fb3c3ea8 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,14 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-lightning ph-bold ph-lg"></i>
+			><i :class="icon('ph-lightning')"></i>
 			{{ i18n.ts._pages.blocks.numberInput }}</template
 		>
 
 		<section style="padding: 0 16px 0 16px">
 			<MkInput v-model="value.name">
 				<template #prefix
-					><i class="ph-magic-wand ph-bold ph-lg"></i
+					><i :class="icon('ph-magic-wand')"></i
 				></template>
 				<template #label>{{
 					i18n.ts._pages.blocks._numberInput.name
@@ -32,6 +32,7 @@
 import XContainer from "../page-editor.container.vue";
 import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index aac467650..571ff0523 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,7 +1,7 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+			><i :class="icon('ph-paper-plane-tilt')"></i>
 			{{ i18n.ts._pages.blocks.post }}</template
 		>
 
@@ -31,6 +31,7 @@ import MkTextarea from "@/components/form/textarea.vue";
 import MkInput from "@/components/form/input.vue";
 import MkSwitch from "@/components/form/switch.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 21e94ba96..a8b681c22 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,14 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-lightning ph-bold ph-lg"></i>
+			><i :class="icon('ph-lightning')"></i>
 			{{ i18n.ts._pages.blocks.radioButton }}</template
 		>
 
 		<section style="padding: 0 16px 16px 16px">
 			<MkInput v-model="value.name"
 				><template #prefix
-					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+					><i :class="icon('ph-magic-wand')"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._radioButton.name
 				}}</template></MkInput
@@ -38,6 +38,7 @@ import XContainer from "../page-editor.container.vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
index 476b2340e..6ef8906b1 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -1,15 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-sticker ph-bold ph-lg"></i>
-			{{ value.title }}</template
+			><i :class="icon('ph-sticker')"></i> {{ value.title }}</template
 		>
 		<template #func>
 			<button class="_button" @click="rename()">
-				<i class="ph-pencil ph-bold ph-lg"></i>
+				<i :class="icon('ph-pencil')"></i>
 			</button>
 			<button class="_button" @click="add()">
-				<i class="ph-plus ph-bold ph-lg"></i>
+				<i :class="icon('ph-plus')"></i>
 			</button>
 		</template>
 
@@ -25,6 +24,7 @@ import { v4 as uuid } from "uuid";
 import XContainer from "../page-editor.container.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index 8c9a83173..915b2cd9c 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,14 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-lightning ph-bold ph-lg"></i>
+			><i :class="icon('ph-lightning')"></i>
 			{{ i18n.ts._pages.blocks.switch }}</template
 		>
 
 		<section class="kjuadyyj">
 			<MkInput v-model="value.name"
 				><template #prefix
-					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+					><i :class="icon('ph-magic-wand')"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._switch.name
 				}}</template></MkInput
@@ -32,6 +32,7 @@ import XContainer from "../page-editor.container.vue";
 import MkSwitch from "@/components/form/switch.vue";
 import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index 73f057c76..d95c68883 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,14 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-lightning ph-bold ph-lg"></i>
+			><i :class="icon('ph-lightning')"></i>
 			{{ i18n.ts._pages.blocks.textInput }}</template
 		>
 
 		<section style="padding: 0 16px 0 16px">
 			<MkInput v-model="value.name"
 				><template #prefix
-					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+					><i :class="icon('ph-magic-wand')"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._textInput.name
 				}}</template></MkInput
@@ -31,6 +31,7 @@
 import XContainer from "../page-editor.container.vue";
 import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index fc9b465a1..6355cd1f7 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -1,7 +1,7 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-align-left ph-bold ph-lg"></i>
+			><i :class="icon('ph-align-left')"></i>
 			{{ i18n.ts._pages.blocks.text }}</template
 		>
 
@@ -14,6 +14,7 @@
 <script lang="ts" setup>
 import XContainer from "../page-editor.container.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index a6f76244f..e474e2533 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,14 +1,14 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-lightning ph-bold ph-lg"></i>
+			><i :class="icon('ph-lightning')"></i>
 			{{ i18n.ts._pages.blocks.textareaInput }}</template
 		>
 
 		<section style="padding: 0 16px 16px 16px">
 			<MkInput v-model="value.name"
 				><template #prefix
-					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+					><i :class="icon('ph-magic-wand')"></i></template
 				><template #label>{{
 					i18n.ts._pages.blocks._textareaInput.name
 				}}</template></MkInput
@@ -32,6 +32,7 @@ import XContainer from "../page-editor.container.vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import MkInput from "@/components/form/input.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index 6cfe0752c..f2d2bf049 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,7 +1,7 @@
 <template>
 	<XContainer :draggable="true" @remove="() => $emit('remove')">
 		<template #header
-			><i class="ph-align-left ph-bold ph-lg"></i>
+			><i :class="icon('ph-align-left')"></i>
 			{{ i18n.ts._pages.blocks.textarea }}</template
 		>
 
@@ -14,6 +14,7 @@
 <script lang="ts" setup>
 import XContainer from "../page-editor.container.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 400c705d6..18ac74583 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -5,17 +5,17 @@
 			<div class="buttons">
 				<slot name="func"></slot>
 				<button v-if="removable" class="_button" @click="remove()">
-					<i class="ph-trash ph-bold ph-lg"></i>
+					<i :class="icon('ph-trash')"></i>
 				</button>
 				<button v-if="draggable" class="drag-handle _button">
-					<i class="ph-list ph-bold ph-lg"></i>
+					<i :class="icon('ph-list')"></i>
 				</button>
 				<button class="_button" @click="toggleContent(!showBody)">
 					<template v-if="showBody"
-						><i class="ph-caret-up ph-bold ph-lg"></i
+						><i :class="icon('ph-caret-up')"></i
 					></template>
 					<template v-else
-						><i class="ph-caret-down ph-bold ph-lg"></i
+						><i :class="icon('ph-caret-down')"></i
 					></template>
 				</button>
 			</div>
@@ -45,6 +45,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	props: {
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index 4ce8fcd3c..918de6e13 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -17,7 +17,7 @@
 		>
 		<template #func>
 			<button class="_button" @click="changeType()">
-				<i class="ph-pencil ph-bold ph-lg"></i>
+				<i :class="icon('ph-pencil')"></i>
 			</button>
 		</template>
 
@@ -158,6 +158,7 @@ import * as os from "@/os";
 import { isLiteralValue } from "@/scripts/hpml/expr";
 import { funcDefs } from "@/scripts/hpml/lib";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
@@ -212,8 +213,7 @@ export default defineComponent({
 	computed: {
 		icon(): any {
 			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith("fn:"))
-				return "ph-plug ph-bold ph-lg";
+			if (this.modelValue.type.startsWith("fn:")) return "ph-plug ph-lg";
 			return blockDefs.find((x) => x.type === this.modelValue.type).icon;
 		},
 		typeText(): any {
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index aac5a34c1..3a581ff20 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -14,7 +14,7 @@
 					inline
 					link
 					:to="`/@${author.username}/pages/${currentName}`"
-					><i class="ph-arrow-square-out ph-bold ph-lg"></i>
+					><i :class="icon('ph-arrow-square-out')"></i>
 					{{ i18n.ts._pages.viewPage }}</MkButton
 				>
 				<MkButton
@@ -23,11 +23,11 @@
 					primary
 					class="button"
 					@click="save"
-					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					><i :class="icon('ph-floppy-disk-back')"></i>
 					{{ i18n.ts.save }}</MkButton
 				>
 				<MkButton v-if="pageId" inline class="button" @click="duplicate"
-					><i class="ph-clipboard-text ph-bold ph-lg"></i>
+					><i :class="icon('ph-clipboard-text')"></i>
 					{{ i18n.ts.duplicate }}</MkButton
 				>
 				<MkButton
@@ -36,7 +36,7 @@
 					class="button"
 					danger
 					@click="del"
-					><i class="ph-trash ph-bold ph-lg"></i>
+					><i :class="icon('ph-trash')"></i>
 					{{ i18n.ts.delete }}</MkButton
 				>
 			</div>
@@ -85,7 +85,7 @@
 						<MkButton
 							v-if="eyeCatchingImageId == null && !readonly"
 							@click="setEyeCatchingImage"
-							><i class="ph-plus ph-bold ph-lg"></i>
+							><i :class="icon('ph-plus')"></i>
 							{{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton
 						>
 						<div v-else-if="eyeCatchingImage">
@@ -97,7 +97,7 @@
 							<MkButton
 								v-if="!readonly"
 								@click="removeEyeCatchingImage()"
-								><i class="ph-trash ph-bold ph-lg"></i>
+								><i :class="icon('ph-trash')"></i>
 								{{
 									i18n.ts._pages.eyeCatchingImageRemove
 								}}</MkButton
@@ -111,7 +111,7 @@
 				<div>
 					<XBlocks v-model="content" class="content" :hpml="hpml" />
 					<MkButton v-if="!readonly" @click="add()"
-						><i class="ph-plus ph-bold ph-lg"></i
+						><i :class="icon('ph-plus')"></i
 					></MkButton>
 				</div>
 			</div>
@@ -145,7 +145,7 @@
 						v-if="!readonly"
 						class="add"
 						@click="addVariable()"
-						><i class="ph-plus ph-bold ph-lg"></i
+						><i :class="icon('ph-plus')"></i
 					></MkButton>
 				</div>
 			</div>
@@ -180,6 +180,7 @@ import { mainRouter } from "@/router";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	initPageId?: string;
@@ -517,22 +518,22 @@ const headerTabs = computed(() => [
 	{
 		key: "settings",
 		title: i18n.ts._pages.pageSetting,
-		icon: "ph-gear-six ph-bold ph-lg",
+		icon: `${icon("ph-gear-six")}`,
 	},
 	{
 		key: "contents",
 		title: i18n.ts._pages.contents,
-		icon: "ph-sticker ph-bold ph-lg",
+		icon: `${icon("ph-sticker")}`,
 	},
 	{
 		key: "variables",
 		title: i18n.ts._pages.variables,
-		icon: "ph-magic-wand ph-bold ph-lg",
+		icon: `${icon("ph-magic-wand")}`,
 	},
 	{
 		key: "script",
 		title: i18n.ts.script,
-		icon: "ph-code ph-bold ph-lg",
+		icon: `${icon("ph-code")}`,
 	},
 ]);
 
@@ -546,7 +547,7 @@ definePageMetadata(
 		}
 		return {
 			title,
-			icon: "ph-pencil ph-bold ph-lg",
+			icon: `${icon("ph-pencil")}`,
 		};
 	}),
 );
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 20193e4a6..f776158b6 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -8,7 +8,7 @@
 		/></template>
 		<MkSpacer :content-max="800">
 			<transition
-				:name="$store.state.animation ? 'fade' : ''"
+				:name="defaultStore.state.animation ? 'fade' : ''"
 				mode="out-in"
 			>
 				<div
@@ -19,12 +19,12 @@
 				>
 					<div class="footer">
 						<div>
-							<i class="ph-alarm ph-bold" />
+							<i :class="icon('ph-alarm', false)" />
 							{{ i18n.ts.createdAt }}:
 							<MkTime :time="page.createdAt" mode="detail" />
 						</div>
 						<div v-if="page.createdAt != page.updatedAt">
-							<i class="ph-alarm ph-bold"></i>
+							<i :class="icon('ph-alarm', false)"></i>
 							{{ i18n.ts.updatedAt }}:
 							<MkTime :time="page.updatedAt" mode="detail" />
 						</div>
@@ -41,16 +41,14 @@
 										class="menu _button"
 										@click="copyUrl"
 									>
-										<i
-											class="ph-link-simple ph-bold ph-lg"
-										/>
+										<i :class="icon('ph-link-simple')" />
 									</button>
 									<MkA
 										v-tooltip="i18n.ts._pages.viewSource"
 										:to="`/@${username}/pages/${pageName}/view-source`"
 										class="menu _button"
 										style="transform: translateY(2px)"
-										><i class="ph-code ph-bold ph-lg"
+										><i :class="icon('ph-code')"
 									/></MkA>
 									<template
 										v-if="$i && $i.id === page.userId"
@@ -60,7 +58,7 @@
 											class="menu _button"
 											:to="`/pages/edit/${page.id}`"
 											style="transform: translateY(2px)"
-											><i class="ph-pencil ph-bold ph-lg"
+											><i :class="icon('ph-pencil')"
 										/></MkA>
 										<button
 											v-if="$i.pinnedPageId === page.id"
@@ -69,7 +67,9 @@
 											@click="pin(false)"
 										>
 											<i
-												class="ph-push-pin-slash ph-bold ph-lg"
+												:class="
+													icon('ph-push-pin-slash')
+												"
 											/>
 										</button>
 										<button
@@ -78,9 +78,7 @@
 											class="menu _button"
 											@click="pin(true)"
 										>
-											<i
-												class="ph-push-pin ph-bold ph-lg"
-											/>
+											<i :class="icon('ph-push-pin')" />
 										</button>
 									</template>
 								</div>
@@ -97,7 +95,7 @@
 									class="button"
 									primary
 									@click="unlike()"
-									><i class="ph-heart ph-fill ph-lg"></i
+									><i class="ph-heart ph-fill"></i
 									><span
 										v-if="page.likedCount > 0"
 										class="count"
@@ -109,7 +107,7 @@
 									v-tooltip="i18n.ts._pages.like"
 									class="button"
 									@click="like()"
-									><i class="ph-heart ph-bold"></i
+									><i :class="icon('ph-heart', false)"></i
 									><span
 										v-if="page.likedCount > 0"
 										class="count"
@@ -125,7 +123,7 @@
 									@click="shareWithNote"
 								>
 									<i
-										class="ph-rocket-launch ph-bold ph-lg ph-fw ph-lg"
+										:class="icon('ph-rocket-launch ph-fw')"
 									></i>
 								</button>
 								<button
@@ -136,7 +134,7 @@
 									@click="share"
 								>
 									<i
-										class="ph-share-network ph-bold ph-lg ph-fw ph-lg"
+										:class="icon('ph-share-network ph-fw')"
 									></i>
 								</button>
 							</div>
@@ -176,7 +174,7 @@
 						class="other"
 					>
 						<template #header
-							><i class="ph-clock ph-bold ph-lg"></i>
+							><i :class="icon('ph-clock')"></i>
 							{{ i18n.ts.recentPosts }}</template
 						>
 						<MkPagination
@@ -213,6 +211,8 @@ import { i18n } from "@/i18n";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { shareAvailable } from "@/scripts/share-available";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	pageName: string;
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 5476c5889..64c6c95aa 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -57,7 +57,7 @@
 					<div class="rknalgpo my">
 						<div class="buttoncontainer">
 							<MkButton class="new primary" @click="create()"
-								><i class="ph-plus ph-bold ph-lg"></i>
+								><i :class="icon('ph-plus')"></i>
 								{{ i18n.ts._pages.newPage }}</MkButton
 							>
 						</div>
@@ -91,6 +91,7 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -119,7 +120,7 @@ function create() {
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 		text: i18n.ts.create,
 		handler: create,
 	},
@@ -129,24 +130,24 @@ const headerTabs = computed(() => [
 	{
 		key: "featured",
 		title: i18n.ts._pages.featured,
-		icon: "ph-fire-simple ph-bold ph-lg",
+		icon: `${icon("ph-fire-simple")}`,
 	},
 	{
 		key: "liked",
 		title: i18n.ts._pages.liked,
-		icon: "ph-heart ph-bold ph-lg",
+		icon: `${icon("ph-heart")}`,
 	},
 	{
 		key: "my",
 		title: i18n.ts._pages.my,
-		icon: "ph-crown-simple ph-bold ph-lg",
+		icon: `${icon("ph-crown-simple")}`,
 	},
 ]);
 
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.pages,
-		icon: "ph-file-text ph-bold ph-lg",
+		icon: `${icon("ph-file-text")}`,
 	})),
 );
 
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
index 7a20c5a4a..ca1c476e3 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -9,11 +9,12 @@ import { computed } from "vue";
 import MkSample from "@/components/MkSample.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.preview,
-		icon: "ph-eye ph-bold ph-lg",
+		icon: `${icon("ph-eye")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index 54fc9fe19..c7e4762ed 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -50,6 +50,7 @@ import FormSection from "@/components/form/section.vue";
 import MkButton from "@/components/MkButton.vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
 import FormSplit from "@/components/form/split.vue";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	path: string;
@@ -104,7 +105,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index b339ffc98..c83830e55 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -33,7 +33,7 @@
 				</FormTextarea>
 
 				<MkButton class="_formBlock" primary @click="save"
-					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					><i :class="icon('ph-floppy-disk-back')"></i>
 					{{ i18n.ts.save }}</MkButton
 				>
 
@@ -45,7 +45,7 @@
 				</MkKeyValue>
 
 				<MkButton danger @click="del"
-					><i class="ph-trash ph-bold ph-lg"></i>
+					><i :class="icon('ph-trash')"></i>
 					{{ i18n.ts.delete }}</MkButton
 				>
 			</template>
@@ -64,6 +64,7 @@ import MkKeyValue from "@/components/MkKeyValue.vue";
 import FormTextarea from "@/components/form/textarea.vue";
 import FormSplit from "@/components/form/split.vue";
 import FormInfo from "@/components/MkInfo.vue";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	path: string;
@@ -129,6 +130,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 });
 </script>
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
index 0fcc09cb5..5df7a3bda 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -32,6 +32,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import FormLink from "@/components/form/link.vue";
 import FormSection from "@/components/form/section.vue";
 import MkButton from "@/components/MkButton.vue";
+import icon from "@/scripts/icon";
 
 const scopes = ref(null);
 
@@ -77,6 +78,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 });
 </script>
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index 3544929fc..0aa2e78f0 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -16,7 +16,7 @@
 					class="_formBlock"
 				>
 					<template #prefix
-						><i class="ph-lock ph-bold ph-lg"></i
+						><i :class="icon('ph-lock')"></i
 					></template>
 					<template #label>{{ i18n.ts.newPassword }}</template>
 				</FormInput>
@@ -37,6 +37,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	token?: string;
@@ -72,6 +73,6 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.resetPassword,
-	icon: "ph-lock ph-bold ph-lg",
+	icon: `${icon("ph-lock")}`,
 });
 </script>
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index a63c7f568..e7c65701c 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -12,7 +12,7 @@
 				style="position: absolute; top: 8px; right: 8px"
 				primary
 				@click="run()"
-				><i class="ph-play ph-bold ph-lg"></i
+				><i :class="icon('ph-play')"></i
 			></MkButton>
 		</div>
 
@@ -53,6 +53,7 @@ import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const code = ref("");
 const logs = ref<any[]>([]);
@@ -135,7 +136,7 @@ function highlighter(code) {
 
 definePageMetadata({
 	title: i18n.ts.scratchpad,
-	icon: "ph-terminal-window ph-bold ph-lg",
+	icon: `${icon("ph-terminal-window")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 161d0e6dc..61f211bcf 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -49,6 +49,7 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { defaultStore } from "@/store";
 import { deviceKind } from "@/scripts/device-kind";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -84,12 +85,12 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => [
 	{
 		key: "notes",
-		icon: "ph-magnifying-glass ph-bold ph-lg",
+		icon: `${icon("ph-magnifying-glass")}`,
 		title: i18n.ts.notes,
 	},
 	{
 		key: "users",
-		icon: "ph-users ph-bold ph-lg",
+		icon: `${icon("ph-users")}`,
 		title: i18n.ts.users,
 	},
 ]);
@@ -116,7 +117,7 @@ onMounted(() => {
 definePageMetadata(
 	computed(() => ({
 		title: i18n.t("searchWith", { q: props.query }),
-		icon: "ph-magnifying-glass ph-bold ph-lg",
+		icon: `${icon("ph-magnifying-glass")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index bd788177d..0caacdc60 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -6,7 +6,7 @@
 			<MkFolder>
 				<template #icon
 					><i
-						class="ph-shield-check ph-bold ph-lg"
+						:class="icon('ph-shield-check')"
 						style="margin-right: 0.5rem"
 					></i
 				></template>
@@ -17,7 +17,7 @@
 					<template v-if="$i.securityKeysList.length > 0">
 						<MkButton @click="renewTOTP"
 							><i
-								class="ph-shield-check ph-bold ph-lg"
+								:class="icon('ph-shield-check')"
 								style="margin-right: 0.5rem"
 							></i
 							>{{ i18n.ts._2fa.renewTOTP }}</MkButton
@@ -26,7 +26,7 @@
 					</template>
 					<MkButton v-else @click="unregisterTOTP"
 						><i
-							class="ph-shield-slash ph-bold ph-lg"
+							:class="icon('ph-shield-slash')"
 							style="margin-right: 0.5rem"
 						></i
 						>{{ i18n.ts.unregister }}</MkButton
@@ -42,10 +42,7 @@
 
 			<MkFolder>
 				<template #icon
-					><i
-						class="ph-key ph-bold ph-lg"
-						style="margin-right: 0.5rem"
-					></i
+					><i :class="icon('ph-key')" style="margin-right: 0.5rem"></i
 				></template>
 				<template #label>{{ i18n.ts.securityKeyAndPasskey }}</template>
 				<div class="_gaps_s">
@@ -69,7 +66,7 @@
 					<template v-else>
 						<MkButton primary @click="addSecurityKey"
 							><i
-								class="ph-key ph-bold ph-lg"
+								:class="icon('ph-key')"
 								style="margin-right: 0.5rem"
 							></i
 							>{{ i18n.ts._2fa.registerSecurityKey }}</MkButton
@@ -84,13 +81,11 @@
 							</p>
 							<div class="_flexList">
 								<MkButton @click="renameKey(key)"
-									><i
-										class="ph-pencil-line ph-bold ph-lg"
-									></i>
+									><i :class="icon('ph-pencil-line')"></i>
 									{{ i18n.ts.rename }}</MkButton
 								>
 								<MkButton danger @click="unregisterKey(key)"
-									><i class="ph-trash ph-bold ph-lg"></i>
+									><i :class="icon('ph-trash')"></i>
 									{{ i18n.ts.unregister }}</MkButton
 								>
 							</div>
@@ -127,6 +122,7 @@ import MkFolder from "@/components/MkFolder.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 // メモ: 各エンドポイントはmeUpdatedを発行するため、refreshAccountは不要
 
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index 385fd31b7..7342f2df4 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -182,6 +182,7 @@ import bytes from "@/filters/bytes";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const stats = ref<any>({});
 
@@ -195,6 +196,6 @@ onMounted(() => {
 
 definePageMetadata({
 	title: i18n.ts.accountInfo,
-	icon: "ph-info ph-bold ph-lg",
+	icon: `${icon("ph-info")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 37f3812d5..7058b652a 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -2,7 +2,7 @@
 	<div class="_formRoot">
 		<FormSuspense :p="init">
 			<FormButton primary @click="addAccount"
-				><i class="ph-plus ph-bold ph-lg"></i>
+				><i :class="icon('ph-plus')"></i>
 				{{ i18n.ts.addAccount }}</FormButton
 			>
 
@@ -42,6 +42,7 @@ import {
 } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const storedAccounts = ref<any>(null);
 const accounts = ref<any>(null);
@@ -68,12 +69,12 @@ function menu(account, ev) {
 		[
 			{
 				text: i18n.ts.switch,
-				icon: "ph-swap ph-bold ph-lg",
+				icon: `${icon("ph-swap")}`,
 				action: () => switchAccount(account),
 			},
 			{
 				text: i18n.ts.remove,
-				icon: "ph-trash ph-bold ph-lg",
+				icon: `${icon("ph-trash")}`,
 				danger: true,
 				action: () => removeAccount(account),
 			},
@@ -146,7 +147,7 @@ function switchAccountWithToken(token: string) {
 
 definePageMetadata({
 	title: i18n.ts.accounts,
-	icon: "ph-users ph-bold ph-lg",
+	icon: `${icon("ph-users")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index 367fd6968..8c92151fd 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -22,6 +22,7 @@ import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const isDesktop = ref(window.innerWidth >= 1100);
 
@@ -53,6 +54,6 @@ function generateToken() {
 
 definePageMetadata({
 	title: "API",
-	icon: "ph-key ph-bold ph-lg",
+	icon: `${icon("ph-key")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index a3ca17944..9161bcbea 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -36,7 +36,7 @@
 						</div>
 						<div class="actions">
 							<button class="_button" @click="revoke(token)">
-								<i class="ph-trash ph-bold ph-lg"></i>
+								<i :class="icon('ph-trash')"></i>
 							</button>
 						</div>
 						<details>
@@ -60,6 +60,7 @@ import FormPagination from "@/components/MkPagination.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const list = ref<any>(null);
 
@@ -79,7 +80,7 @@ function revoke(token) {
 
 definePageMetadata({
 	title: i18n.ts.installedApps,
-	icon: "ph-plug ph-bold ph-lg",
+	icon: `${icon("ph-plug")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index f331dd02c..1528652bb 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -22,6 +22,7 @@ import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
 
@@ -43,6 +44,6 @@ watch(localCustomCss, async () => {
 
 definePageMetadata({
 	title: i18n.ts.customCss,
-	icon: "ph-code ph-bold ph-lg",
+	icon: `${icon("ph-code")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/custom-katex-macro.vue b/packages/client/src/pages/settings/custom-katex-macro.vue
index 3eba9389a..756e0f110 100644
--- a/packages/client/src/pages/settings/custom-katex-macro.vue
+++ b/packages/client/src/pages/settings/custom-katex-macro.vue
@@ -31,6 +31,7 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { parseKaTeXMacros } from "@/scripts/katex-macro";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const localCustomKaTeXMacro = ref(
 	localStorage.getItem("customKaTeXMacro") ?? "",
@@ -61,6 +62,6 @@ watch(localCustomKaTeXMacro, async () => {
 
 definePageMetadata({
 	title: i18n.ts.customKaTeXMacro,
-	icon: "ph-radical ph-bold ph-lg",
+	icon: `${icon("ph-radical")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index ef2cc9bbe..18d6a5469 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -24,6 +24,7 @@ import FormRadios from "@/components/form/radios.vue";
 import { deckStore } from "@/ui/deck/deck-store";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const navWindow = computed(deckStore.makeGetterSetter("navWindow"));
 const alwaysShowMainColumn = computed(
@@ -33,6 +34,6 @@ const columnAlign = computed(deckStore.makeGetterSetter("columnAlign"));
 
 definePageMetadata({
 	title: i18n.ts.deck,
-	icon: "ph-layout ph-bold ph-lg",
+	icon: `${icon("ph-layout")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 9d4789306..f1ad8ee1b 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -26,6 +26,7 @@ import * as os from "@/os";
 import { signout } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 async function deleteAccount() {
 	{
@@ -55,6 +56,6 @@ async function deleteAccount() {
 
 definePageMetadata({
 	title: i18n.ts._accountDelete.accountDelete,
-	icon: "ph-warning ph-bold ph-lg",
+	icon: `${icon("ph-warning")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index e06d530ed..e6b07acaa 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -38,7 +38,7 @@
 					uploadFolder ? uploadFolder.name : "-"
 				}}</template>
 				<template #suffixIcon
-					><i class="ph-folder-notch-open ph-bold ph-lg"></i
+					><i :class="icon('ph-folder-notch-open')"></i
 				></template>
 			</FormButton>
 			<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
@@ -86,6 +86,7 @@ import MkChart from "@/components/MkChart.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
+import icon from "@/scripts/icon";
 
 const fetching = ref(true);
 const usage = ref<any>(null);
@@ -146,7 +147,7 @@ function saveProfile() {
 
 definePageMetadata({
 	title: i18n.ts.drive,
-	icon: "ph-cloud ph-bold ph-lg",
+	icon: `${icon("ph-cloud")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index 78597fc3c..4d760fb9e 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -4,7 +4,7 @@
 			<template #label>{{ i18n.ts.emailAddress }}</template>
 			<FormInput v-model="emailAddress" type="email" manual-save>
 				<template #prefix
-					><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+					><i :class="icon('ph-envelope-simple-open')"></i
 				></template>
 				<template v-if="$i.email && !$i.emailVerified" #caption>{{
 					i18n.ts.verificationEmailSent
@@ -13,7 +13,7 @@
 					v-else-if="emailAddress === $i.email && $i.emailVerified"
 					#caption
 					><i
-						class="ph-check ph-bold ph-lg"
+						:class="icon('ph-check')"
 						style="color: var(--success)"
 					></i>
 					{{ i18n.ts.emailVerified }}</template
@@ -69,6 +69,7 @@ import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const emailAddress = ref($i!.email);
 
@@ -149,6 +150,6 @@ onMounted(() => {
 
 definePageMetadata({
 	title: i18n.ts.email,
-	icon: "ph-envelope-simple-open ph-bold ph-lg",
+	icon: `${icon("ph-envelope-simple-open")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index e75faaf2e..5b475b893 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -30,15 +30,35 @@
 			<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
 			<option :value="null">{{ i18n.ts.auto }}</option>
 			<option value="smartphone">
-				<i class="ph-device-mobile ph-bold ph-lg" />
+				<i :class="icon('ph-device-mobile')" />
 				{{ i18n.ts.smartphone }}
 			</option>
 			<option value="tablet">
-				<i class="ph-device-tablet ph-bold ph-lg" />
+				<i :class="icon('ph-device-tablet')" />
 				{{ i18n.ts.tablet }}
 			</option>
 			<option value="desktop">
-				<i class="ph-desktop ph-bold ph-lg" /> {{ i18n.ts.desktop }}
+				<i :class="icon('ph-desktop')" />
+				{{ i18n.ts.desktop }}
+			</option>
+		</FormRadios>
+
+		<FormRadios v-model="iconSet" class="_formBlock">
+			<template #label>{{ i18n.ts.iconSet }}</template>
+			<option value="ph-bold" :aria-label="i18n.ts._iconSets.bold">
+				<i class="ph-bold ph-2x ph-smiley"></i>
+			</option>
+			<option value="ph-duotone" :aria-label="i18n.ts._iconSets.duotone">
+				<i class="ph-duotone ph-2x ph-smiley"></i>
+			</option>
+			<option value="ph-fill" :aria-label="i18n.ts._iconSets.fill">
+				<i class="ph-fill ph-2x ph-smiley"></i>
+			</option>
+			<option value="ph" :aria-label="i18n.ts._iconSets.regular">
+				<i class="ph ph-2x ph-smiley"></i>
+			</option>
+			<option value="ph-light" :aria-label="i18n.ts._iconSets.light">
+				<i class="ph-light ph-2x ph-smiley"></i>
 			</option>
 		</FormRadios>
 
@@ -135,7 +155,7 @@
 				{{ i18n.ts._mfm.alwaysPlay }}
 				<template #caption>
 					<i
-						class="ph-warning ph-bold ph-lg"
+						:class="icon('ph-warning')"
 						style="color: var(--warn)"
 					></i>
 					{{ i18n.ts._mfm.warn }}
@@ -275,7 +295,7 @@
 		}}</FormLink>
 
 		<FormLink to="/settings/custom-katex-macro" class="_formBlock"
-			><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
+			><template #icon><i :class="icon('ph-radical')"></i></template
 			>{{ i18n.ts.customKaTeXMacro }}</FormLink
 		>
 	</div>
@@ -298,6 +318,7 @@ import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
+import icon from "@/scripts/icon";
 
 const lang = ref(localStorage.getItem("lang"));
 const translateLang = ref(localStorage.getItem("translateLang"));
@@ -403,6 +424,7 @@ const detectPostLanguage = computed(
 const openServerInfo = computed(
 	defaultStore.makeGetterSetter("openServerInfo"),
 );
+const iconSet = computed(defaultStore.makeGetterSetter("iconSet"));
 
 // This feature (along with injectPromo) is currently disabled
 // function onChangeInjectFeaturedNote(v) {
@@ -417,6 +439,10 @@ watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);
 });
 
+watch(iconSet, () => {
+	defaultStore.set("iconSet", iconSet.value);
+});
+
 watch(lang, () => {
 	localStorage.setItem("lang", lang.value as string);
 	localStorage.removeItem("locale");
@@ -462,6 +488,7 @@ watch(
 		advancedMfm,
 		autoplayMfm,
 		expandOnNoteClick,
+		iconSet,
 	],
 	async () => {
 		await reloadAsk();
@@ -470,6 +497,6 @@ watch(
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 4519346f2..4dd64e0fe 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -5,21 +5,21 @@
 			<FormFolder>
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon
-					><i class="ph-download-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-download-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportNotes()"
-					><i class="ph-download-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-download-simple')"></i>
 					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.import }}</template>
 				<template #icon
-					><i class="ph-upload-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-upload-simple')"></i
 				></template>
 				<FormRadios v-model="importType" class="_formBlock">
 					<option value="firefish">Firefish/Misskey</option>
@@ -33,7 +33,7 @@
 					:class="$style.button"
 					inline
 					@click="importPosts($event)"
-					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-upload-simple')"></i>
 					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
@@ -45,7 +45,7 @@
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon
-					><i class="ph-download-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-download-simple')"></i
 				></template>
 				<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
 					{{ i18n.ts._exportOrImport.excludeMutingUsers }}
@@ -58,21 +58,21 @@
 					:class="$style.button"
 					inline
 					@click="exportFollowing()"
-					><i class="ph-download-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-download-simple')"></i>
 					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.import }}</template>
 				<template #icon
-					><i class="ph-upload-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-upload-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importFollowing($event)"
-					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-upload-simple')"></i>
 					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
@@ -82,28 +82,28 @@
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon
-					><i class="ph-download-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-download-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportUserLists()"
-					><i class="ph-download-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-download-simple')"></i>
 					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.import }}</template>
 				<template #icon
-					><i class="ph-upload-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-upload-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importUserLists($event)"
-					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-upload-simple')"></i>
 					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
@@ -113,28 +113,28 @@
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon
-					><i class="ph-download-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-download-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportMuting()"
-					><i class="ph-download-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-download-simple')"></i>
 					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.import }}</template>
 				<template #icon
-					><i class="ph-upload-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-upload-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importMuting($event)"
-					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-upload-simple')"></i>
 					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
@@ -146,28 +146,28 @@
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon
-					><i class="ph-download-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-download-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="exportBlocking()"
-					><i class="ph-download-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-download-simple')"></i>
 					{{ i18n.ts.export }}</MkButton
 				>
 			</FormFolder>
 			<FormFolder class="_formBlock">
 				<template #label>{{ i18n.ts.import }}</template>
 				<template #icon
-					><i class="ph-upload-simple ph-bold ph-lg"></i
+					><i :class="icon('ph-upload-simple')"></i
 				></template>
 				<MkButton
 					primary
 					:class="$style.button"
 					inline
 					@click="importBlocking($event)"
-					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					><i :class="icon('ph-upload-simple')"></i>
 					{{ i18n.ts.import }}</MkButton
 				>
 			</FormFolder>
@@ -186,6 +186,7 @@ import * as os from "@/os";
 import { selectFile } from "@/scripts/select-file";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const excludeMutingUsers = ref(false);
 const importType = ref("firefish");
@@ -277,7 +278,7 @@ const importBlocking = async (ev) => {
 
 definePageMetadata({
 	title: i18n.ts.importAndExport,
-	icon: "ph-package ph-bold ph-lg",
+	icon: `${icon("ph-package")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 8d7354716..56caea41f 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -54,10 +54,11 @@ import {
 	provideMetadataReceiver,
 } from "@/scripts/page-metadata";
 import * as os from "@/os";
+import icon from "@/scripts/icon";
 
 const indexInfo = {
 	title: i18n.ts.settings,
-	icon: "ph-gear-six ph-bold ph-lg",
+	icon: `${icon("ph-gear-six")}`,
 	hideHeader: true,
 };
 const INFO = ref(indexInfo);
@@ -81,43 +82,43 @@ const menuDef = computed(() => [
 		title: i18n.ts.basicSettings,
 		items: [
 			{
-				icon: "ph-user ph-bold ph-lg",
+				icon: `${icon("ph-user")}`,
 				text: i18n.ts.profile,
 				to: "/settings/profile",
 				active: currentPage.value?.route.name === "profile",
 			},
 			{
-				icon: "ph-keyhole ph-bold ph-lg",
+				icon: `${icon("ph-keyhole")}`,
 				text: i18n.ts.privacy,
 				to: "/settings/privacy",
 				active: currentPage.value?.route.name === "privacy",
 			},
 			{
-				icon: "ph-smiley ph-bold ph-lg",
+				icon: `${icon("ph-smiley")}`,
 				text: i18n.ts.reaction,
 				to: "/settings/reaction",
 				active: currentPage.value?.route.name === "reaction",
 			},
 			{
-				icon: "ph-cloud ph-bold ph-lg",
+				icon: `${icon("ph-cloud")}`,
 				text: i18n.ts.drive,
 				to: "/settings/drive",
 				active: currentPage.value?.route.name === "drive",
 			},
 			{
-				icon: "ph-bell ph-bold ph-lg",
+				icon: `${icon("ph-bell")}`,
 				text: i18n.ts.notifications,
 				to: "/settings/notifications",
 				active: currentPage.value?.route.name === "notifications",
 			},
 			{
-				icon: "ph-envelope-simple-open ph-bold ph-lg",
+				icon: `${icon("ph-envelope-simple-open")}`,
 				text: i18n.ts.email,
 				to: "/settings/email",
 				active: currentPage.value?.route.name === "email",
 			},
 			{
-				icon: "ph-lock ph-bold ph-lg",
+				icon: `${icon("ph-lock")}`,
 				text: i18n.ts.security,
 				to: "/settings/security",
 				active: currentPage.value?.route.name === "security",
@@ -128,37 +129,37 @@ const menuDef = computed(() => [
 		title: i18n.ts.clientSettings,
 		items: [
 			{
-				icon: "ph-gear-six ph-bold ph-lg",
+				icon: `${icon("ph-gear-six")}`,
 				text: i18n.ts.general,
 				to: "/settings/general",
 				active: currentPage.value?.route.name === "general",
 			},
 			{
-				icon: "ph-palette ph-bold ph-lg",
+				icon: `${icon("ph-palette")}`,
 				text: i18n.ts.theme,
 				to: "/settings/theme",
 				active: currentPage.value?.route.name === "theme",
 			},
 			{
-				icon: "ph-list ph-bold ph-lg",
+				icon: `${icon("ph-list")}`,
 				text: i18n.ts.navbar,
 				to: "/settings/navbar",
 				active: currentPage.value?.route.name === "navbar",
 			},
 			{
-				icon: "ph-traffic-signal ph-bold ph-lg",
+				icon: `${icon("ph-traffic-signal")}`,
 				text: i18n.ts.statusbar,
 				to: "/settings/statusbar",
 				active: currentPage.value?.route.name === "statusbar",
 			},
 			{
-				icon: "ph-speaker-high ph-bold ph-lg",
+				icon: `${icon("ph-speaker-high")}`,
 				text: i18n.ts.sounds,
 				to: "/settings/sounds",
 				active: currentPage.value?.route.name === "sounds",
 			},
 			{
-				icon: "ph-plug ph-bold ph-lg",
+				icon: `${icon("ph-plug")}`,
 				text: i18n.ts.plugins,
 				to: "/settings/plugin",
 				active: currentPage.value?.route.name === "plugin",
@@ -169,49 +170,49 @@ const menuDef = computed(() => [
 		title: i18n.ts.otherSettings,
 		items: [
 			{
-				icon: "ph-airplane-takeoff ph-bold ph-lg",
+				icon: `${icon("ph-airplane-takeoff")}`,
 				text: i18n.ts.migration,
 				to: "/settings/migration",
 				active: currentPage.value?.route.name === "migration",
 			},
 			{
-				icon: "ph-package ph-bold ph-lg",
+				icon: `${icon("ph-package")}`,
 				text: i18n.ts.importAndExport,
 				to: "/settings/import-export",
 				active: currentPage.value?.route.name === "import-export",
 			},
 			{
-				icon: "ph-speaker-none ph-bold ph-lg",
+				icon: `${icon("ph-speaker-none")}`,
 				text: i18n.ts.instanceMute,
 				to: "/settings/instance-mute",
 				active: currentPage.value?.route.name === "instance-mute",
 			},
 			{
-				icon: "ph-prohibit ph-bold ph-lg",
+				icon: `${icon("ph-prohibit")}`,
 				text: i18n.ts.muteAndBlock,
 				to: "/settings/mute-block",
 				active: currentPage.value?.route.name === "mute-block",
 			},
 			{
-				icon: "ph-speaker-x ph-bold ph-lg",
+				icon: `${icon("ph-speaker-x")}`,
 				text: i18n.ts.wordMute,
 				to: "/settings/word-mute",
 				active: currentPage.value?.route.name === "word-mute",
 			},
 			{
-				icon: "ph-key ph-bold ph-lg",
+				icon: `${icon("ph-key")}`,
 				text: "API",
 				to: "/settings/api",
 				active: currentPage.value?.route.name === "api",
 			},
 			{
-				icon: "ph-webhooks-logo ph-bold ph-lg",
+				icon: `${icon("ph-webhooks-logo")}`,
 				text: "Webhook",
 				to: "/settings/webhook",
 				active: currentPage.value?.route.name === "webhook",
 			},
 			{
-				icon: "ph-dots-three-outline ph-bold ph-lg",
+				icon: `${icon("ph-dots-three-outline")}`,
 				text: i18n.ts.other,
 				to: "/settings/other",
 				active: currentPage.value?.route.name === "other",
@@ -221,14 +222,14 @@ const menuDef = computed(() => [
 	{
 		items: [
 			{
-				icon: "ph-floppy-disk ph-bold ph-lg",
+				icon: `${icon("ph-floppy-disk")}`,
 				text: i18n.ts.preferencesBackups,
 				to: "/settings/preferences-backups",
 				active: currentPage.value?.route.name === "preferences-backups",
 			},
 			{
 				type: "button",
-				icon: "ph-trash ph-bold ph-lg",
+				icon: `${icon("ph-trash")}`,
 				text: i18n.ts.clearCache,
 				action: () => {
 					localStorage.removeItem("locale");
@@ -238,7 +239,7 @@ const menuDef = computed(() => [
 			},
 			{
 				type: "button",
-				icon: "ph-sign-in ph-bold ph-lg fa-flip-horizontal",
+				icon: `${icon("ph-sign-in fa-flip-horizontal")}`,
 				text: i18n.ts.logout,
 				action: async () => {
 					const { canceled } = await os.confirm({
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index 9ded2bd53..1826fcc2c 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -14,7 +14,7 @@
 			:disabled="!changed"
 			class="_formBlock"
 			@click="save()"
-			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			><i :class="icon('ph-floppy-disk-back')"></i>
 			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
@@ -29,6 +29,7 @@ import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const instanceMutes = ref($i!.mutedInstances.join("\n"));
 const changed = ref(false);
@@ -56,6 +57,6 @@ watch(instanceMutes, () => {
 
 definePageMetadata({
 	title: i18n.ts.instanceMute,
-	icon: "ph-speaker-none ph-bold ph-lg",
+	icon: `${icon("ph-speaker-none")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/migration.vue b/packages/client/src/pages/settings/migration.vue
index 02ef7b37f..d05f47377 100644
--- a/packages/client/src/pages/settings/migration.vue
+++ b/packages/client/src/pages/settings/migration.vue
@@ -7,7 +7,7 @@
 			}}</FormInfo>
 			<FormInput v-model="moveToAccount" class="_formBlock">
 				<template #prefix
-					><i class="ph-airplane-takeoff ph-bold ph-lg"></i
+					><i :class="icon('ph-airplane-takeoff')"></i
 				></template>
 				<template #label>{{ i18n.ts.moveToLabel }}</template>
 			</FormInput>
@@ -27,7 +27,7 @@
 				class="_formBlock"
 			>
 				<template #prefix
-					><i class="ph-airplane-landing ph-bold ph-lg"></i
+					><i :class="icon('ph-airplane-landing')"></i
 				></template>
 				<template #label>{{
 					`#${i + 1} ${i18n.ts.moveFromLabel}`
@@ -39,11 +39,10 @@
 				inline
 				style="margin-right: 8px"
 				@click="add"
-				><i class="ph-plus ph-bold ph-lg"></i>
-				{{ i18n.ts.add }}</FormButton
+				><i :class="icon('ph-plus')"></i> {{ i18n.ts.add }}</FormButton
 			>
 			<FormButton class="button" inline primary @click="save">
-				<i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				<i :class="icon('ph-floppy-disk-back')"></i>
 				{{ i18n.ts.save }}
 			</FormButton>
 		</FormSection>
@@ -62,6 +61,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
+import icon from "@/scripts/icon";
 
 const moveToAccount = ref("");
 const accountAlias = ref([""]);
@@ -107,6 +107,6 @@ async function move(account): Promise<void> {
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: "ph-lock ph-bold ph-lg",
+	icon: `${icon("ph-lock")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index cedf618ab..0f1f8d552 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -49,6 +49,7 @@ import FormLink from "@/components/form/link.vue";
 import { userPage } from "@/filters/user";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const tab = ref("mute");
 
@@ -64,6 +65,6 @@ const blockingPagination = {
 
 definePageMetadata({
 	title: i18n.ts.muteAndBlock,
-	icon: "ph-prohibit ph-bold ph-lg",
+	icon: `${icon("ph-prohibit")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index 77e87b41c..7410fd221 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -7,11 +7,15 @@
 					:key="index"
 					class="item"
 				>
-					<i class="itemHandle ph-list ph-bold ph-lg"></i>
+					<i class="itemHandle ph-list ph-lg"></i>
 					<i
 						:class="
-							navbarItemDef[element]?.icon ??
-							'ph-arrows-out-line-vertical ph-bold ph-lg'
+							icon(
+								`${
+									navbarItemDef[element]?.icon ??
+									'ph-arrows-out-line-vertical'
+								}`,
+							)
 						"
 					></i>
 					<span class="itemText">{{
@@ -22,18 +26,18 @@
 						class="_button itemRemove"
 						@click="removeItem(index)"
 					>
-						<i class="ph-x ph-bold ph-lg"></i>
+						<i :class="icon('ph-x')"></i>
 					</button>
 				</div>
 			</VueDraggable>
 			<FormSection>
 				<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
 					<FormButton primary @click="addItem">
-						<i class="ph-plus ph-bold ph-lg"></i>
+						<i :class="icon('ph-plus')"></i>
 						{{ i18n.ts.addItem }}
 					</FormButton>
 					<FormButton @click="reloadAsk">
-						<i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+						<i :class="icon('ph-floppy-disk-back')"></i>
 						{{ i18n.ts.apply }}
 					</FormButton>
 				</div>
@@ -54,7 +58,7 @@
 		</FormRadios>
 
 		<FormButton danger class="_formBlock" @click="reset()"
-			><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+			><i :class="icon('ph-arrow-clockwise')"></i>
 			{{ i18n.ts.default }}</FormButton
 		>
 	</div>
@@ -73,6 +77,7 @@ import { defaultStore } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const items = ref(defaultStore.state.menu);
 
@@ -132,7 +137,7 @@ watch(menuDisplay, async () => {
 
 definePageMetadata({
 	title: i18n.ts.navbar,
-	icon: "ph-list-bullets ph-bold ph-lg",
+	icon: `${icon("ph-list-bullets")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 5c3c2e0a0..0e0f954a5 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="_formRoot">
 		<FormButton class="_formBlock" @click="configure"
-			><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template
+			><template #icon><i :class="icon('ph-gear-six')"></i></template
 			>{{ i18n.ts.notificationSetting }}</FormButton
 		>
 		<FormSection>
@@ -58,6 +58,7 @@ import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
+import icon from "@/scripts/icon";
 
 const allowButton =
 	shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
@@ -124,6 +125,6 @@ function onChangeSendReadMessage(v: boolean) {
 
 definePageMetadata({
 	title: i18n.ts.notifications,
-	icon: "ph-bell ph-bold ph-lg",
+	icon: `${icon("ph-bell")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 0fd44a08a..5e84df9ab 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -5,12 +5,12 @@
 		}}</FormLink>
 
 		<FormLink to="/registry" class="_formBlock"
-			><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template
+			><template #icon><i :class="icon('ph-gear-six')"></i></template
 			>{{ i18n.ts.registry }}</FormLink
 		>
 
 		<FormLink to="/settings/delete-account" class="_formBlock"
-			><template #icon><i class="ph-warning ph-bold ph-lg"></i></template
+			><template #icon><i :class="icon('ph-warning')"></i></template
 			>{{ i18n.ts.closeAccount }}</FormLink
 		>
 	</div>
@@ -20,9 +20,10 @@
 import FormLink from "@/components/form/link.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: "ph-dots-three-outline ph-bold ph-lg",
+	icon: `${icon("ph-dots-three-outline")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index ad861fca3..ef6c60969 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -10,7 +10,7 @@
 
 		<div class="_formBlock">
 			<FormButton :disabled="code == null" primary inline @click="install"
-				><i class="ph-check ph-bold ph-lg"></i>
+				><i :class="icon('ph-check')"></i>
 				{{ i18n.ts.install }}</FormButton
 			>
 		</div>
@@ -30,6 +30,7 @@ import { ColdDeviceStorage } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const code = ref(null);
 
@@ -146,6 +147,6 @@ async function install() {
 
 definePageMetadata({
 	title: i18n.ts._plugin.install,
-	icon: "ph-download-simple ph-bold ph-lg",
+	icon: `${icon("ph-download-simple")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index a44295635..8633f97a6 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -2,7 +2,7 @@
 	<div class="_formRoot">
 		<FormLink to="/settings/plugin/install"
 			><template #icon
-				><i class="ph-download-simple ph-bold ph-lg"></i></template
+				><i :class="icon('ph-download-simple')"></i></template
 			>{{ i18n.ts._plugin.install }}</FormLink
 		>
 
@@ -46,11 +46,11 @@
 						v-if="plugin.config"
 						inline
 						@click="config(plugin)"
-						><i class="ph-gear-six ph-bold ph-lg"></i>
+						><i :class="icon('ph-gear-six')"></i>
 						{{ i18n.ts.settings }}</MkButton
 					>
 					<MkButton inline danger @click="uninstall(plugin)"
-						><i class="ph-trash ph-bold ph-lg"></i>
+						><i :class="icon('ph-trash')"></i>
 						{{ i18n.ts.uninstall }}</MkButton
 					>
 				</div>
@@ -71,6 +71,7 @@ import { ColdDeviceStorage } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const plugins = ref(ColdDeviceStorage.get("plugins"));
 
@@ -116,6 +117,6 @@ function changeActive(plugin, active) {
 
 definePageMetadata({
 	title: i18n.ts.plugins,
-	icon: "ph-plug ph-bold ph-lg",
+	icon: `${icon("ph-plug")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index 4e97b0562..e5197dc48 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -2,15 +2,15 @@
 	<div class="_formRoot">
 		<div :class="$style.buttons">
 			<MkButton inline primary @click="saveNew">{{
-				ts._preferencesBackups.saveNew
+				i18n.ts._preferencesBackups.saveNew
 			}}</MkButton>
 			<MkButton inline @click="loadFile">{{
-				ts._preferencesBackups.loadFile
+				i18n.ts._preferencesBackups.loadFile
 			}}</MkButton>
 		</div>
 
 		<FormSection>
-			<template #label>{{ ts._preferencesBackups.list }}</template>
+			<template #label>{{ i18n.ts._preferencesBackups.list }}</template>
 			<template v-if="profiles && Object.keys(profiles).length > 0">
 				<div
 					v-for="(profile, id) in profiles"
@@ -23,7 +23,7 @@
 					<div :class="$style.profileName">{{ profile.name }}</div>
 					<div :class="$style.profileTime">
 						{{
-							t("_preferencesBackups.createdAt", {
+							i18n.t("_preferencesBackups.createdAt", {
 								date: new Date(
 									profile.createdAt,
 								).toLocaleDateString(),
@@ -35,7 +35,7 @@
 					</div>
 					<div v-if="profile.updatedAt" :class="$style.profileTime">
 						{{
-							t("_preferencesBackups.updatedAt", {
+							i18n.t("_preferencesBackups.updatedAt", {
 								date: new Date(
 									profile.updatedAt,
 								).toLocaleDateString(),
@@ -48,7 +48,7 @@
 				</div>
 			</template>
 			<div v-else-if="profiles">
-				<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+				<MkInfo>{{ i18n.ts._preferencesBackups.noBackups }}</MkInfo>
 			</div>
 			<MkLoading v-else />
 		</FormSection>
@@ -69,7 +69,7 @@ import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { host, version } from "@/config";
 import { definePageMetadata } from "@/scripts/page-metadata";
-const { t, ts } = i18n;
+import icon from "@/scripts/icon";
 
 useCssModule();
 
@@ -119,6 +119,7 @@ const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [
 	"showTimelineReplies",
 	"detectPostLanguage",
 	"openServerInfo",
+	"iconSet",
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	"lightTheme",
@@ -232,14 +233,14 @@ async function saveNew(): Promise<void> {
 	if (!profiles.value) return;
 
 	const { canceled, result: name } = await os.inputText({
-		title: ts._preferencesBackups.inputName,
+		title: i18n.ts._preferencesBackups.inputName,
 	});
 	if (canceled) return;
 
 	if (Object.values(profiles.value).some((x) => x.name === name)) {
 		return os.alert({
-			title: ts._preferencesBackups.cannotSave,
-			text: t("_preferencesBackups.nameAlreadyExists", { name }),
+			title: i18n.ts._preferencesBackups.cannotSave,
+			text: i18n.t("_preferencesBackups.nameAlreadyExists", { name }),
 		});
 	}
 
@@ -272,8 +273,8 @@ function loadFile(): void {
 		if (file.type !== "application/json") {
 			return os.alert({
 				type: "error",
-				title: ts._preferencesBackups.cannotLoad,
-				text: ts._preferencesBackups.invalidFile,
+				title: i18n.ts._preferencesBackups.cannotLoad,
+				text: i18n.ts._preferencesBackups.invalidFile,
 			});
 		}
 
@@ -284,7 +285,7 @@ function loadFile(): void {
 		} catch (err) {
 			return os.alert({
 				type: "error",
-				title: ts._preferencesBackups.cannotLoad,
+				title: i18n.ts._preferencesBackups.cannotLoad,
 				text: err?.message,
 			});
 		}
@@ -314,8 +315,10 @@ async function applyProfile(id: string): Promise<void> {
 
 	const { canceled: cancel1 } = await os.confirm({
 		type: "warning",
-		title: ts._preferencesBackups.apply,
-		text: t("_preferencesBackups.applyConfirm", { name: profile.name }),
+		title: i18n.ts._preferencesBackups.apply,
+		text: i18n.t("_preferencesBackups.applyConfirm", {
+			name: profile.name,
+		}),
 	});
 	if (cancel1) return;
 
@@ -360,7 +363,7 @@ async function applyProfile(id: string): Promise<void> {
 
 	const { canceled: cancel2 } = await os.confirm({
 		type: "info",
-		text: ts.reloadToApplySetting,
+		text: i18n.ts.reloadToApplySetting,
 	});
 	if (cancel2) return;
 
@@ -372,8 +375,8 @@ async function deleteProfile(id: string): Promise<void> {
 
 	const { canceled } = await os.confirm({
 		type: "info",
-		title: ts.delete,
-		text: t("deleteAreYouSure", { x: profiles.value[id].name }),
+		title: i18n.ts.delete,
+		text: i18n.t("deleteAreYouSure", { x: profiles.value[id].name }),
 	});
 	if (canceled) return;
 
@@ -388,8 +391,8 @@ async function save(id: string): Promise<void> {
 
 	const { canceled } = await os.confirm({
 		type: "info",
-		title: ts._preferencesBackups.save,
-		text: t("_preferencesBackups.saveConfirm", { name }),
+		title: i18n.ts._preferencesBackups.save,
+		text: i18n.t("_preferencesBackups.saveConfirm", { name }),
 	});
 	if (canceled) return;
 
@@ -412,14 +415,14 @@ async function rename(id: string): Promise<void> {
 	if (!profiles.value) return;
 
 	const { canceled: cancel1, result: name } = await os.inputText({
-		title: ts._preferencesBackups.inputName,
+		title: i18n.ts._preferencesBackups.inputName,
 	});
 	if (cancel1 || profiles.value[id].name === name) return;
 
 	if (Object.values(profiles.value).some((x) => x.name === name)) {
 		return os.alert({
-			title: ts._preferencesBackups.cannotSave,
-			text: t("_preferencesBackups.nameAlreadyExists", { name }),
+			title: i18n.ts._preferencesBackups.cannotSave,
+			text: i18n.t("_preferencesBackups.nameAlreadyExists", { name }),
 		});
 	}
 
@@ -427,8 +430,8 @@ async function rename(id: string): Promise<void> {
 
 	const { canceled: cancel2 } = await os.confirm({
 		type: "info",
-		title: ts._preferencesBackups.rename,
-		text: t("_preferencesBackups.renameConfirm", {
+		title: i18n.ts._preferencesBackups.rename,
+		text: i18n.t("_preferencesBackups.renameConfirm", {
 			old: registry.name,
 			new: name,
 		}),
@@ -449,14 +452,14 @@ function menu(ev: MouseEvent, profileId: string) {
 	return os.popupMenu(
 		[
 			{
-				text: ts._preferencesBackups.apply,
-				icon: "ph-caret-circle-down ph-bold ph-lg",
+				text: i18n.ts._preferencesBackups.apply,
+				icon: `${icon("ph-caret-circle-down")}`,
 				action: () => applyProfile(profileId),
 			},
 			{
 				type: "a",
-				text: ts.download,
-				icon: "ph-download-simple ph-bold ph-lg",
+				text: i18n.ts.download,
+				icon: `${icon("ph-download-simple")}`,
 				href: URL.createObjectURL(
 					new Blob(
 						[JSON.stringify(profiles.value[profileId], null, 2)],
@@ -469,19 +472,19 @@ function menu(ev: MouseEvent, profileId: string) {
 			},
 			null,
 			{
-				text: ts.rename,
-				icon: "ph-cursor-text ph-bold ph-lg",
+				text: i18n.ts.rename,
+				icon: `${icon("ph-cursor-text")}`,
 				action: () => rename(profileId),
 			},
 			{
-				text: ts._preferencesBackups.save,
-				icon: "ph-floppy-disk ph-bold ph-lg",
+				text: i18n.ts._preferencesBackups.save,
+				icon: `${icon("ph-floppy-disk")}`,
 				action: () => save(profileId),
 			},
 			null,
 			{
-				text: ts._preferencesBackups.delete,
-				icon: "ph-trash ph-bold ph-lg",
+				text: i18n.ts._preferencesBackups.delete,
+				icon: `${icon("ph-trash")}`,
 				action: () => deleteProfile(profileId),
 				danger: true,
 			},
@@ -514,8 +517,8 @@ onUnmounted(() => {
 
 definePageMetadata(
 	computed(() => ({
-		title: ts.preferencesBackups,
-		icon: "ph-floppy-disk ph-bold ph-lg",
+		title: i18n.ts.preferencesBackups,
+		icon: `${icon("ph-floppy-disk")}`,
 		bg: "var(--bg)",
 	})),
 );
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index acadf4d5d..3b0e15418 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -159,6 +159,7 @@ import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const isLocked = ref($i.isLocked);
 const autoAcceptFollowed = ref($i.autoAcceptFollowed);
@@ -198,6 +199,6 @@ function save() {
 
 definePageMetadata({
 	title: i18n.ts.privacy,
-	icon: "ph-keyhole ph-bold ph-lg",
+	icon: `${icon("ph-keyhole")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 7362d86f5..3d9eb2246 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -58,9 +58,7 @@
 
 		<FormInput v-model="profile.location" manual-save class="_formBlock">
 			<template #label>{{ i18n.ts.location }}</template>
-			<template #prefix
-				><i class="ph-map-pin ph-bold ph-lg"></i
-			></template>
+			<template #prefix><i :class="icon('ph-map-pin')"></i></template>
 			<template #caption>{{
 				i18n.ts._profile.locationDescription
 			}}</template>
@@ -73,7 +71,7 @@
 			class="_formBlock"
 		>
 			<template #label>{{ i18n.ts.birthday }}</template>
-			<template #prefix><i class="ph-cake ph-bold ph-lg"></i></template>
+			<template #prefix><i :class="icon('ph-cake')"></i></template>
 		</FormInput>
 
 		<FormSelect v-model="profile.lang" class="_formBlock">
@@ -85,9 +83,7 @@
 
 		<FormSlot class="_formBlock">
 			<FormFolder>
-				<template #icon
-					><i class="ph-table ph-bold ph-lg"></i
-				></template>
+				<template #icon><i :class="icon('ph-table')"></i></template>
 				<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
 
 				<div class="_formRoot">
@@ -116,11 +112,11 @@
 						inline
 						style="margin-right: 8px"
 						@click="addField"
-						><i class="ph-plus ph-bold ph-lg"></i>
+						><i :class="icon('ph-plus')"></i>
 						{{ i18n.ts.add }}</MkButton
 					>
 					<MkButton inline primary @click="saveFields"
-						><i class="ph-check ph-bold ph-lg"></i>
+						><i :class="icon('ph-check')"></i>
 						{{ i18n.ts.save }}</MkButton
 					>
 				</div>
@@ -178,6 +174,7 @@ import { $i } from "@/account";
 import { langmap } from "@/scripts/langmap";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { host } from "@/config";
+import icon from "@/scripts/icon";
 
 const profile = reactive({
 	name: $i?.name,
@@ -297,7 +294,7 @@ function changeBanner(ev) {
 
 definePageMetadata({
 	title: i18n.ts.profile,
-	icon: "ph-user ph-bold ph-lg",
+	icon: `${icon("ph-user")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index ccd670358..0b352ac53 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -32,7 +32,7 @@
 						</div>
 					</VueDraggable>
 					<button class="_button add" @click="chooseEmoji">
-						<i class="ph-plus ph-bold ph-lg"></i>
+						<i :class="icon('ph-plus')"></i>
 					</button>
 				</div>
 				<template #caption
@@ -97,13 +97,11 @@
 			<FormSection>
 				<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
 					<FormButton inline @click="preview"
-						><i class="ph-eye ph-bold ph-lg"></i>
+						><i :class="icon('ph-eye')"></i>
 						{{ i18n.ts.preview }}</FormButton
 					>
 					<FormButton inline danger @click="setDefault"
-						><i
-							class="ph-arrow-counter-clockwise ph-bold ph-lg"
-						></i>
+						><i :class="icon('ph-arrow-counter-clockwise')"></i>
 						{{ i18n.ts.default }}</FormButton
 					>
 				</div>
@@ -135,6 +133,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { deepClone } from "@/scripts/clone";
 import { unisonReload } from "@/scripts/unison-reload";
 import { addSkinTone } from "@/scripts/emojilist";
+import icon from "@/scripts/icon";
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
@@ -239,7 +238,7 @@ watch(reactionPickerSkinTone.value, async () => {
 
 definePageMetadata({
 	title: i18n.ts.reaction,
-	icon: "ph-smiley ph-bold ph-lg",
+	icon: `${icon("ph-smiley")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index e80d054c7..6d7738136 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -23,11 +23,13 @@
 							<header>
 								<i
 									v-if="item.success"
-									class="ph-check ph-bold ph-lg icon succ"
+									:class="icon('ph-check icon succ')"
 								></i>
 								<i
 									v-else
-									class="ph-circle-wavy-warning ph-bold ph-lg icon fail"
+									:class="
+										icon('ph-circle-wavy-warning icon fail')
+									"
 								></i>
 								<code class="ip _monospace">{{ item.ip }}</code>
 								<MkTime :time="item.createdAt" class="time" />
@@ -41,7 +43,7 @@
 		<FormSection>
 			<FormSlot>
 				<MkButton danger @click="regenerateToken"
-					><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+					><i :class="icon('ph-arrows-clockwise')"></i>
 					{{ i18n.ts.regenerateLoginToken }}</MkButton
 				>
 				<template #caption>{{
@@ -61,6 +63,7 @@ import MkPagination from "@/components/MkPagination.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const pagination = {
 	endpoint: "i/signin-history" as const,
@@ -119,7 +122,7 @@ function regenerateToken() {
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: "ph-lock ph-bold ph-lg",
+	icon: `${icon("ph-lock")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index 12f4456fe..084e16b4c 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -24,14 +24,14 @@
 						sounds[type].type || i18n.ts.none
 					}}</template>
 					<template #suffixIcon
-						><i class="ph-caret-down ph-bold ph-lg"></i
+						><i :class="icon('ph-caret-down')"></i
 					></template>
 				</FormButton>
 			</div>
 		</FormSection>
 
 		<FormButton danger class="_formBlock" @click="reset()"
-			><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+			><i :class="icon('ph-arrow-clockwise')"></i>
 			{{ i18n.ts.default }}</FormButton
 		>
 	</div>
@@ -47,6 +47,7 @@ import { ColdDeviceStorage } from "@/store";
 import { playFile } from "@/scripts/sound";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const masterVolume = computed({
 	get: () => {
@@ -118,6 +119,6 @@ function reset() {
 
 definePageMetadata({
 	title: i18n.ts.sounds,
-	icon: "ph-speaker-high ph-bold ph-lg",
+	icon: `${icon("ph-speaker-high")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/statusbar.vue
index 29afb41ed..deebe6a72 100644
--- a/packages/client/src/pages/settings/statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.vue
@@ -19,6 +19,7 @@ import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const statusbars = defaultStore.reactiveState.statusbars;
 
@@ -42,7 +43,7 @@ async function add() {
 
 definePageMetadata({
 	title: i18n.ts.statusbar,
-	icon: "ph-list-bullets ph-bold ph-lg",
+	icon: `${icon("ph-list-bullets")}`,
 	bg: "var(--bg)",
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 5d2990ffb..5d038fd47 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -12,7 +12,7 @@
 				:disabled="installThemeCode == null"
 				inline
 				@click="() => preview(installThemeCode)"
-				><i class="ph-eye ph-bold ph-lg"></i>
+				><i :class="icon('ph-eye')"></i>
 				{{ i18n.ts.preview }}</FormButton
 			>
 			<FormButton
@@ -20,7 +20,7 @@
 				primary
 				inline
 				@click="() => install(installThemeCode)"
-				><i class="ph-check ph-bold ph-lg"></i>
+				><i :class="icon('ph-check')"></i>
 				{{ i18n.ts.install }}</FormButton
 			>
 		</div>
@@ -38,6 +38,7 @@ import * as os from "@/os";
 import { addTheme, getThemes } from "@/theme-store";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const installThemeCode = ref(null);
 
@@ -88,6 +89,6 @@ async function install(code: string): Promise<void> {
 
 definePageMetadata({
 	title: i18n.ts._theme.install,
-	icon: "ph-download-simple ph-bold ph-lg",
+	icon: `${icon("ph-download-simple")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index cedaabe2f..950096be5 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -47,7 +47,7 @@
 				class="_formBlock"
 				danger
 				@click="uninstall()"
-				><i class="ph-trash ph-bold ph-lg"></i>
+				><i :class="icon('ph-trash')"></i>
 				{{ i18n.ts.uninstall }}</FormButton
 			>
 		</template>
@@ -68,6 +68,7 @@ import * as os from "@/os";
 import { getThemes, removeTheme } from "@/theme-store";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
@@ -104,6 +105,6 @@ function uninstall() {
 
 definePageMetadata({
 	title: i18n.ts._theme.manage,
-	icon: "ph-folder-notch-open ph-bold ph-lg",
+	icon: `${icon("ph-folder-notch-open")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 399e0dcdc..32a84fe51 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -36,9 +36,7 @@
 		<div class="selects _formBlock">
 			<FormSelect v-model="lightThemeId" large class="select">
 				<template #label>{{ i18n.ts.themeForLightMode }}</template>
-				<template #prefix
-					><i class="ph-sun ph-bold ph-lg"></i
-				></template>
+				<template #prefix><i :class="icon('ph-sun')"></i></template>
 				<option
 					v-if="instanceLightTheme"
 					:key="'instance:' + instanceLightTheme.id"
@@ -70,9 +68,7 @@
 			</FormSelect>
 			<FormSelect v-model="darkThemeId" large class="select">
 				<template #label>{{ i18n.ts.themeForDarkMode }}</template>
-				<template #prefix
-					><i class="ph-moon ph-bold ph-lg"></i
-				></template>
+				<template #prefix><i :class="icon('ph-moon')"></i></template>
 				<option
 					v-if="instanceDarkTheme"
 					:key="'instance:' + instanceDarkTheme.id"
@@ -108,36 +104,30 @@
 			<div class="_formLinksGrid">
 				<FormLink to="/settings/theme/manage"
 					><template #icon
-						><i
-							class="ph-folder-notch-open ph-bold ph-lg"
-						></i></template
+						><i :class="icon('ph-folder-notch-open')"></i></template
 					>{{ i18n.ts._theme.manage
 					}}<template #suffix>{{ themesCount }}</template></FormLink
 				>
 				<FormLink to="https://assets.firefish.io/theme/list" external
 					><template #icon
-						><i class="ph-planet ph-bold ph-lg"></i></template
+						><i :class="icon('ph-planet')"></i></template
 					>{{ i18n.ts._theme.explore }}</FormLink
 				>
 				<FormLink to="/settings/theme/install"
 					><template #icon
-						><i
-							class="ph-download-simple ph-bold ph-lg"
-						></i></template
+						><i :class="icon('ph-download-simple')"></i></template
 					>{{ i18n.ts._theme.install }}</FormLink
 				>
 				<FormLink to="/theme-editor"
 					><template #icon
-						><i
-							class="ph-paint-brush-broad ph-bold ph-lg"
-						></i></template
+						><i :class="icon('ph-paint-brush-broad')"></i></template
 					>{{ i18n.ts._theme.make }}</FormLink
 				>
 			</div>
 		</FormSection>
 		<FormSection>
 			<FormLink to="/settings/custom-css" class="_formBlock"
-				><template #icon><i class="ph-code ph-bold ph-lg"></i></template
+				><template #icon><i :class="icon('ph-code')"></i></template
 				>{{ i18n.ts.customCss }}</FormLink
 			>
 		</FormSection>
@@ -171,6 +161,7 @@ import { instance } from "@/instance";
 import { uniqueBy } from "@/scripts/array";
 import { fetchThemes, getThemes } from "@/theme-store";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
@@ -273,7 +264,7 @@ function setWallpaper(event) {
 
 definePageMetadata({
 	title: i18n.ts.theme,
-	icon: "ph-palette ph-bold ph-lg",
+	icon: `${icon("ph-palette")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index d9b880129..a51678e63 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -9,7 +9,7 @@
 		</FormInput>
 
 		<FormInput v-model="secret" class="_formBlock">
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+			<template #prefix><i :class="icon('ph-lock')"></i></template>
 			<template #label>Secret</template>
 		</FormInput>
 
@@ -46,7 +46,7 @@
 			style="display: flex; gap: var(--margin); flex-wrap: wrap"
 		>
 			<FormButton primary inline @click="save"
-				><i class="ph-check ph-bold ph-lg"></i>
+				><i :class="icon('ph-check')"></i>
 				{{ i18n.ts.save }}</FormButton
 			>
 		</div>
@@ -63,6 +63,7 @@ import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	webhookId: string;
@@ -106,6 +107,6 @@ async function save(): Promise<void> {
 
 definePageMetadata({
 	title: "Edit webhook",
-	icon: "ph-webhooks-logo ph-bold ph-lg",
+	icon: `${icon("ph-webhooks-logo")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index a9084820b..ef6211378 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -9,7 +9,7 @@
 		</FormInput>
 
 		<FormInput v-model="secret" class="_formBlock">
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+			<template #prefix><i :class="icon('ph-lock')"></i></template>
 			<template #label>Secret</template>
 		</FormInput>
 
@@ -44,7 +44,7 @@
 			style="display: flex; gap: var(--margin); flex-wrap: wrap"
 		>
 			<FormButton primary inline @click="create"
-				><i class="ph-check ph-bold ph-lg"></i>
+				><i :class="icon('ph-check')"></i>
 				{{ i18n.ts.create }}</FormButton
 			>
 		</div>
@@ -61,6 +61,7 @@ import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const name = ref("");
 const url = ref("");
@@ -94,6 +95,6 @@ async function create(): Promise<void> {
 
 definePageMetadata({
 	title: "Create new webhook",
-	icon: "ph-webhooks-logo ph-bold ph-lg",
+	icon: `${icon("ph-webhooks-logo")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index 25ad31ca4..7204e4c5e 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -16,7 +16,7 @@
 						<template #icon>
 							<i
 								v-if="webhook.active === false"
-								class="ph-pause-circle ph-bold ph-lg"
+								:class="icon('ph-pause-circle')"
 							></i>
 							<i
 								v-else-if="webhook.latestStatus === null"
@@ -28,12 +28,12 @@
 										webhook.latestStatus,
 									)
 								"
-								class="ph-check ph-bold ph-lg"
+								:class="icon('ph-check')"
 								:style="{ color: 'var(--success)' }"
 							></i>
 							<i
 								v-else
-								class="ph-warning ph-bold ph-lg"
+								:class="icon('ph-warning')"
 								:style="{ color: 'var(--error)' }"
 							></i>
 						</template>
@@ -56,6 +56,7 @@ import MkPagination from "@/components/MkPagination.vue";
 import FormSection from "@/components/form/section.vue";
 import FormLink from "@/components/form/link.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const pagination = {
 	endpoint: "i/webhooks/list" as const,
@@ -64,6 +65,6 @@ const pagination = {
 
 definePageMetadata({
 	title: "Webhook",
-	icon: "ph-webhooks-logo ph-bold ph-lg",
+	icon: `${icon("ph-webhooks-logo")}`,
 });
 </script>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index c20f596be..7b2c45d04 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -54,7 +54,7 @@
 			</div>
 		</div>
 		<MkButton primary inline :disabled="!changed" @click="save()"
-			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			><i :class="icon('ph-floppy-disk-back')"></i>
 			{{ i18n.ts.save }}</MkButton
 		>
 	</div>
@@ -73,6 +73,7 @@ import { defaultStore } from "@/store";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const render = (mutedWords) =>
 	mutedWords
@@ -171,6 +172,6 @@ async function save() {
 
 definePageMetadata({
 	title: i18n.ts.wordMute,
-	icon: "ph-speaker-x ph-bold ph-lg",
+	icon: `${icon("ph-speaker-x")}`,
 });
 </script>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index edc508d45..49fb08549 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -42,6 +42,7 @@ import * as os from "@/os";
 import { mainRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const urlParams = new URLSearchParams(window.location.search);
 const localOnlyQuery = urlParams.get("localOnly");
@@ -189,7 +190,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.share,
-	icon: "ph-share-network ph-bold ph-lg",
+	icon: `${icon("ph-share-network")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index 510abc04b..de6f40ffb 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -10,6 +10,7 @@ import * as os from "@/os";
 import { login } from "@/account";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	code: string;
@@ -28,6 +29,6 @@ onMounted(async () => {
 
 definePageMetadata({
 	title: i18n.ts.signup,
-	icon: "ph-user ph-bold ph-lg",
+	icon: `${icon("ph-user")}`,
 });
 </script>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 1e285ad85..ab833a0f2 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -49,6 +49,7 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { defaultStore } from "@/store";
 import { deviceKind } from "@/scripts/device-kind";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -82,12 +83,12 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => [
 	{
 		key: "notes",
-		icon: "ph-note ph-bold ph-lg",
+		icon: `${icon("ph-note")}`,
 		title: i18n.ts.notes,
 	},
 	{
 		key: "users",
-		icon: "ph-users ph-bold ph-lg",
+		icon: `${icon("ph-users")}`,
 		title: i18n.ts.users,
 	},
 ]);
@@ -114,7 +115,7 @@ onMounted(() => {
 definePageMetadata(
 	computed(() => ({
 		title: props.tag,
-		icon: "ph-hash ph-bold ph-lg",
+		icon: `${icon("ph-hash")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 58a95633a..d7fba77d1 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -102,9 +102,7 @@
 				</FormFolder>
 
 				<FormFolder :default-open="false" class="_formBlock">
-					<template #icon
-						><i class="ph-code ph-bold ph-lg"></i
-					></template>
+					<template #icon><i :class="icon('ph-code')"></i></template>
 					<template #label>{{ i18n.ts.editCode }}</template>
 
 					<div class="_formRoot">
@@ -165,6 +163,7 @@ import { addTheme } from "@/theme-store";
 import { i18n } from "@/i18n";
 import { useLeaveGuard } from "@/scripts/use-leave-guard";
 import { definePageMetadata } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 const bgColors = [
 	{ color: "#f5f5f5", kind: "light", forPreview: "#f5f5f5" },
@@ -337,13 +336,13 @@ watch(theme, apply, { deep: true });
 const headerActions = computed(() => [
 	{
 		asFullButton: true,
-		icon: "ph-eye ph-bold ph-lg",
+		icon: `${icon("ph-eye")}`,
 		text: i18n.ts.preview,
 		handler: showPreview,
 	},
 	{
 		asFullButton: true,
-		icon: "ph-check ph-bold ph-lg",
+		icon: `${icon("ph-check")}`,
 		text: i18n.ts.saveAs,
 		handler: saveAs,
 	},
@@ -353,7 +352,7 @@ const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.themeEditor,
-	icon: "ph-palette ph-bold ph-lg",
+	icon: `${icon("ph-palette")}`,
 });
 </script>
 
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 13a68ebfa..3573e0052 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -11,7 +11,7 @@
 		<MkSpacer :content-max="800">
 			<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
 				<XPostForm
-					v-if="$store.reactiveState.showFixedPostForm.value"
+					v-if="defaultStore.reactiveState.showFixedPostForm.value"
 					class="post-form _block"
 					fixed
 				/>
@@ -77,6 +77,7 @@ import { instance } from "@/instance";
 import { $i } from "@/account";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
+import icon from "@/scripts/icon";
 import "swiper/scss";
 import "swiper/scss/virtual";
 
@@ -139,7 +140,7 @@ async function chooseList(ev: MouseEvent) {
 			{
 				type: "link" as const,
 				text: i18n.ts.manageLists,
-				icon: "ph-faders-horizontal ph-bold ph-lg",
+				icon: `${icon("ph-faders-horizontal")}`,
 				to: "/my/lists",
 			},
 		].concat(
@@ -162,7 +163,7 @@ async function chooseAntenna(ev: MouseEvent) {
 				type: "link" as const,
 				indicate: false,
 				text: i18n.ts.manageAntennas,
-				icon: "ph-faders-horizontal ph-bold ph-lg",
+				icon: `${icon("ph-faders-horizontal")}`,
 				to: "/my/antennas",
 			},
 		].concat(
@@ -193,20 +194,20 @@ function focus(): void {
 
 const headerActions = computed(() => [
 	{
-		icon: "ph-list-bullets ph-bold ph-lg",
+		icon: `${icon("ph-list-bullets")}`,
 		title: i18n.ts.lists,
 		text: i18n.ts.lists,
 		iconOnly: true,
 		handler: chooseList,
 	},
 	{
-		icon: "ph-flying-saucer ph-bold ph-lg",
+		icon: `${icon("ph-flying-saucer")}`,
 		title: i18n.ts.antennas,
 		text: i18n.ts.antennas,
 		iconOnly: true,
 		handler: chooseAntenna,
 	} /* **TODO: fix timetravel** {
-	icon: 'ph-calendar-blank ph-bold ph-lg',
+	icon: `${icon('ph-calendar-blank')}`,
 	title: i18n.ts.jumpToSpecifiedDate,
 	iconOnly: true,
 	handler: timetravel,
@@ -217,7 +218,7 @@ const headerTabs = computed(() => [
 	{
 		key: "home",
 		title: i18n.ts._timelines.home,
-		icon: "ph-house ph-bold ph-lg",
+		icon: `${icon("ph-house")}`,
 		iconOnly: true,
 	},
 	...(isLocalTimelineAvailable
@@ -225,7 +226,7 @@ const headerTabs = computed(() => [
 				{
 					key: "local",
 					title: i18n.ts._timelines.local,
-					icon: "ph-users ph-bold ph-lg",
+					icon: `${icon("ph-users")}`,
 					iconOnly: true,
 				},
 		  ]
@@ -235,7 +236,7 @@ const headerTabs = computed(() => [
 				{
 					key: "social",
 					title: i18n.ts._timelines.social,
-					icon: "ph-handshake ph-bold ph-lg",
+					icon: `${icon("ph-handshake")}`,
 					iconOnly: true,
 				},
 		  ]
@@ -245,7 +246,7 @@ const headerTabs = computed(() => [
 				{
 					key: "recommended",
 					title: i18n.ts._timelines.recommended,
-					icon: "ph-thumbs-up ph-bold ph-lg",
+					icon: `${icon("ph-thumbs-up")}`,
 					iconOnly: true,
 				},
 		  ]
@@ -255,7 +256,7 @@ const headerTabs = computed(() => [
 				{
 					key: "global",
 					title: i18n.ts._timelines.global,
-					icon: "ph-planet ph-bold ph-lg",
+					icon: `${icon("ph-planet")}`,
 					iconOnly: true,
 				},
 		  ]
@@ -267,14 +268,14 @@ definePageMetadata(
 		title: i18n.ts.timeline,
 		icon:
 			src.value === "local"
-				? "ph-users ph-bold ph-lg"
+				? "ph-users ph-lg"
 				: src.value === "social"
-				? "ph-handshake ph-bold ph-lg"
+				? "ph-handshake ph-lg"
 				: src.value === "recommended"
-				? "ph-thumbs-up ph-bold ph-lg"
+				? "ph-thumbs-up ph-lg"
 				: src.value === "global"
-				? "ph-planet ph-bold ph-lg"
-				: "ph-house ph-bold ph-lg",
+				? "ph-planet ph-lg"
+				: "ph-house ph-lg",
 	})),
 );
 
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 2840577dc..7c6585dcf 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -129,7 +129,7 @@
 										class="_link"
 										>{{ user.host }}
 										<i
-											class="ph-caret-right ph-bold ph-lg"
+											:class="icon('ph-caret-right')"
 										></i></MkA
 								></template>
 							</MkKeyValue>
@@ -165,7 +165,7 @@
 							v-if="user.host != null"
 							class="_formBlock"
 							@click="updateRemoteUser"
-							><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+							><i :class="icon('ph-arrows-clockwise')"></i>
 							{{ i18n.ts.updateRemoteUser }}</FormButton
 						>
 
@@ -208,14 +208,14 @@
 							inline
 							style="margin-bottom: 0.4rem"
 							@click="resetPassword"
-							><i class="ph-password ph-bold ph-lg"></i>
+							><i :class="icon('ph-password')"></i>
 							{{ i18n.ts.resetPassword }}</FormButton
 						>
 						<FormButton
 							v-if="user.host == null && iAmModerator"
 							inline
 							@click="sendModMail"
-							><i class="ph-warning-diamond ph-bold ph-lg"></i>
+							><i :class="icon('ph-warning-diamond')"></i>
 							{{ i18n.ts.sendModMail }}</FormButton
 						>
 						<FormButton
@@ -223,7 +223,7 @@
 							inline
 							danger
 							@click="delete2fa"
-							><i class="ph-key ph-bold ph-lg"></i>
+							><i :class="icon('ph-key')"></i>
 							{{ i18n.ts.delete2fa }}</FormButton
 						>
 						<FormButton
@@ -231,7 +231,7 @@
 							inline
 							danger
 							@click="deletePasskeys"
-							><i class="ph-poker-chip ph-bold ph-lg"></i>
+							><i :class="icon('ph-poker-chip')"></i>
 							{{ i18n.ts.deletePasskeys }}</FormButton
 						>
 						<FormButton
@@ -240,7 +240,7 @@
 							primary
 							danger
 							@click="deleteAccount"
-							><i class="ph-user-minus ph-bold ph-lg"></i>
+							><i :class="icon('ph-user-minus')"></i>
 							{{ i18n.ts.deleteAccount }}</FormButton
 						>
 					</div>
@@ -380,6 +380,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { iAmAdmin, iAmModerator } from "@/account";
 import { instance } from "@/instance";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	userId: string;
@@ -637,24 +638,24 @@ const headerTabs = computed(() =>
 		{
 			key: "overview",
 			title: i18n.ts.overview,
-			icon: "ph-info ph-bold ph-lg",
+			icon: `${icon("ph-info")}`,
 		},
 		iAmModerator
 			? {
 					key: "moderation",
 					title: i18n.ts.moderation,
-					icon: "ph-shield ph-bold ph-lg",
+					icon: `${icon("ph-shield")}`,
 			  }
 			: null,
 		{
 			key: "chart",
 			title: i18n.ts.charts,
-			icon: "ph-chart-bar ph-bold ph-lg",
+			icon: `${icon("ph-chart-bar")}`,
 		},
 		{
 			key: "raw",
 			title: "Raw",
-			icon: "ph-code ph-bold ph-lg",
+			icon: `${icon("ph-code")}`,
 		},
 	].filter((x) => x != null),
 );
@@ -662,7 +663,7 @@ const headerTabs = computed(() =>
 definePageMetadata(
 	computed(() => ({
 		title: user.value ? acct(user.value) : i18n.ts.userInfo,
-		icon: "ph-info ph-bold ph-lg",
+		icon: `${icon("ph-info")}`,
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index e46210d85..75ad30573 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -25,6 +25,7 @@ import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -63,12 +64,12 @@ const headerActions = computed(() =>
 	list.value
 		? [
 				{
-					icon: "ph-calendar-blank ph-bold ph-lg",
+					icon: `${icon("ph-calendar-blank")}`,
 					text: i18n.ts.jumpToSpecifiedDate,
 					handler: timetravel,
 				},
 				{
-					icon: "ph-gear-six ph-bold ph-lg",
+					icon: `${icon("ph-gear-six")}`,
 					text: i18n.ts.settings,
 					handler: settings,
 				},
@@ -83,7 +84,7 @@ definePageMetadata(
 		list.value
 			? {
 					title: list.value.name,
-					icon: "ph-list-bullets ph-bold ph-lg",
+					icon: `${icon("ph-list-bullets")}`,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index 35d8e6bb2..dcfca7dd5 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -23,6 +23,7 @@ import XFollowList from "./follow-list.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
@@ -58,7 +59,7 @@ definePageMetadata(
 	computed(() =>
 		user.value
 			? {
-					icon: "ph-user ph-bold ph-lg",
+					icon: `${icon("ph-user")}`,
 					title: user.value.name
 						? `${user.value.name} (@${user.value.username})`
 						: `@${user.value.username}`,
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index d6d872d19..c72fbf51d 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -23,6 +23,7 @@ import XFollowList from "./follow-list.vue";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
@@ -58,7 +59,7 @@ definePageMetadata(
 	computed(() =>
 		user.value
 			? {
-					icon: "ph-user ph-bold ph-lg",
+					icon: `${icon("ph-user")}`,
 					title: user.value.name
 						? `${user.value.name} (@${user.value.username})`
 						: `@${user.value.username}`,
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index ff3834fca..029b56aa6 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -51,9 +51,7 @@
 												padding: 5px;
 											"
 										>
-											<i
-												class="ph-warning ph-bold ph-lg"
-											></i>
+											<i :class="icon('ph-warning')"></i>
 											{{ i18n.ts.silenced }}
 										</span>
 										<span
@@ -63,9 +61,7 @@
 												padding: 5px;
 											"
 										>
-											<i
-												class="ph-warning ph-bold ph-lg"
-											></i>
+											<i :class="icon('ph-warning')"></i>
 											{{ i18n.ts.suspended }}
 										</span>
 									</div>
@@ -87,23 +83,23 @@
 										v-if="user.isAdmin"
 										v-tooltip.noDelay="i18n.ts.isAdmin"
 										style="color: var(--badge)"
-										><i class="ph-crown ph-bold ph-lg"></i
+										><i :class="icon('ph-crown')"></i
 									></span>
 									<span
 										v-if="!user.isAdmin && user.isModerator"
 										v-tooltip.noDelay="i18n.ts.isModerator"
 										style="color: var(--badge)"
-										><i class="ph-gavel ph-bold ph-lg"></i
+										><i :class="icon('ph-gavel')"></i
 									></span>
 									<span
 										v-if="user.isLocked"
 										v-tooltip.noDelay="i18n.ts.isLocked"
-										><i class="ph-lock ph-bold ph-lg"></i
+										><i :class="icon('ph-lock')"></i
 									></span>
 									<span
 										v-if="user.isBot"
 										v-tooltip.noDelay="i18n.ts.isBot"
-										><i class="ph-robot ph-bold ph-lg"></i
+										><i :class="icon('ph-robot')"></i
 									></span>
 									<span
 										v-if="
@@ -115,9 +111,7 @@
 										"
 										v-tooltip.noDelay="i18n.ts.isPatron"
 										style="color: var(--badge)"
-										><i
-											class="ph-hand-coins ph-bold ph-lg"
-										></i
+										><i :class="icon('ph-hand-coins')"></i
 									></span>
 								</div>
 							</div>
@@ -149,7 +143,7 @@
 										v-if="user.isSilenced"
 										style="color: var(--warn); padding: 5px"
 									>
-										<i class="ph-warning ph-bold ph-lg"></i>
+										<i :class="icon('ph-warning')"></i>
 										{{ i18n.ts.silenced }}
 									</span>
 									<span
@@ -159,7 +153,7 @@
 											padding: 5px;
 										"
 									>
-										<i class="ph-warning ph-bold ph-lg"></i>
+										<i :class="icon('ph-warning')"></i>
 										{{ i18n.ts.suspended }}
 									</span>
 								</div>
@@ -172,7 +166,7 @@
 									v-if="user.isAdmin"
 									v-tooltip.noDelay="i18n.ts.isAdmin"
 									style="color: var(--badge)"
-									><i class="ph-crown ph-bold ph-lg"></i
+									><i :class="icon('ph-crown')"></i
 								></span>
 								<span
 									v-if="!user.isAdmin && user.isModerator"
@@ -181,17 +175,17 @@
 										color: var(--badge);
 										margin-left: 0.5rem;
 									"
-									><i class="ph-gavel ph-bold ph-lg"></i
+									><i :class="icon('ph-gavel')"></i
 								></span>
 								<span
 									v-if="user.isLocked"
 									v-tooltip.noDelay="i18n.ts.isLocked"
-									><i class="ph-lock ph-bold ph-lg"></i
+									><i :class="icon('ph-lock')"></i
 								></span>
 								<span
 									v-if="user.isBot"
 									v-tooltip.noDelay="i18n.ts.isBot"
-									><i class="ph-robot ph-bold ph-lg"></i
+									><i :class="icon('ph-robot')"></i
 								></span>
 								<span
 									v-if="
@@ -203,7 +197,7 @@
 									"
 									v-tooltip.noDelay="i18n.ts.isPatron"
 									style="color: var(--badge)"
-									><i class="ph-hand-coins ph-bold ph-lg"></i
+									><i :class="icon('ph-hand-coins')"></i
 								></span>
 							</div>
 						</div>
@@ -235,9 +229,7 @@
 						<div class="fields system">
 							<dl v-if="user.location" class="field">
 								<dt class="name">
-									<i
-										class="ph-map-pin ph-bold ph-lg ph-fw ph-lg"
-									></i>
+									<i :class="icon('ph-map-pin ph-fw')"></i>
 									{{ i18n.ts.location }}
 								</dt>
 								<dd class="value">
@@ -246,9 +238,7 @@
 							</dl>
 							<dl v-if="user.birthday" class="field">
 								<dt class="name">
-									<i
-										class="ph-cake ph-bold ph-lg ph-fw ph-lg"
-									></i>
+									<i :class="icon('ph-cake ph-fw')"></i>
 									{{ i18n.ts.birthday }}
 								</dt>
 								<dd class="value">
@@ -263,7 +253,7 @@
 							<dl class="field">
 								<dt class="name">
 									<i
-										class="ph-calendar-blank ph-bold ph-lg ph-fw ph-lg"
+										:class="icon('ph-calendar-blank ph-fw')"
 									></i>
 									{{ i18n.ts.registeredDate }}
 								</dt>
@@ -288,7 +278,7 @@
 									<i
 										v-if="field.verified"
 										v-tooltip="i18n.ts.verifiedLink"
-										class="ph-bold ph-seal-check ph-lg ph-fw"
+										:class="icon('ph-seal-check ph-fw')"
 										style="padding: 5px"
 									></i>
 									<Mfm
@@ -404,6 +394,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { host } from "@/config";
+import icon from "@/scripts/icon";
 
 const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
 const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index e77fd3680..bfaf012a7 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,15 +1,12 @@
 <template>
 	<MkContainer>
 		<template #header
-			><i
-				class="ph-chart-bar ph-bold ph-lg"
-				style="margin-right: 0.5em"
-			></i
+			><i :class="icon('ph-chart-bar')" style="margin-right: 0.5em"></i
 			>{{ i18n.ts.activity }}</template
 		>
 		<template #func>
 			<button class="_button" @click="showMenu">
-				<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+				<i :class="icon('ph-dots-three-outline')"></i>
 			</button>
 		</template>
 
@@ -36,6 +33,7 @@ import MkContainer from "@/components/MkContainer.vue";
 import MkChart from "@/components/MkChart.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = withDefaults(
 	defineProps<{
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index ac98c4f20..a9859b075 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,7 +1,7 @@
 <template>
 	<MkContainer id="photos-container" :max-height="300" :foldable="true">
 		<template #header
-			><i class="ph-image ph-bold ph-lg" style="margin-right: 0.5em"></i
+			><i :class="icon('ph-image')" style="margin-right: 0.5em"></i
 			>{{ i18n.ts.images }}</template
 		>
 		<div class="ujigsodd">
@@ -37,6 +37,7 @@ import MkContainer from "@/components/MkContainer.vue";
 import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	user: firefish.entities.UserDetailed;
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 0213a14cf..a0c9f4326 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -38,6 +38,7 @@ import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
+import icon from "@/scripts/icon";
 
 const XHome = defineAsyncComponent(() => import("./home.vue"));
 const XReactions = defineAsyncComponent(() => import("./reactions.vue"));
@@ -85,7 +86,7 @@ const headerTabs = computed(() =>
 				{
 					key: "home",
 					title: i18n.ts.overview,
-					icon: "ph-user ph-bold ph-lg",
+					icon: `${icon("ph-user")}`,
 				},
 				...(($i && $i.id === user.value.id) ||
 				user.value.publicReactions
@@ -93,7 +94,7 @@ const headerTabs = computed(() =>
 							{
 								key: "reactions",
 								title: i18n.ts.reaction,
-								icon: "ph-smiley ph-bold ph-lg",
+								icon: `${icon("ph-smiley")}`,
 							},
 					  ]
 					: []),
@@ -102,17 +103,17 @@ const headerTabs = computed(() =>
 							{
 								key: "clips",
 								title: i18n.ts.clips,
-								icon: "ph-paperclip ph-bold ph-lg",
+								icon: `${icon("ph-paperclip")}`,
 							},
 							{
 								key: "pages",
 								title: i18n.ts.pages,
-								icon: "ph-file-text ph-bold ph-lg",
+								icon: `${icon("ph-file-text")}`,
 							},
 							{
 								key: "gallery",
 								title: i18n.ts.gallery,
-								icon: "ph-image-square ph-bold ph-lg",
+								icon: `${icon("ph-image-square")}`,
 							},
 					  ]
 					: []),
@@ -124,7 +125,7 @@ definePageMetadata(
 	computed(() =>
 		user.value
 			? {
-					icon: "ph-user ph-bold ph-lg",
+					icon: `${icon("ph-user")}`,
 					title: user.value.name
 						? `${user.value.name} (@${user.value.username})`
 						: `@${user.value.username}`,
diff --git a/packages/client/src/pages/verify-email.vue b/packages/client/src/pages/verify-email.vue
index 46b18b613..8123ee522 100644
--- a/packages/client/src/pages/verify-email.vue
+++ b/packages/client/src/pages/verify-email.vue
@@ -10,6 +10,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { useRouter } from "@/router";
+import icon from "@/scripts/icon";
 
 const router = useRouter();
 
@@ -30,6 +31,6 @@ onMounted(async () => {
 
 definePageMetadata({
 	title: "Verify email",
-	icon: "ph-user ph-bold ph-lg",
+	icon: `${icon("ph-user")}`,
 });
 </script>
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 49e560b4d..2c409a67f 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -25,7 +25,7 @@
 					class="icon"
 				/>
 				<button class="_button _acrylic menu" @click="showMenu">
-					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+					<i :class="icon('ph-dots-three-outline')"></i>
 				</button>
 				<div class="fg">
 					<h1>
@@ -108,6 +108,7 @@ import * as os from "@/os";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
 import { defaultReactions } from "@/store";
+import icon from "@/scripts/icon";
 
 const meta = ref();
 const stats = ref();
@@ -168,14 +169,14 @@ function showMenu(ev) {
 		[
 			{
 				text: i18n.ts.instanceInfo,
-				icon: "ph-info ph-bold ph-lg",
+				icon: `${icon("ph-info")}`,
 				action: () => {
 					os.pageWindow("/about");
 				},
 			},
 			{
 				text: i18n.ts.aboutFirefish,
-				icon: "ph-info ph-bold ph-lg",
+				icon: `${icon("ph-info")}`,
 				action: () => {
 					os.pageWindow("/about-firefish");
 				},
@@ -183,7 +184,7 @@ function showMenu(ev) {
 			instance.tosUrl
 				? {
 						text: i18n.ts.tos,
-						icon: "ph-scroll ph-bold ph-lg",
+						icon: `${icon("ph-scroll")}`,
 						action: () => {
 							window.open(instance.tosUrl, "_blank");
 						},
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 30aed2327..2758f11c2 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -80,6 +80,7 @@ import { host, instanceName } from "@/config";
 import * as os from "@/os";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
@@ -150,14 +151,14 @@ export default defineComponent({
 				[
 					{
 						text: i18n.t("aboutX", { x: instanceName }),
-						icon: "ph-info ph-bold ph-lg",
+						icon: `${icon("ph-info")}`,
 						action: () => {
 							os.pageWindow("/about");
 						},
 					},
 					{
 						text: i18n.ts.aboutFirefish,
-						icon: "ph-info ph-bold ph-lg",
+						icon: `${icon("ph-info")}`,
 						action: () => {
 							os.pageWindow("/about-firefish");
 						},
@@ -165,7 +166,7 @@ export default defineComponent({
 					null,
 					{
 						text: i18n.ts.help,
-						icon: "ph-question ph-bold ph-lg",
+						icon: `${icon("ph-question")}`,
 						action: () => {
 							window.open(
 								`https://misskey-hub.net/help.md`,
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index a5f84647f..d131bb94e 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -78,7 +78,7 @@
 							</I18n>
 						</div>
 						<button class="_button _acrylic menu" @click="showMenu">
-							<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+							<i :class="icon('ph-dots-three-outline')"></i>
 						</button>
 					</div>
 				</div>
@@ -106,6 +106,7 @@ import { host, instanceName } from "@/config";
 import * as os from "@/os";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
@@ -176,14 +177,14 @@ export default defineComponent({
 				[
 					{
 						text: i18n.t("aboutX", { x: instanceName }),
-						icon: "ph-info ph-bold ph-lg",
+						icon: `${icon("ph-info")}`,
 						action: () => {
 							os.pageWindow("/about");
 						},
 					},
 					{
 						text: i18n.ts.aboutFirefish,
-						icon: "ph-info ph-bold ph-lg",
+						icon: `${icon("ph-info")}`,
 						action: () => {
 							os.pageWindow("/about-firefish");
 						},
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index 040558519..b4a9137a3 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -22,9 +22,7 @@
 				class="_formBlock"
 			>
 				<template #label>{{ i18n.ts.password }}</template>
-				<template #prefix
-					><i class="ph-lock ph-bold ph-lg"></i
-				></template>
+				<template #prefix><i :class="icon('ph-lock')"></i></template>
 			</MkInput>
 			<div class="bottom _formBlock">
 				<MkButton
@@ -50,6 +48,7 @@ import { host } from "@/config";
 import * as os from "@/os";
 import { login } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const username = ref("");
 const password = ref("");
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index 7c541bca3..eeb5ac717 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -8,7 +8,7 @@
 							v-if="note.replyId"
 							class="reply"
 							:to="`/notes/${note.replyId}`"
-							><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
+							><i :class="icon('ph-arrow-bend-up-left')"></i
 						></MkA>
 						<Mfm
 							v-if="note.text"
@@ -38,6 +38,7 @@ import XReactionsViewer from "@/components/MkReactionsViewer.vue";
 import XMediaList from "@/components/MkMediaList.vue";
 import XPoll from "@/components/MkPoll.vue";
 import * as os from "@/os";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 0abcf8655..fea50ced3 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -10,6 +10,7 @@ import { url } from "@/config";
 import { noteActions } from "@/store";
 import { shareAvailable } from "@/scripts/share-available";
 import { getUserMenu } from "@/scripts/get-user-menu";
+import icon from "@/scripts/icon";
 
 export function getNoteMenu(props: {
 	note: firefish.entities.Note;
@@ -136,7 +137,7 @@ export function getNoteMenu(props: {
 		os.popupMenu(
 			[
 				{
-					icon: "ph-plus ph-bold ph-lg",
+					icon: `${icon("ph-plus")}`,
 					text: i18n.ts.createNew,
 					action: async () => {
 						const { canceled, result } = await os.form(i18n.ts.createNewClip, {
@@ -281,7 +282,7 @@ export function getNoteMenu(props: {
 			...(props.currentClipPage?.value.userId === $i.id
 				? [
 						{
-							icon: "ph-minus-circle ph-bold ph-lg",
+							icon: `${icon("ph-minus-circle")}`,
 							text: i18n.ts.unclip,
 							danger: true,
 							action: unclip,
@@ -292,18 +293,18 @@ export function getNoteMenu(props: {
 			statePromise.then((state) =>
 				state?.isFavorited
 					? {
-							icon: "ph-bookmark-simple ph-bold ph-lg",
+							icon: `${icon("ph-bookmark-simple")}`,
 							text: i18n.ts.unfavorite,
 							action: () => toggleFavorite(false),
 					  }
 					: {
-							icon: "ph-bookmark-simple ph-bold ph-lg",
+							icon: `${icon("ph-bookmark-simple")}`,
 							text: i18n.ts.favorite,
 							action: () => toggleFavorite(true),
 					  },
 			),
 			{
-				icon: "ph-paperclip ph-bold ph-lg",
+				icon: `${icon("ph-paperclip")}`,
 				text: i18n.ts.clip,
 				action: () => clip(),
 			},
@@ -311,12 +312,12 @@ export function getNoteMenu(props: {
 				? statePromise.then((state) =>
 						state.isWatching
 							? {
-									icon: "ph-eye-slash ph-bold ph-lg",
+									icon: `${icon("ph-eye-slash")}`,
 									text: i18n.ts.unwatch,
 									action: () => toggleWatch(false),
 							  }
 							: {
-									icon: "ph-eye ph-bold ph-lg",
+									icon: `${icon("ph-eye")}`,
 									text: i18n.ts.watch,
 									action: () => toggleWatch(true),
 							  },
@@ -325,12 +326,12 @@ export function getNoteMenu(props: {
 			statePromise.then((state) =>
 				state.isMutedThread
 					? {
-							icon: "ph-speaker-x ph-bold ph-lg",
+							icon: `${icon("ph-speaker-x")}`,
 							text: i18n.ts.unmuteThread,
 							action: () => toggleThreadMute(false),
 					  }
 					: {
-							icon: "ph-speaker-x ph-bold ph-lg",
+							icon: `${icon("ph-speaker-x")}`,
 							text: i18n.ts.muteThread,
 							action: () => toggleThreadMute(true),
 					  },
@@ -338,26 +339,26 @@ export function getNoteMenu(props: {
 			isAppearAuthor
 				? ($i.pinnedNoteIds || []).includes(appearNote.id)
 					? {
-							icon: "ph-push-pin ph-bold ph-lg",
+							icon: `${icon("ph-push-pin")}`,
 							text: i18n.ts.unpin,
 							action: () => togglePin(false),
 					  }
 					: {
-							icon: "ph-push-pin ph-bold ph-lg",
+							icon: `${icon("ph-push-pin")}`,
 							text: i18n.ts.pin,
 							action: () => togglePin(true),
 					  }
 				: undefined,
 			instance.translatorAvailable
 				? {
-						icon: "ph-translate ph-bold ph-lg",
+						icon: `${icon("ph-translate")}`,
 						text: i18n.ts.translate,
 						action: translate,
 				  }
 				: undefined,
 			appearNote.url || appearNote.uri
 				? {
-						icon: "ph-arrow-square-out ph-bold ph-lg",
+						icon: `${icon("ph-arrow-square-out")}`,
 						text: i18n.ts.showOnRemote,
 						action: () => {
 							window.open(appearNote.url || appearNote.uri, "_blank");
@@ -366,29 +367,29 @@ export function getNoteMenu(props: {
 				: undefined,
 			{
 				type: "parent",
-				icon: "ph-share-network ph-bold ph-lg",
+				icon: `${icon("ph-share-network")}`,
 				text: i18n.ts.share,
 				children: [
 					{
-						icon: "ph-clipboard-text ph-bold ph-lg",
+						icon: `${icon("ph-clipboard-text")}`,
 						text: i18n.ts.copyContent,
 						action: copyContent,
 					},
 					{
-						icon: "ph-link-simple ph-bold ph-lg",
+						icon: `${icon("ph-link-simple")}`,
 						text: i18n.ts.copyLink,
 						action: copyLink,
 					},
 					appearNote.url || appearNote.uri
 						? {
-								icon: "ph-link-simple ph-bold ph-lg",
+								icon: `${icon("ph-link-simple")}`,
 								text: `${i18n.ts.copyLink} (${i18n.ts.origin})`,
 								action: copyOriginal,
 						  }
 						: undefined,
 					shareAvailable()
 						? {
-								icon: "ph-share-network ph-bold ph-lg",
+								icon: `${icon("ph-share-network")}`,
 								text: i18n.ts.share,
 								action: share,
 						  }
@@ -399,7 +400,7 @@ export function getNoteMenu(props: {
 		...($i.isModerator || $i.isAdmin ? [
 			null,
 			{
-				icon: 'ph-megaphone-simple ph-bold ph-lg',
+				icon: `${icon('ph-megaphone-simple')}`,
 				text: i18n.ts.promote,
 				action: promote
 			}]
@@ -408,7 +409,7 @@ export function getNoteMenu(props: {
 			null,
 			!isAppearAuthor
 				? {
-						icon: "ph-warning-circle ph-bold ph-lg",
+						icon: `${icon("ph-warning-circle")}`,
 						text: i18n.ts.reportAbuse,
 						action: () => {
 							const u =
@@ -431,7 +432,7 @@ export function getNoteMenu(props: {
 				: undefined,
 			isAppearAuthor
 				? {
-						icon: "ph-pencil-line ph-bold ph-lg",
+						icon: `${icon("ph-pencil-line")}`,
 						text: i18n.ts.edit,
 						accent: true,
 						action: edit,
@@ -439,7 +440,7 @@ export function getNoteMenu(props: {
 				: undefined,
 			isAppearAuthor
 				? {
-						icon: "ph-eraser ph-bold ph-lg",
+						icon: `${icon("ph-eraser")}`,
 						text: i18n.ts.deleteAndEdit,
 						danger: true,
 						action: delEdit,
@@ -447,7 +448,7 @@ export function getNoteMenu(props: {
 				: undefined,
 			isAppearAuthor || isModerator
 				? {
-						icon: "ph-trash ph-bold ph-lg",
+						icon: `${icon("ph-trash")}`,
 						text: i18n.ts.delete,
 						danger: true,
 						action: del,
@@ -457,7 +458,7 @@ export function getNoteMenu(props: {
 			!isAppearAuthor
 				? {
 						type: "parent",
-						icon: "ph-user ph-bold ph-lg",
+						icon: `${icon("ph-user")}`,
 						text: i18n.ts.user,
 						children: getUserMenu(appearNote.user),
 				  }
@@ -467,7 +468,7 @@ export function getNoteMenu(props: {
 		menu = [
 			appearNote.url || appearNote.uri
 				? {
-						icon: "ph-arrow-square-out ph-bold ph-lg",
+						icon: `${icon("ph-arrow-square-out")}`,
 						text: i18n.ts.showOnRemote,
 						action: () => {
 							window.open(appearNote.url || appearNote.uri, "_blank");
@@ -475,25 +476,25 @@ export function getNoteMenu(props: {
 				  }
 				: undefined,
 			{
-				icon: "ph-clipboard-text ph-bold ph-lg",
+				icon: `${icon("ph-clipboard-text")}`,
 				text: i18n.ts.copyContent,
 				action: copyContent,
 			},
 			{
-				icon: "ph-link-simple ph-bold ph-lg",
+				icon: `${icon("ph-link-simple")}`,
 				text: i18n.ts.copyLink,
 				action: copyLink,
 			},
 			appearNote.url || appearNote.uri
 				? {
-						icon: "ph-link-simple ph-bold ph-lg",
+						icon: `${icon("ph-link-simple")}`,
 						text: `${i18n.ts.copyLink} (${i18n.ts.origin})`,
 						action: copyOriginal,
 				  }
 				: undefined,
 			shareAvailable()
 				? {
-						icon: "ph-share-network ph-bold ph-lg",
+						icon: `${icon("ph-share-network")}`,
 						text: i18n.ts.share,
 						action: share,
 				  }
@@ -505,7 +506,7 @@ export function getNoteMenu(props: {
 		menu = menu.concat([
 			null,
 			...noteActions.map((action) => ({
-				icon: "ph-plug ph-bold ph-lg",
+				icon: `${icon("ph-plug")}`,
 				text: action.title,
 				action: () => {
 					action.handler(appearNote);
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index a11ba3c5e..83c70546b 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -8,6 +8,7 @@ import { userActions } from "@/store";
 import { $i, iAmModerator } from "@/account";
 import { mainRouter } from "@/router";
 import type { Router } from "@/nirax";
+import icon from "@/scripts/icon";
 
 export function getUserMenu(user, router: Router = mainRouter) {
 	const meId = $i ? $i.id : null;
@@ -232,40 +233,40 @@ export function getUserMenu(user, router: Router = mainRouter) {
 				: `@${user.username}`,
 		},
 		{
-			icon: "ph-at ph-bold ph-lg",
+			icon: `${icon("ph-at")}`,
 			text: i18n.ts.copyUsername,
 			action: () => {
 				copyToClipboard(`@${user.username}@${user.host || host}`);
 			},
 		},
 		{
-			icon: "ph-info ph-bold ph-lg",
+			icon: `${icon("ph-info")}`,
 			text: i18n.ts.info,
 			action: () => {
 				router.push(`/user-info/${user.id}`);
 			},
 		},
 		{
-			icon: "ph-newspaper ph-bold ph-lg",
+			icon: `${icon("ph-newspaper")}`,
 			text: i18n.ts._feeds.copyFeed,
 			type: "parent",
 			children: [
 				{
-					icon: "ph-rss ph-bold ph-lg",
+					icon: `${icon("ph-rss")}`,
 					text: i18n.ts._feeds.rss,
 					action: () => {
 						copyToClipboard(`https://${host}/@${user.username}.rss`);
 					},
 				},
 				{
-					icon: "ph-atom ph-bold ph-lg",
+					icon: `${icon("ph-atom")}`,
 					text: i18n.ts._feeds.atom,
 					action: () => {
 						copyToClipboard(`https://${host}/@${user.username}.atom`);
 					},
 				},
 				{
-					icon: "ph-brackets-curly ph-bold ph-lg",
+					icon: `${icon("ph-brackets-curly")}`,
 					text: i18n.ts._feeds.jsonFeed,
 					action: () => {
 						copyToClipboard(`https://${host}/@${user.username}.json`);
@@ -274,7 +275,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 			],
 		},
 		{
-			icon: "ph-envelope-simple-open ph-bold ph-lg",
+			icon: `${icon("ph-envelope-simple-open")}`,
 			text: i18n.ts.sendMessage,
 			action: () => {
 				os.post({ specified: user });
@@ -283,7 +284,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		meId !== user.id
 			? {
 					type: "link",
-					icon: "ph-chats-teardrop ph-bold ph-lg",
+					icon: `${icon("ph-chats-teardrop")}`,
 					text: i18n.ts.startMessaging,
 					to: `/my/messaging/${Acct.toString(user)}`,
 			  }
@@ -291,7 +292,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		user.host != null && user.url
 			? {
 					type: "a",
-					icon: "ph-arrow-square-out ph-bold ph-lg",
+					icon: `${icon("ph-arrow-square-out")}`,
 					text: i18n.ts.showOnRemote,
 					href: user.url,
 					target: "_blank",
@@ -299,22 +300,20 @@ export function getUserMenu(user, router: Router = mainRouter) {
 			: undefined,
 		null,
 		{
-			icon: "ph-list-bullets ph-bold ph-lg",
+			icon: `${icon("ph-list-bullets")}`,
 			text: i18n.ts.addToList,
 			action: pushList,
 		},
 		meId !== user.id
 			? {
-					icon: "ph-users-three ph-bold ph-lg",
+					icon: `${icon("ph-users-three")}`,
 					text: i18n.ts.inviteToGroup,
 					action: inviteGroup,
 			  }
 			: undefined,
 		null,
 		{
-			icon: user.isRenoteMuted
-				? "ph-eye ph-bold ph-lg"
-				: "ph-eye-slash ph-bold ph-lg",
+			icon: user.isRenoteMuted ? "ph-eye ph-lg" : "ph-eye-slash ph-lg",
 			text: user.isRenoteMuted ? i18n.ts.renoteUnmute : i18n.ts.renoteMute,
 			action: toggleRenoteMute,
 		},
@@ -323,15 +322,13 @@ export function getUserMenu(user, router: Router = mainRouter) {
 	if ($i && meId !== user.id) {
 		menu = menu.concat([
 			{
-				icon: user.isMuted
-					? "ph-eye ph-bold ph-lg"
-					: "ph-eye-slash ph-bold ph-lg",
+				icon: user.isMuted ? "ph-eye ph-lg" : "ph-eye-slash ph-lg",
 				text: user.isMuted ? i18n.ts.unmute : i18n.ts.mute,
 				hidden: user.isBlocking === true,
 				action: toggleMute,
 			},
 			{
-				icon: "ph-prohibit ph-bold ph-lg",
+				icon: `${icon("ph-prohibit")}`,
 				text: user.isBlocking ? i18n.ts.unblock : i18n.ts.block,
 				action: toggleBlock,
 			},
@@ -340,7 +337,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		if (user.isFollowed) {
 			menu = menu.concat([
 				{
-					icon: "ph-link-break ph-bold ph-lg",
+					icon: `${icon("ph-link-break")}`,
 					text: i18n.ts.breakFollow,
 					action: invalidateFollow,
 				},
@@ -350,7 +347,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		menu = menu.concat([
 			null,
 			{
-				icon: "ph-warning-circle ph-bold ph-lg",
+				icon: `${icon("ph-warning-circle")}`,
 				text: i18n.ts.reportAbuse,
 				action: reportAbuse,
 			},
@@ -360,12 +357,12 @@ export function getUserMenu(user, router: Router = mainRouter) {
 			menu = menu.concat([
 				null,
 				{
-					icon: "ph-microphone-slash ph-bold ph-lg",
+					icon: `${icon("ph-microphone-slash")}`,
 					text: user.isSilenced ? i18n.ts.unsilence : i18n.ts.silence,
 					action: toggleSilence,
 				},
 				{
-					icon: "ph-snowflake ph-bold ph-lg",
+					icon: `${icon("ph-snowflake")}`,
 					text: user.isSuspended ? i18n.ts.unsuspend : i18n.ts.suspend,
 					action: toggleSuspend,
 				},
@@ -377,7 +374,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		menu = menu.concat([
 			null,
 			{
-				icon: "ph-pencil ph-bold ph-lg",
+				icon: `${icon("ph-pencil")}`,
 				text: i18n.ts.editProfile,
 				action: () => {
 					router.push("/settings/profile");
@@ -390,7 +387,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		menu = menu.concat([
 			null,
 			...userActions.map((action) => ({
-				icon: "ph-plug ph-bold ph-lg",
+				icon: `${icon("ph-plug")}`,
 				text: action.title,
 				action: () => {
 					action.handler(user);
diff --git a/packages/client/src/scripts/helpMenu.ts b/packages/client/src/scripts/helpMenu.ts
index fb3f1c1cf..a8544b540 100644
--- a/packages/client/src/scripts/helpMenu.ts
+++ b/packages/client/src/scripts/helpMenu.ts
@@ -4,6 +4,7 @@ import { instance } from "@/instance";
 import { host } from "@/config";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 export function openHelpMenu_(ev: MouseEvent) {
 	os.popupMenu(
@@ -15,20 +16,20 @@ export function openHelpMenu_(ev: MouseEvent) {
 			{
 				type: "link",
 				text: i18n.ts.instanceInfo,
-				icon: "ph-info ph-bold ph-lg",
+				icon: `${icon("ph-info")}`,
 				to: "/about",
 			},
 			{
 				type: "link",
 				text: i18n.ts.aboutFirefish,
-				icon: "ph-lightbulb ph-bold ph-lg",
+				icon: `${icon("ph-lightbulb")}`,
 				to: "/about-firefish",
 			},
 			instance.tosUrl
 				? {
 						type: "button",
 						text: i18n.ts.tos,
-						icon: "ph-scroll ph-bold ph-lg",
+						icon: `${icon("ph-scroll")}`,
 						action: () => {
 							window.open(instance.tosUrl, "_blank");
 						},
@@ -37,7 +38,7 @@ export function openHelpMenu_(ev: MouseEvent) {
 			{
 				type: "button",
 				text: i18n.ts.apps,
-				icon: "ph-device-mobile ph-bold ph-lg",
+				icon: `${icon("ph-device-mobile")}`,
 				action: () => {
 					window.open("https://joinfirefish.org/apps", "_blank");
 				},
@@ -49,23 +50,23 @@ export function openHelpMenu_(ev: MouseEvent) {
 					os.popup(XTutorial, {}, {}, "closed");
 				},
 				text: i18n.ts.replayTutorial,
-				icon: "ph-circle-wavy-question ph-bold ph-lg",
+				icon: `${icon("ph-circle-wavy-question")}`,
 			},
 			null,
 			{
 				type: "parent",
 				text: i18n.ts.developer,
-				icon: "ph-code ph-bold ph-lg",
+				icon: `${icon("ph-code")}`,
 				children: [
 					{
 						type: "link",
 						to: "/api-console",
 						text: "API Console",
-						icon: "ph-terminal-window ph-bold ph-lg",
+						icon: `${icon("ph-terminal-window")}`,
 					},
 					{
 						text: i18n.ts.document,
-						icon: "ph-file-doc ph-bold ph-lg",
+						icon: `${icon("ph-file-doc")}`,
 						action: () => {
 							window.open("/api-doc", "_blank");
 						},
@@ -74,7 +75,7 @@ export function openHelpMenu_(ev: MouseEvent) {
 						type: "link",
 						to: "/scratchpad",
 						text: "AiScript Scratchpad",
-						icon: "ph-scribble-loop ph-bold ph-lg",
+						icon: `${icon("ph-scribble-loop")}`,
 					},
 				],
 			},
diff --git a/packages/client/src/scripts/hpml/index.ts b/packages/client/src/scripts/hpml/index.ts
index 57fe0e96d..a1201431b 100644
--- a/packages/client/src/scripts/hpml/index.ts
+++ b/packages/client/src/scripts/hpml/index.ts
@@ -5,6 +5,7 @@
 import autobind from "autobind-decorator";
 import type { Hpml } from "./evaluator";
 import { funcDefs } from "./lib";
+import icon from "@/scripts/icon";
 
 export interface Fn {
 	slots: string[];
@@ -17,32 +18,40 @@ export const literalDefs: Record<
 	string,
 	{ out: any; category: string; icon: any }
 > = {
-	text: { out: "string", category: "value", icon: "ph-quotes ph-bold ph-lg" },
+	text: {
+		out: "string",
+		category: "value",
+		icon: `${icon("ph-quotes")}`,
+	},
 	multiLineText: {
 		out: "string",
 		category: "value",
-		icon: "ph-align-left ph-bold ph-lg",
+		icon: `${icon("ph-align-left")}`,
 	},
 	textList: {
 		out: "stringArray",
 		category: "value",
-		icon: "ph-list ph-bold ph-lg",
+		icon: `${icon("ph-list")}`,
 	},
 	number: {
 		out: "number",
 		category: "value",
-		icon: "ph-sort-descending-up ph-bold ph-lg",
+		icon: `${icon("ph-sort-descending-up")}`,
+	},
+	ref: {
+		out: null,
+		category: "value",
+		icon: `${icon("ph-magic-wand")}`,
 	},
-	ref: { out: null, category: "value", icon: "ph-magic-wand ph-bold ph-lg" },
 	aiScriptVar: {
 		out: null,
 		category: "value",
-		icon: "ph-magic-wand ph-bold ph-lg",
+		icon: `${icon("ph-magic-wand")}`,
 	},
 	fn: {
 		out: "function",
 		category: "value",
-		icon: "ph-radical ph-bold ph-lg",
+		icon: `${icon("ph-radical")}`,
 	},
 };
 
diff --git a/packages/client/src/scripts/hpml/lib.ts b/packages/client/src/scripts/hpml/lib.ts
index ad878f99f..0a2226be8 100644
--- a/packages/client/src/scripts/hpml/lib.ts
+++ b/packages/client/src/scripts/hpml/lib.ts
@@ -1,9 +1,9 @@
-import tinycolor from "tinycolor2";
 import { utils, values } from "@syuilo/aiscript";
 import seedrandom from "seedrandom";
 import type { Hpml } from "./evaluator";
 import type { Expr } from "./expr";
 import type { Fn, HpmlScope } from ".";
+import icon from "@/scripts/icon";
 
 /* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
 // https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
@@ -240,223 +240,223 @@ export const funcDefs: Record<
 		in: ["boolean", 0, 0],
 		out: 0,
 		category: "flow",
-		icon: "ph-share-network ph-bold ph-lg",
+		icon: `${icon("ph-share-network")}`,
 	},
 	for: {
 		in: ["number", "function"],
 		out: null,
 		category: "flow",
-		icon: "ph-recycle ph-bold ph-lg",
+		icon: `${icon("ph-recycle")}`,
 	},
 	not: {
 		in: ["boolean"],
 		out: "boolean",
 		category: "logical",
-		icon: "ph-flag ph-bold ph-lg",
+		icon: `${icon("ph-flag")}`,
 	},
 	or: {
 		in: ["boolean", "boolean"],
 		out: "boolean",
 		category: "logical",
-		icon: "ph-flag ph-bold ph-lg",
+		icon: `${icon("ph-flag")}`,
 	},
 	and: {
 		in: ["boolean", "boolean"],
 		out: "boolean",
 		category: "logical",
-		icon: "ph-flag ph-bold ph-lg",
+		icon: `${icon("ph-flag")}`,
 	},
 	add: {
 		in: ["number", "number"],
 		out: "number",
 		category: "operation",
-		icon: "ph-plus ph-bold ph-lg",
+		icon: `${icon("ph-plus")}`,
 	},
 	subtract: {
 		in: ["number", "number"],
 		out: "number",
 		category: "operation",
-		icon: "ph-minus ph-bold ph-lg",
+		icon: `${icon("ph-minus")}`,
 	},
 	multiply: {
 		in: ["number", "number"],
 		out: "number",
 		category: "operation",
-		icon: "ph-x ph-bold ph-lg",
+		icon: `${icon("ph-x")}`,
 	},
 	divide: {
 		in: ["number", "number"],
 		out: "number",
 		category: "operation",
-		icon: "ph-divide ph-bold ph-lg",
+		icon: `${icon("ph-divide")}`,
 	},
 	mod: {
 		in: ["number", "number"],
 		out: "number",
 		category: "operation",
-		icon: "ph-divide ph-bold ph-lg",
+		icon: `${icon("ph-divide")}`,
 	},
 	round: {
 		in: ["number"],
 		out: "number",
 		category: "operation",
-		icon: "ph-calculator ph-bold ph-lg",
+		icon: `${icon("ph-calculator")}`,
 	},
 	eq: {
 		in: [0, 0],
 		out: "boolean",
 		category: "comparison",
-		icon: "ph-equals ph-bold ph-lg",
+		icon: `${icon("ph-equals")}`,
 	},
 	notEq: {
 		in: [0, 0],
 		out: "boolean",
 		category: "comparison",
-		icon: "ph-prohibit-insert ph-bold ph-lg",
+		icon: `${icon("ph-prohibit-insert")}`,
 	},
 	gt: {
 		in: ["number", "number"],
 		out: "boolean",
 		category: "comparison",
-		icon: "ph-caret-right ph-bold ph-lg",
+		icon: `${icon("ph-caret-right")}`,
 	},
 	lt: {
 		in: ["number", "number"],
 		out: "boolean",
 		category: "comparison",
-		icon: "ph-caret-left ph-bold ph-lg",
+		icon: `${icon("ph-caret-left")}`,
 	},
 	gtEq: {
 		in: ["number", "number"],
 		out: "boolean",
 		category: "comparison",
-		icon: "ph-caret-double-right ph-bold ph-lg",
+		icon: `${icon("ph-caret-double-right")}`,
 	},
 	ltEq: {
 		in: ["number", "number"],
 		out: "boolean",
 		category: "comparison",
-		icon: "ph-caret-double-right ph-bold ph-lg",
+		icon: `${icon("ph-caret-double-right")}`,
 	},
 	strLen: {
 		in: ["string"],
 		out: "number",
 		category: "text",
-		icon: "ph-quotes ph-bold ph-lg",
+		icon: `${icon("ph-quotes")}`,
 	},
 	strPick: {
 		in: ["string", "number"],
 		out: "string",
 		category: "text",
-		icon: "ph-quotes ph-bold ph-lg",
+		icon: `${icon("ph-quotes")}`,
 	},
 	strReplace: {
 		in: ["string", "string", "string"],
 		out: "string",
 		category: "text",
-		icon: "ph-quotes ph-bold ph-lg",
+		icon: `${icon("ph-quotes")}`,
 	},
 	strReverse: {
 		in: ["string"],
 		out: "string",
 		category: "text",
-		icon: "ph-quotes ph-bold ph-lg",
+		icon: `${icon("ph-quotes")}`,
 	},
 	join: {
 		in: ["stringArray", "string"],
 		out: "string",
 		category: "text",
-		icon: "ph-quotes ph-bold ph-lg",
+		icon: `${icon("ph-quotes")}`,
 	},
 	stringToNumber: {
 		in: ["string"],
 		out: "number",
 		category: "convert",
-		icon: "ph-swap ph-bold ph-lg",
+		icon: `${icon("ph-swap")}`,
 	},
 	numberToString: {
 		in: ["number"],
 		out: "string",
 		category: "convert",
-		icon: "ph-swap ph-bold ph-lg",
+		icon: `${icon("ph-swap")}`,
 	},
 	splitStrByLine: {
 		in: ["string"],
 		out: "stringArray",
 		category: "convert",
-		icon: "ph-swap ph-bold ph-lg",
+		icon: `${icon("ph-swap")}`,
 	},
 	pick: {
 		in: [null, "number"],
 		out: null,
 		category: "list",
-		icon: "ph-text-indent ph-bold ph-lg",
+		icon: `${icon("ph-text-indent")}`,
 	},
 	listLen: {
 		in: [null],
 		out: "number",
 		category: "list",
-		icon: "ph-text-indent ph-bold ph-lg",
+		icon: `${icon("ph-text-indent")}`,
 	},
 	rannum: {
 		in: ["number", "number"],
 		out: "number",
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	dailyRannum: {
 		in: ["number", "number"],
 		out: "number",
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	seedRannum: {
 		in: [null, "number", "number"],
 		out: "number",
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	random: {
 		in: ["number"],
 		out: "boolean",
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	dailyRandom: {
 		in: ["number"],
 		out: "boolean",
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	seedRandom: {
 		in: [null, "number"],
 		out: "boolean",
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	randomPick: {
 		in: [0],
 		out: 0,
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	dailyRandomPick: {
 		in: [0],
 		out: 0,
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	seedRandomPick: {
 		in: [null, 0],
 		out: 0,
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	},
 	DRPWPM: {
 		in: ["stringArray"],
 		out: "string",
 		category: "random",
-		icon: "ph-dice-five ph-bold ph-lg",
+		icon: `${icon("ph-dice-five")}`,
 	}, // dailyRandomPickWithProbabilityMapping
 };
 
diff --git a/packages/client/src/scripts/icon.ts b/packages/client/src/scripts/icon.ts
new file mode 100644
index 000000000..49d447bb1
--- /dev/null
+++ b/packages/client/src/scripts/icon.ts
@@ -0,0 +1,5 @@
+import { defaultStore } from "@/store";
+
+export default function icon(name: string, large = true): string {
+	return `${name} ${large ? "ph-lg" : ""} ${defaultStore.state.iconSet}`;
+}
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 8366af19f..da78cf493 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -5,6 +5,7 @@ import { stream } from "@/stream";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 import { uploadFile } from "@/scripts/upload";
+import icon from "@/scripts/icon";
 
 function select(
 	src: any,
@@ -99,17 +100,17 @@ function select(
 				},
 				{
 					text: i18n.ts.upload,
-					icon: "ph-upload-simple ph-bold ph-lg",
+					icon: `${icon("ph-upload-simple")}`,
 					action: chooseFileFromPc,
 				},
 				{
 					text: i18n.ts.fromDrive,
-					icon: "ph-cloud ph-bold ph-lg",
+					icon: `${icon("ph-cloud")}`,
 					action: chooseFileFromDrive,
 				},
 				{
 					text: i18n.ts.fromUrl,
-					icon: "ph-link-simple ph-bold ph-lg",
+					icon: `${icon("ph-link-simple")}`,
 					action: chooseFileFromUrl,
 				},
 			],
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index d8f73102e..39dd53378 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -360,6 +360,15 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: true,
 		},
+		iconSet: {
+			where: "device",
+			default: "ph-bold" as
+				| "ph-bold"
+				| "ph-duotone"
+				| "ph-light"
+				| "ph" // this is ph-regular
+				| "ph-fill",
+		},
 	}),
 );
 
@@ -377,7 +386,7 @@ interface Plugin {
 }
 
 /**
- * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
+ * Storage for configuration information that does not need to be constantly loaded into memory (non-reactive)
  */
 import lightTheme from "@/themes/l-rosepinedawn.json5";
 import darkTheme from "@/themes/d-rosepine.json5";
@@ -469,10 +478,3 @@ export class ColdDeviceStorage {
 		};
 	}
 }
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module "@vue/runtime-core" {
-	interface ComponentCustomProperties {
-		$store: typeof defaultStore;
-	}
-}
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 4338f713f..98d2250ef 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -30,7 +30,7 @@
 					to="/"
 					exact
 				>
-					<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i
+					<i :class="icon('ph-house icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.timeline }}</span>
 				</MkA>
 				<template v-for="item in menu">
@@ -63,7 +63,7 @@
 							v-if="navbarItemDef[item].indicated"
 							class="indicator"
 							:class="{
-								animateIndicator: $store.state.animation,
+								animateIndicator: defaultStore.state.animation,
 							}"
 							><i class="icon ph-circle ph-fill"></i
 						></span>
@@ -77,18 +77,18 @@
 					active-class="active"
 					to="/admin"
 				>
-					<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i
+					<i :class="icon('ph-door icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.controlPanel }}</span>
 				</MkA>
 				<button v-click-anime class="item _button" @click="more">
-					<i
-						class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
-					></i
+					<i :class="icon('ph-dots-three-outline icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.more }}</span>
 					<span
 						v-if="otherMenuItemIndicated"
 						class="indicator"
-						:class="{ animateIndicator: $store.state.animation }"
+						:class="{
+							animateIndicator: defaultStore.state.animation,
+						}"
 						><i class="icon ph-circle ph-fill"></i
 					></span>
 				</button>
@@ -98,7 +98,7 @@
 					active-class="active"
 					to="/settings"
 				>
-					<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
+					<i :class="icon('ph-gear-six icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.settings }}</span>
 				</MkA>
 			</div>
@@ -108,7 +108,7 @@
 					data-cy-open-post-form
 					@click="os.post"
 				>
-					<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i
+					<i :class="icon('ph-pencil icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.note }}</span>
 				</button>
 				<button
@@ -116,7 +116,9 @@
 					class="item _button help"
 					@click="openHelpMenu"
 				>
-					<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+					<i
+						:class="icon('ph-info help icon ph-xl ph-fw', false)"
+					></i>
 				</button>
 			</div>
 		</div>
@@ -138,6 +140,7 @@ import { openAccountMenu as openAccountMenu_ } from "@/account";
 import { openHelpMenu_ } from "@/scripts/helpMenu";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const menu = toRef(defaultStore.state, "menu");
 const otherMenuItemIndicated = computed(() => {
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 5d599cc4d..3fad8c0bf 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -31,7 +31,7 @@
 					to="/"
 					exact
 				>
-					<i class="icon ph-house ph-bold ph-fw ph-lg"></i
+					<i :class="icon('ph-house icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.timeline }}</span>
 				</MkA>
 				<template v-for="item in menu">
@@ -89,7 +89,7 @@
 						"
 						class="indicator"
 					></span
-					><i class="icon ph-door ph-bold ph-fw ph-lg"></i
+					><i :class="icon('ph-door icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.controlPanel }}</span>
 				</MkA>
 				<button
@@ -98,9 +98,7 @@
 					class="item _button"
 					@click="more"
 				>
-					<i
-						class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
-					></i
+					<i :class="icon('ph-dots-three-outline icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.more }}</span>
 					<span v-if="otherMenuItemIndicated" class="indicator"
 						><i class="icon ph-circle ph-fill"></i
@@ -113,7 +111,7 @@
 					active-class="active"
 					to="/settings"
 				>
-					<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
+					<i :class="icon('ph-gear icon ph-fw')"></i
 					><span class="text">{{ i18n.ts.settings }}</span>
 				</MkA>
 			</nav>
@@ -124,7 +122,7 @@
 					data-cy-open-post-form
 					@click="os.post"
 				>
-					<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i
+					<i :class="icon('icon ph-pencil ph-fw ph-lg')"></i
 					><span class="text">{{ i18n.ts.note }}</span>
 				</button>
 				<button
@@ -132,7 +130,9 @@
 					class="item _button help"
 					@click="openHelpMenu"
 				>
-					<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+					<i
+						:class="icon('help icon ph-info ph-xl ph-fw', false)"
+					></i>
 				</button>
 				<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
 				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
@@ -155,6 +155,7 @@ import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 import { version } from "@/config";
+import icon from "@/scripts/icon";
 
 const isEmpty = (x: string | null) => x == null || x === "";
 
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index 4863471b9..99556e6b2 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -2,7 +2,7 @@
 	<div
 		v-if="
 			hasDisconnected &&
-			$store.state.serverDisconnectedBehavior === 'quiet'
+			defaultStore.state.serverDisconnectedBehavior === 'quiet'
 		"
 		class="nsbbhtug"
 		@click="resetDisconnected"
@@ -21,6 +21,7 @@
 import { onUnmounted, ref } from "vue";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const hasDisconnected = ref(false);
 
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 01b882c2c..b7ecc0388 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -8,7 +8,7 @@
 				></div>
 				<div class="top">
 					<p class="name">
-						<i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i
+						<i :class="icon('ph-circle-notch fa-pulse')"></i
 						>{{ ctx.name }}
 					</p>
 					<p class="status">
@@ -56,10 +56,10 @@
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
 import * as os from "@/os";
 import { uploads } from "@/scripts/upload";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const zIndex = os.claimZIndex("high");
 </script>
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 71bb80b01..49962087b 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -80,7 +80,7 @@
 							class="_button button"
 							@click="changeProfile"
 						>
-							<i class="ph-caret-down ph-bold ph-lg"></i>
+							<i :class="icon('ph-caret-down')"></i>
 						</button>
 						<button
 							v-if="deckStore.state.profile !== 'default'"
@@ -88,7 +88,7 @@
 							class="_button button"
 							@click="renameProfile"
 						>
-							<i class="ph-pencil ph-bold ph-lg"></i>
+							<i :class="icon('ph-pencil')"></i>
 						</button>
 						<button
 							v-if="deckStore.state.profile !== 'default'"
@@ -96,7 +96,7 @@
 							class="_button button"
 							@click="deleteProfile"
 						>
-							<i class="ph-trash ph-bold ph-lg"></i>
+							<i :class="icon('ph-trash')"></i>
 						</button>
 					</div>
 					<div class="middle">
@@ -105,7 +105,7 @@
 							class="_button button new"
 							@click="addColumn"
 						>
-							<i class="ph-plus ph-bold ph-lg"></i>
+							<i :class="icon('ph-plus')"></i>
 						</button>
 					</div>
 					<div class="bottom">
@@ -114,7 +114,7 @@
 							class="_button button settings"
 							@click="showSettings"
 						>
-							<i class="ph-gear-six ph-bold ph-lg"></i>
+							<i :class="icon('ph-gear-six')"></i>
 						</button>
 					</div>
 				</div>
@@ -127,11 +127,13 @@
 				class="button nav _button"
 				@click="drawerMenuShowing = true"
 			>
-				<i class="ph-list ph-bold ph-lg"></i
+				<i :class="icon('ph-list')"></i
 				><span
 					v-if="menuIndicated"
 					class="indicator"
-					:class="{ animateIndicator: $store.state.animation }"
+					:class="{
+						animateIndicator: defaultStore.state.animation,
+					}"
 					><i class="ph-circle ph-fill"></i
 				></span>
 			</button>
@@ -140,18 +142,20 @@
 				class="button home _button"
 				@click="mainRouter.push('/')"
 			>
-				<i class="ph-house ph-bold ph-lg"></i>
+				<i :class="icon('ph-house')"></i>
 			</button>
 			<button
 				:aria-label="i18n.t('notifications')"
 				class="button notifications _button"
 				@click="mainRouter.push('/my/notifications')"
 			>
-				<i class="ph-bell ph-bold ph-lg"></i
+				<i :class="icon('ph-bell')"></i
 				><span
 					v-if="$i?.hasUnreadNotification"
 					class="indicator"
-					:class="{ animateIndicator: $store.state.animation }"
+					:class="{
+						animateIndicator: defaultStore.state.animation,
+					}"
 					><i class="ph-circle ph-fill"></i
 				></span>
 			</button>
@@ -160,11 +164,11 @@
 				class="button post _button"
 				@click="os.post()"
 			>
-				<i class="ph-pencil ph-bold ph-lg"></i>
+				<i :class="icon('ph-pencil')"></i>
 			</button>
 		</div>
 
-		<transition :name="$store.state.animation ? 'menu-back' : ''">
+		<transition :name="defaultStore.state.animation ? 'menu-back' : ''">
 			<div
 				v-if="drawerMenuShowing"
 				class="menu-back _modalBg"
@@ -173,7 +177,7 @@
 			></div>
 		</transition>
 
-		<transition :name="$store.state.animation ? 'menu' : ''">
+		<transition :name="defaultStore.state.animation ? 'menu' : ''">
 			<XDrawerMenu v-if="drawerMenuShowing" class="menu" />
 		</transition>
 
@@ -182,14 +186,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	computed,
-	defineAsyncComponent,
-	onMounted,
-	provide,
-	ref,
-	watch,
-} from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { v4 as uuid } from "uuid";
 import XCommon from "./_common_/common.vue";
 import {
@@ -204,13 +201,15 @@ import DeckColumnCore from "@/ui/deck/column-core.vue";
 import XSidebar from "@/ui/_common_/navbar.vue";
 import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
 import MkButton from "@/components/MkButton.vue";
-import { getScrollContainer } from "@/scripts/scroll";
 import * as os from "@/os";
 import { navbarItemDef } from "@/navbar";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
 import { unisonReload } from "@/scripts/unison-reload";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
+
 const XStatusBars = defineAsyncComponent(
 	() => import("@/ui/_common_/statusbars.vue"),
 );
@@ -337,7 +336,7 @@ function changeProfile(ev: MouseEvent) {
 			null,
 			{
 				text: i18n.ts._deck.newProfile,
-				icon: "ph-plus ph-bold ph-lg",
+				icon: `${icon("ph-plus")}`,
 				action: async () => {
 					const { canceled, result: name } = await os.inputText({
 						title: i18n.ts._deck.profile,
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index 47b608be2..6a39cfcce 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -6,7 +6,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header>
-			<i class="ph-flying-saucer ph-bold ph-lg"></i
+			<i :class="icon('ph-flying-saucer')"></i
 			><span style="margin-left: 8px">{{ column.name }}</span>
 		</template>
 
@@ -28,6 +28,7 @@ import { updateColumn } from "./deck-store";
 import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	column: Column;
@@ -66,7 +67,7 @@ async function setAntenna() {
 
 const menu = [
 	{
-		icon: "ph-pencil ph-bold ph-lg",
+		icon: `${icon("ph-pencil")}`,
 		text: i18n.ts.selectAntenna,
 		action: setAntenna,
 	},
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/channel-column.vue
index 4860d3af5..af11c3600 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -6,7 +6,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header>
-			<i class="ph-television ph-bold ph-lg"></i
+			<i :class="icon('ph-television')"></i
 			><span style="margin-left: 8px">{{ column.name }}</span>
 		</template>
 
@@ -29,6 +29,7 @@ import { updateColumn } from "./deck-store";
 import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	column: Column;
@@ -65,7 +66,7 @@ async function setChannel() {
 
 const menu = [
 	{
-		icon: "ph-pencil ph-bold ph-lg",
+		icon: `${icon("ph-pencil")}`,
 		text: i18n.ts.selectChannel,
 		action: setChannel,
 	},
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index a941d585a..ac99d6b8b 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -31,10 +31,10 @@
 				@click="toggleActive"
 			>
 				<template v-if="active"
-					><i class="ph-caret-up ph-bold ph-lg"></i
+					><i :class="icon('ph-caret-up')"></i
 				></template>
 				<template v-else
-					><i class="ph-caret-down ph-bold ph-lg"></i
+					><i :class="icon('ph-caret-down')"></i
 				></template>
 			</button>
 			<div class="action">
@@ -46,7 +46,7 @@
 				class="menu _button"
 				@click.stop="showSettingsMenu"
 			>
-				<i class="ph-dots-three-outline-vertical ph-bold ph-lg"></i>
+				<i :class="icon('ph-dots-three-outline-vertical')"></i>
 			</button>
 		</header>
 		<div v-show="active" ref="body">
@@ -56,18 +56,9 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	Ref,
-	computed,
-	onBeforeUnmount,
-	onMounted,
-	provide,
-	ref,
-	watch,
-} from "vue";
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from "vue";
 import type { Column } from "./deck-store";
 import {
-	deckStore,
 	popRightColumn,
 	removeColumn,
 	stackLeftColumn,
@@ -81,6 +72,7 @@ import {
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import type { MenuItem } from "@/types/menu";
+import icon from "@/scripts/icon";
 
 provide("shouldHeaderThin", true);
 provide("shouldOmitHeaderTitle", true);
@@ -156,7 +148,7 @@ function toggleActive() {
 function getMenu() {
 	let items = [
 		{
-			icon: "ph-gear-six ph-bold ph-lg",
+			icon: `${icon("ph-gear-six")}`,
 			text: i18n.ts._deck.configureColumn,
 			action: async () => {
 				const { canceled, result } = await os.form(props.column.name, {
@@ -183,17 +175,17 @@ function getMenu() {
 		{
 			type: "parent",
 			text: i18n.ts.move + "...",
-			icon: "ph-arrows-out-cardinal ph-bold ph-lg",
+			icon: `${icon("ph-arrows-out-cardinal")}`,
 			children: [
 				{
-					icon: "ph-caret-left ph-bold ph-lg",
+					icon: `${icon("ph-caret-left")}`,
 					text: i18n.ts._deck.swapLeft,
 					action: () => {
 						swapLeftColumn(props.column.id);
 					},
 				},
 				{
-					icon: "ph-caret-right ph-bold ph-lg",
+					icon: `${icon("ph-caret-right")}`,
 					text: i18n.ts._deck.swapRight,
 					action: () => {
 						swapRightColumn(props.column.id);
@@ -201,7 +193,7 @@ function getMenu() {
 				},
 				props.isStacked
 					? {
-							icon: "ph-caret-up ph-bold ph-lg",
+							icon: `${icon("ph-caret-up")}`,
 							text: i18n.ts._deck.swapUp,
 							action: () => {
 								swapUpColumn(props.column.id);
@@ -210,7 +202,7 @@ function getMenu() {
 					: undefined,
 				props.isStacked
 					? {
-							icon: "ph-caret-down ph-bold ph-lg",
+							icon: `${icon("ph-caret-down")}`,
 							text: i18n.ts._deck.swapDown,
 							action: () => {
 								swapDownColumn(props.column.id);
@@ -220,7 +212,7 @@ function getMenu() {
 			],
 		},
 		{
-			icon: "ph-copy ph-bold ph-lg",
+			icon: `${icon("ph-copy")}`,
 			text: i18n.ts._deck.stackLeft,
 			action: () => {
 				stackLeftColumn(props.column.id);
@@ -228,7 +220,7 @@ function getMenu() {
 		},
 		props.isStacked
 			? {
-					icon: "ph-browser ph-bold ph-lg",
+					icon: `${icon("ph-browser")}`,
 					text: i18n.ts._deck.popRight,
 					action: () => {
 						popRightColumn(props.column.id);
@@ -237,7 +229,7 @@ function getMenu() {
 			: undefined,
 		null,
 		{
-			icon: "ph-trash ph-bold ph-lg",
+			icon: `${icon("ph-trash")}`,
 			text: i18n.ts.remove,
 			danger: true,
 			action: () => {
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index 5973cbe37..33d0389ca 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -6,7 +6,7 @@
 	>
 		<template #header
 			><i
-				class="ph-envelope-simple-open ph-bold ph-lg"
+				:class="icon('ph-envelope-simple-open')"
 				style="margin-right: 8px"
 			></i
 			>{{ column.name }}</template
@@ -17,10 +17,10 @@
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import XNotes from "@/components/MkNotes.vue";
+import icon from "@/scripts/icon";
 
 defineProps<{
 	column: Column;
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 2de1ec4cd..761c62aba 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -6,7 +6,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header>
-			<i class="ph-list-bullets ph-bold ph-lg"></i
+			<i :class="icon('ph-list-bullets')"></i
 			><span style="margin-left: 8px">{{ column.name }}</span>
 		</template>
 
@@ -29,6 +29,7 @@ import { updateColumn } from "./deck-store";
 import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	column: Column;
@@ -65,7 +66,7 @@ async function setList() {
 
 const menu = [
 	{
-		icon: "ph-pencil ph-bold ph-lg",
+		icon: `${icon("ph-pencil")}`,
 		text: i18n.ts.selectList,
 		action: setList,
 	},
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue
index f23803400..855fd79eb 100644
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -29,10 +29,8 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
 import type { PageMetadata } from "@/scripts/page-metadata";
-import {
-	provideMetadataReceiver,
-	setPageMetadata,
-} from "@/scripts/page-metadata";
+import { provideMetadataReceiver } from "@/scripts/page-metadata";
+import icon from "@/scripts/icon";
 
 defineProps<{
 	column: Column;
@@ -81,7 +79,7 @@ function onContextmenu(ev: MouseEvent) {
 				text: path,
 			},
 			{
-				icon: "ph-browser ph-bold ph-lg",
+				icon: `${icon("ph-browser")}`,
 				text: i18n.ts.openInWindow,
 				action: () => {
 					os.pageWindow(path);
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 08e11dd21..d2a498240 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -5,7 +5,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header
-			><i class="ph-at ph-bold ph-lg" style="margin-right: 8px"></i
+			><i :class="icon('ph-at')" style="margin-right: 8px"></i
 			>{{ column.name }}</template
 		>
 
@@ -14,10 +14,10 @@
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import XNotes from "@/components/MkNotes.vue";
+import icon from "@/scripts/icon";
 
 defineProps<{
 	column: Column;
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index 37cbe30a7..2fdece9e4 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -6,7 +6,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header
-			><i class="ph-bell ph-bold ph-lg" style="margin-right: 8px"></i
+			><i :class="icon('ph-bell')" style="margin-right: 8px"></i
 			>{{ column.name }}</template
 		>
 
@@ -22,6 +22,7 @@ import type { Column } from "./deck-store";
 import XNotifications from "@/components/MkNotifications.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	column: Column;
@@ -54,7 +55,7 @@ function func(): void {
 
 const menu = [
 	{
-		icon: "ph-pencil ph-bold ph-lg",
+		icon: `${icon("ph-pencil")}`,
 		text: i18n.ts.notificationSetting,
 		action: func,
 	},
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index e53710de7..9b37687d1 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -8,25 +8,25 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header>
-			<i v-if="column.tl === 'home'" class="ph-house ph-bold ph-lg"></i>
+			<i v-if="column.tl === 'home'" :class="icon('ph-house')"></i>
 			<i
 				v-else-if="column.tl === 'local'"
-				class="ph-chats-circle ph-bold ph-lg"
+				:class="icon('ph-chats-circle')"
 			></i>
 			<i
 				v-else-if="column.tl === 'social'"
-				class="ph-share-network ph-bold ph-lg"
+				:class="icon('ph-share-network')"
 			></i>
 			<i
 				v-else-if="column.tl === 'global'"
-				class="ph-planet ph-bold ph-lg"
+				:class="icon('ph-planet')"
 			></i>
 			<span style="margin-left: 8px">{{ column.name }}</span>
 		</template>
 
 		<div v-if="disabled" class="iwaalbte">
 			<p>
-				<i class="ph-minus-circle ph-bold ph-lg"></i>
+				<i :class="icon('ph-minus-circle')"></i>
 				{{ i18n.t("disabled-timeline.title") }}
 			</p>
 			<p class="desc">{{ i18n.t("disabled-timeline.description") }}</p>
@@ -53,6 +53,7 @@ import * as os from "@/os";
 import { $i } from "@/account";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	column: Column;
@@ -143,7 +144,7 @@ function onChangeActiveState(state) {
 
 const menu = [
 	{
-		icon: "ph-pencil ph-bold ph-lg",
+		icon: `${icon("ph-pencil")}`,
 		text: i18n.ts.timeline,
 		action: setType,
 	},
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 9b8143027..45534dce1 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -7,7 +7,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header
-			><i class="ph-browser ph-bold ph-lg" style="margin-right: 8px"></i
+			><i :class="icon('ph-browser')" style="margin-right: 8px"></i
 			>{{ column.name }}</template
 		>
 		<div class="wtdtxvec">
@@ -44,6 +44,7 @@ import {
 } from "./deck-store";
 import XWidgets from "@/components/MkWidgets.vue";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	column: Column;
@@ -78,7 +79,7 @@ function func() {
 
 const menu = [
 	{
-		icon: "ph-pencil ph-bold ph-lg",
+		icon: `${icon("ph-pencil")}`,
 		text: i18n.ts.editWidgets,
 		action: func,
 	},
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 346fab549..1082dc946 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -29,7 +29,7 @@
 			class="widgetButton _button"
 			@click="widgetsShowing = true"
 		>
-			<i class="ph-stack ph-bold ph-lg"></i>
+			<i :class="icon('ph-stack')"></i>
 		</button>
 
 		<div v-if="isMobile" class="buttons">
@@ -40,11 +40,13 @@
 				@click="drawerMenuShowing = true"
 			>
 				<div class="button-wrapper">
-					<i class="ph-list ph-bold ph-lg"></i
+					<i :class="icon('ph-list')"></i
 					><span
 						v-if="menuIndicated"
 						class="indicator"
-						:class="{ animateIndicator: $store.state.animation }"
+						:class="{
+							animateIndicator: defaultStore.state.animation,
+						}"
 						><i class="ph-circle ph-fill"></i
 					></span>
 				</div>
@@ -64,7 +66,7 @@
 					class="button-wrapper"
 					:class="buttonAnimIndex === 0 ? 'on' : ''"
 				>
-					<i class="ph-house ph-bold ph-lg"></i>
+					<i :class="icon('ph-house')"></i>
 				</div>
 			</button>
 			<button
@@ -81,11 +83,13 @@
 					class="button-wrapper"
 					:class="buttonAnimIndex === 1 ? 'on' : ''"
 				>
-					<i class="ph-bell ph-bold ph-lg"></i
+					<i :class="icon('ph-bell')"></i
 					><span
 						v-if="$i?.hasUnreadNotification"
 						class="indicator"
-						:class="{ animateIndicator: $store.state.animation }"
+						:class="{
+							animateIndicator: defaultStore.state.animation,
+						}"
 						><i class="ph-circle ph-fill"></i
 					></span>
 				</div>
@@ -103,11 +107,13 @@
 					class="button-wrapper"
 					:class="buttonAnimIndex === 2 ? 'on' : ''"
 				>
-					<i class="ph-chats-teardrop ph-bold ph-lg"></i
+					<i :class="icon('ph-chats-teardrop')"></i
 					><span
 						v-if="$i?.hasUnreadMessagingMessage"
 						class="indicator"
-						:class="{ animateIndicator: $store.state.animation }"
+						:class="{
+							animateIndicator: defaultStore.state.animation,
+						}"
 						><i class="ph-circle ph-fill"></i
 					></span>
 				</div>
@@ -119,7 +125,7 @@
 				@click="widgetsShowing = true"
 			>
 				<div class="button-wrapper">
-					<i class="ph-stack ph-bold ph-lg"></i>
+					<i :class="icon('ph-stack')"></i>
 				</div>
 			</button>
 		</div>
@@ -132,7 +138,7 @@
 			class="postButton button post _button"
 			@click="os.post()"
 		>
-			<i class="ph-pencil ph-bold ph-lg"></i>
+			<i :class="icon('ph-pencil')"></i>
 		</button>
 		<button
 			v-if="
@@ -143,10 +149,12 @@
 			:aria-label="i18n.t('startMessaging')"
 			@click="messagingStart"
 		>
-			<i class="ph-user-plus ph-bold ph-lg"></i>
+			<i :class="icon('ph-user-plus')"></i>
 		</button>
 
-		<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
+		<transition
+			:name="defaultStore.state.animation ? 'menuDrawer-back' : ''"
+		>
 			<div
 				v-if="drawerMenuShowing"
 				class="menuDrawer-back _modalBg"
@@ -155,11 +163,13 @@
 			></div>
 		</transition>
 
-		<transition :name="$store.state.animation ? 'menuDrawer' : ''">
+		<transition :name="defaultStore.state.animation ? 'menuDrawer' : ''">
 			<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer" />
 		</transition>
 
-		<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
+		<transition
+			:name="defaultStore.state.animation ? 'widgetsDrawer-back' : ''"
+		>
 			<div
 				v-if="widgetsShowing"
 				class="widgetsDrawer-back _modalBg"
@@ -168,7 +178,7 @@
 			></div>
 		</transition>
 
-		<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
+		<transition :name="defaultStore.state.animation ? 'widgetsDrawer' : ''">
 			<XWidgets v-if="widgetsShowing" class="widgetsDrawer" />
 		</transition>
 
@@ -191,11 +201,9 @@ import { navbarItemDef } from "@/navbar";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { mainRouter } from "@/router";
-import {
-	provideMetadataReceiver,
-	setPageMetadata,
-} from "@/scripts/page-metadata";
+import { provideMetadataReceiver } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
+import icon from "@/scripts/icon";
 
 const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
 const XStatusBars = defineAsyncComponent(
@@ -291,21 +299,21 @@ function messagingStart(ev) {
 		[
 			{
 				text: i18n.ts.messagingWithUser,
-				icon: "ph-user ph-bold ph-lg",
+				icon: `${icon("ph-user")}`,
 				action: () => {
 					startUser();
 				},
 			},
 			{
 				text: i18n.ts.messagingWithGroup,
-				icon: "ph-users-three ph-bold ph-lg",
+				icon: `${icon("ph-users-three")}`,
 				action: () => {
 					startGroup();
 				},
 			},
 			{
 				text: i18n.ts.manageGroups,
-				icon: "ph-user-circle-gear ph-bold ph-lg",
+				icon: `${icon("ph-user-circle-gear")}`,
 				action: () => {
 					mainRouter.push("/my/groups");
 				},
@@ -377,7 +385,7 @@ const onContextmenu = (ev: MouseEvent) => {
 				text: path,
 			},
 			{
-				icon: "ph-browser ph-bold ph-lg",
+				icon: `${icon("ph-browser")}`,
 				text: i18n.ts.openInWindow,
 				action: () => {
 					os.pageWindow(path);
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 076b0f78f..2d399b79e 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -16,7 +16,8 @@
 			style="font-size: 0.9em"
 			@click="editMode = false"
 		>
-			<i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}
+			<i :class="icon('ph-check')"></i>
+			{{ i18n.ts.editWidgetsExit }}
 		</button>
 		<button
 			v-else
@@ -24,7 +25,8 @@
 			style="font-size: 0.9em"
 			@click="editMode = true"
 		>
-			<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
+			<i :class="icon('ph-pencil')"></i>
+			{{ i18n.ts.editWidgets }}
 		</button>
 	</aside>
 </template>
@@ -34,6 +36,7 @@ import { onMounted, ref } from "vue";
 import XWidgets from "@/components/MkWidgets.vue";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const emit = defineEmits<{
 	(ev: "mounted", el: Element): void;
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index ebf8af132..973c47428 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -81,7 +81,7 @@ import { search } from "@/scripts/search";
 import * as os from "@/os";
 import MkPagination from "@/components/MkPagination.vue";
 import MkButton from "@/components/MkButton.vue";
-import { ColdDeviceStorage } from "@/store";
+import { ColdDeviceStorage, defaultStore } from "@/store";
 import { mainRouter } from "@/router";
 import { i18n } from "@/i18n";
 
@@ -116,7 +116,7 @@ export default defineComponent({
 			return {
 				d: () => {
 					if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
-					this.$store.set("darkMode", !this.$store.state.darkMode);
+					defaultStore.set("darkMode", !defaultStore.state.darkMode);
 				},
 				s: search,
 				"h|/": this.help,
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 0f22f3a74..4e7fbf2f7 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -26,7 +26,7 @@
 			</div>
 		</div>
 
-		<transition :name="$store.state.animation ? 'tray-back' : ''">
+		<transition :name="defaultStore.state.animation ? 'tray-back' : ''">
 			<div
 				v-if="showMenu"
 				class="menu-back _modalBg"
@@ -35,26 +35,26 @@
 			></div>
 		</transition>
 
-		<transition :name="$store.state.animation ? 'tray' : ''">
+		<transition :name="defaultStore.state.animation ? 'tray' : ''">
 			<div v-if="showMenu" class="menu">
 				<MkA to="/" class="link" active-class="active"
-					><i class="ph-house ph-bold ph-lg icon"></i
+					><i :class="icon('ph-house icon')"></i
 					>{{ i18n.ts.home }}</MkA
 				>
 				<MkA to="/explore" class="link" active-class="active"
-					><i class="ph-compass ph-bold ph-lg icon"></i
+					><i :class="icon('ph-compass icon')"></i
 					>{{ i18n.ts.explore }}</MkA
 				>
 				<MkA to="/channels" class="link" active-class="active"
-					><i class="ph-television ph-bold ph-lg icon"></i
+					><i :class="icon('ph-television icon')"></i
 					>{{ i18n.ts.channel }}</MkA
 				>
 				<MkA to="/pages" class="link" active-class="active"
-					><i class="ph-file-text ph-bold ph-lg icon"></i
+					><i :class="icon('ph-file-text icon')"></i
 					>{{ i18n.ts.pages }}</MkA
 				>
 				<MkA to="/gallery" class="link" active-class="active"
-					><i class="ph-image-square ph-bold ph-lg icon"></i
+					><i :class="icon('ph-image-square icon')"></i
 					>{{ i18n.ts.gallery }}</MkA
 				>
 				<button
@@ -62,7 +62,7 @@
 					active-class="active"
 					@click="search()"
 				>
-					<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
+					<i :class="icon('ph-magnifying-glass icon')"></i
 					><span>{{ i18n.ts.search }}</span>
 				</button>
 				<div class="action">
@@ -87,18 +87,14 @@ import { host, instanceName } from "@/config";
 import { search } from "@/scripts/search";
 import * as os from "@/os";
 import { instance } from "@/instance";
-import MkPagination from "@/components/MkPagination.vue";
 import XSigninDialog from "@/components/MkSigninDialog.vue";
 import XSignupDialog from "@/components/MkSignupDialog.vue";
-import MkButton from "@/components/MkButton.vue";
 import { ColdDeviceStorage, defaultStore } from "@/store";
 import { mainRouter } from "@/router";
 import type { PageMetadata } from "@/scripts/page-metadata";
-import {
-	provideMetadataReceiver,
-	setPageMetadata,
-} from "@/scripts/page-metadata";
+import { provideMetadataReceiver } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const DESKTOP_THRESHOLD = 1000;
 
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 5fb103e49..42d2e3955 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -3,7 +3,7 @@
 		<div v-if="narrow === false" class="wide">
 			<div class="content">
 				<MkA to="/" class="link" active-class="active"
-					><i class="ph-house ph-bold ph-lg icon"></i
+					><i :class="icon('ph-house icon')"></i
 					>{{ i18n.ts.home }}</MkA
 				>
 				<!-- <MkA
@@ -11,23 +11,23 @@
 					to="/timeline"
 					class="link"
 					active-class="active"
-					><i class="ph-chats-circle ph-bold ph-lg icon"></i
+					><i :class="icon('ph-chats-circle icon')"></i
 					>{{ i18n.ts.timeline }}</MkA
 				> -->
 				<MkA to="/explore" class="link" active-class="active"
-					><i class="ph-compass ph-bold ph-lg icon"></i
+					><i :class="icon('ph-compass icon')"></i
 					>{{ i18n.ts.explore }}</MkA
 				>
 				<MkA to="/channels" class="link" active-class="active"
-					><i class="ph-television ph-bold ph-lg icon"></i
+					><i :class="icon('ph-television icon')"></i
 					>{{ i18n.ts.channel }}</MkA
 				>
 				<MkA to="/pages" class="link" active-class="active"
-					><i class="ph-file-text ph-bold ph-lg icon"></i
+					><i :class="icon('ph-file-text icon')"></i
 					>{{ i18n.ts.pages }}</MkA
 				>
 				<MkA to="/gallery" class="link" active-class="active"
-					><i class="ph-image-square ph-bold ph-lg icon"></i
+					><i :class="icon('ph-image-square icon')"></i
 					>{{ i18n.ts.gallery }}</MkA
 				>
 				<div v-if="info" class="page active link">
@@ -60,7 +60,7 @@
 				</div>
 				<div class="right">
 					<button class="_button search" @click="search()">
-						<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
+						<i :class="icon('ph-magnifying-glass icon')"></i
 						><span>{{ i18n.ts.search }}</span>
 					</button>
 					<button class="_buttonPrimary signup" @click="signup()">
@@ -74,7 +74,7 @@
 		</div>
 		<div v-else-if="narrow === true" class="narrow">
 			<button class="menu _button" @click="$parent.showMenu = true">
-				<i class="ph-list ph-bold ph-lg icon"></i>
+				<i :class="icon('ph-list icon')"></i>
 			</button>
 			<div v-if="info" class="title">
 				<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -112,6 +112,7 @@ import * as os from "@/os";
 import { instance } from "@/instance";
 import { search } from "@/scripts/search";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 export default defineComponent({
 	props: {
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
index beeba81d7..651307b1a 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -5,7 +5,7 @@
 		class="mkw-activity"
 	>
 		<template #header
-			><i class="ph-chart-bar ph-bold ph-lg"></i
+			><i :class="icon('ph-chart-bar')"></i
 			>{{ i18n.ts._widgets.activity }}</template
 		>
 		<template #func
@@ -14,7 +14,7 @@
 				class="_button"
 				@click="toggleView()"
 			>
-				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
+				<i :class="icon('ph-sort-ascending')"></i></button
 		></template>
 
 		<div v-if="widgetProps.newStyle">
@@ -37,13 +37,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { ref } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import XCalendar from "./activity.calendar.vue";
 import XChart from "./activity.chart.vue";
 import MkHeatmap from "@/components/MkHeatmap.vue";
@@ -52,6 +48,7 @@ import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const name = "activity";
 
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index ac1472da1..256620dfc 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -1,7 +1,7 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
 		<template #header
-			><i class="ph-terminal-window ph-bold ph-lg"></i
+			><i :class="icon('ph-terminal-window')"></i
 			>{{ i18n.ts._widgets.aiscript }}</template
 		>
 
@@ -26,20 +26,17 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { ref } from "vue";
 import { AiScript, parse, utils } from "@syuilo/aiscript";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const name = "aiscript";
 
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index a8e121519..05c262d63 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -6,7 +6,7 @@
 		class="mkw-federation"
 	>
 		<template #header
-			><i class="ph-planet ph-bold ph-lg"></i
+			><i :class="icon('ph-planet')"></i
 			>{{ i18n.ts._widgets.federation }}</template
 		>
 
@@ -15,7 +15,7 @@
 			<transition-group
 				v-else
 				tag="div"
-				:name="$store.state.animation ? 'chart' : ''"
+				:name="defaultStore.state.animation ? 'chart' : ''"
 				class="instances"
 			>
 				<div
@@ -48,13 +48,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { ref } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import MkContainer from "@/components/MkContainer.vue";
 import MkMiniChart from "@/components/MkMiniChart.vue";
@@ -62,6 +58,8 @@ import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const name = "federation";
 
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index 05cf59ab8..6654be9fe 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -7,7 +7,7 @@
 			<div class="label">
 				Inbox queue<i
 					v-if="current.inbox.waiting > 0"
-					class="ph-warning ph-bold ph-lg icon"
+					:class="icon('ph-warning icon')"
 				></i>
 			</div>
 			<div class="values">
@@ -65,7 +65,7 @@
 			<div class="label">
 				Deliver queue<i
 					v-if="current.deliver.waiting > 0"
-					class="ph-warning ph-bold ph-lg icon"
+					:class="icon('ph-warning icon')"
 				></i>
 			</div>
 			<div class="values">
@@ -123,19 +123,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from "vue";
+import { onUnmounted, reactive } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import { stream } from "@/stream";
 import number from "@/filters/number";
 import * as sound from "@/scripts/sound";
-import * as os from "@/os";
 import { deepClone } from "@/scripts/clone";
+import icon from "@/scripts/icon";
 
 const name = "jobQueue";
 
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 78c5ad5a6..7159b924a 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -1,7 +1,7 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
 		<template #header
-			><i class="ph-sticker ph-bold ph-lg"></i
+			><i :class="icon('ph-sticker')"></i
 			>{{ i18n.ts._widgets.memo }}</template
 		>
 
@@ -23,18 +23,14 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const name = "memo";
 
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index cc253b5cc..6b4d7d178 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -6,7 +6,7 @@
 		class="mkw-notifications"
 	>
 		<template #header
-			><i class="ph-bell ph-bold ph-lg"></i
+			><i :class="icon('ph-bell')"></i
 			>{{ i18n.ts.notifications }}</template
 		>
 		<template #func
@@ -15,13 +15,13 @@
 				:aria-label="i18n.ts.markAllAsRead"
 				@click="os.apiWithDialog('notifications/mark-all-as-read')"
 			>
-				<i class="ph-check ph-bold ph-lg"></i></button
+				<i :class="icon('ph-check')"></i></button
 			><button
 				class="_button"
 				:aria-label="i18n.ts.notificationSetting"
 				@click="configureNotification()"
 			>
-				<i class="ph-gear-six ph-bold ph-lg"></i></button
+				<i :class="icon('ph-gear-six')"></i></button
 		></template>
 		<div>
 			<XNotifications :include-types="widgetProps.includingTypes" />
@@ -32,16 +32,13 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import MkContainer from "@/components/MkContainer.vue";
 import XNotifications from "@/components/MkNotifications.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const name = "notifications";
 
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index 3a0130624..cb68fc7da 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -7,7 +7,7 @@
 		class="mkw-photos"
 	>
 		<template #header
-			><i class="ph-camera ph-bold ph-lg"></i
+			><i :class="icon('ph-camera')"></i
 			>{{ i18n.ts._widgets.photos }}</template
 		>
 
@@ -26,13 +26,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from "vue";
+import { onUnmounted, ref } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import { stream } from "@/stream";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
@@ -40,6 +36,7 @@ import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const name = "photos";
 
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index ec527ed67..e62f1afab 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -4,10 +4,10 @@
 		:show-header="widgetProps.showHeader"
 		class="mkw-rss-ticker"
 	>
-		<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
+		<template #header><i :class="icon('ph-rss')"></i>RSS</template>
 		<template #func
 			><button class="_button" @click="configure">
-				<i class="ph-gear-six ph-bold ph-lg"></i></button
+				<i :class="icon('ph-gear-six')"></i></button
 		></template>
 
 		<div class="ekmkgxbk">
@@ -37,19 +37,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import MarqueeText from "@/components/MkMarquee.vue";
 import type { GetFormResultType } from "@/scripts/form";
-import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import { useInterval } from "@/scripts/use-interval";
 import { shuffle } from "@/scripts/shuffle";
+import icon from "@/scripts/icon";
 
 const name = "rssTicker";
 
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index 9ba99e2d2..06dc115d6 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -5,10 +5,10 @@
 		:scrollable="true"
 		:style="`height: ${widgetProps.height}px;`"
 	>
-		<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
+		<template #header><i :class="icon('ph-rss')"></i>RSS</template>
 		<template #func
 			><button class="_button" @click="configure">
-				<i class="ph-gear-six ph-bold ph-lg"></i></button
+				<i :class="icon('ph-gear-six')"></i></button
 		></template>
 
 		<div class="ekmkgxbj">
@@ -29,17 +29,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
-import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import { useInterval } from "@/scripts/use-interval";
+import icon from "@/scripts/icon";
 
 const name = "rss";
 
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index 500e28b67..4a18098fb 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -2,7 +2,7 @@
 	<div class="vrvdvrys">
 		<XPie class="pie" :value="usage" />
 		<div>
-			<p><i class="ph-cpu ph-bold ph-lg"></i>CPU</p>
+			<p><i :class="icon('ph-cpu')"></i>CPU</p>
 			<p>{{ meta.cpu.cores }} Logical cores</p>
 			<p>{{ meta.cpu.model }}</p>
 		</div>
@@ -12,6 +12,7 @@
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import XPie from "./pie.vue";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	connection: any;
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index dcf6efd2f..71ebd1732 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -2,7 +2,7 @@
 	<div class="zbwaqsat">
 		<XPie class="pie" :value="usage" />
 		<div>
-			<p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
+			<p><i :class="icon('ph-hard-drives')"></i>Disk</p>
 			<p>Total: {{ bytes(total, 1) }}</p>
 			<p>Free: {{ bytes(available, 1) }}</p>
 			<p>Used: {{ bytes(used, 1) }}</p>
@@ -15,6 +15,7 @@ import { computed } from "vue";
 
 import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	meta: any; // TODO
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index 940d2763c..4c9030220 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -4,12 +4,12 @@
 		:naked="widgetProps.transparent"
 	>
 		<template #header
-			><i class="ph-hard-drives ph-bold ph-lg"></i
+			><i :class="icon('ph-hard-drives')"></i
 			>{{ i18n.ts._widgets.serverMetric }}</template
 		>
 		<template #func
 			><button class="_button" @click="toggleView()">
-				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
+				<i :class="icon('ph-sort-ascending')"></i></button
 		></template>
 
 		<div v-if="!instance.enableServerMachineStats" class="mkw-serverMetric">
@@ -58,13 +58,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { onUnmounted, ref } from "vue";
 import type { Widget, WidgetComponentExpose } from "../widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "../widget";
+import { useWidgetPropsManager } from "../widget";
 import XCpuMemory from "./cpu-mem.vue";
 import XNet from "./net.vue";
 import XCpu from "./cpu.vue";
@@ -77,6 +73,7 @@ import * as os from "@/os";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
+import icon from "@/scripts/icon";
 
 const name = "serverMetric";
 
diff --git a/packages/client/src/widgets/server-metric/meilisearch.vue b/packages/client/src/widgets/server-metric/meilisearch.vue
index db3212c86..ea9d1120a 100644
--- a/packages/client/src/widgets/server-metric/meilisearch.vue
+++ b/packages/client/src/widgets/server-metric/meilisearch.vue
@@ -7,7 +7,7 @@
 			:reverse="true"
 		/>
 		<div>
-			<p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>
+			<p><i :class="icon('ph-file-search')"></i>MeiliSearch</p>
 			<p>{{ i18n.ts._widgets.meiliStatus }}: {{ available }}</p>
 			<p>{{ i18n.ts._widgets.meiliSize }}: {{ bytes(totalSize, 1) }}</p>
 			<p>{{ i18n.ts._widgets.meiliIndexCount }}: {{ indexCount }}</p>
@@ -22,17 +22,18 @@ import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	connection: any;
 	meta: any;
 }>();
 
-const progress: number = ref(0);
+const progress = ref<number>(0);
 const serverStats = ref(null);
-const totalSize: number = ref(0);
-const indexCount: number = ref(0);
-const available: string = ref("unavailable");
+const totalSize = ref<number>(0);
+const indexCount = ref<number>(0);
+const available = ref<string>("unavailable");
 
 function onStats(stats) {
 	totalSize.value = stats.meilisearch.size;
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
index 96d13b36e..b5ea5fd16 100644
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -2,7 +2,7 @@
 	<div class="zlxnikvl">
 		<XPie class="pie" :value="usage" />
 		<div>
-			<p><i class="ph-microchip ph-bold ph-lg"></i>RAM</p>
+			<p><i :class="icon('ph-microchip')"></i>RAM</p>
 			<p>Total: {{ bytes(total, 1) }}</p>
 			<p>Used: {{ bytes(used, 1) }}</p>
 			<p>Free: {{ bytes(free, 1) }}</p>
@@ -14,16 +14,17 @@
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
+import icon from "@/scripts/icon";
 
 const props = defineProps<{
 	connection: any;
 	meta: any;
 }>();
 
-const usage: number = ref(0);
-const total: number = ref(0);
-const used: number = ref(0);
-const free: number = ref(0);
+const usage = ref<number>(0);
+const total = ref<number>(0);
+const used = ref<number>(0);
+const free = ref<number>(0);
 
 function onStats(stats) {
 	usage.value = stats.mem.active / stats.mem.total;
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index 8ff30d299..d3ab198be 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -9,27 +9,27 @@
 			<button class="_button" @click="choose">
 				<i
 					v-if="widgetProps.src === 'home'"
-					class="ph-house ph-bold ph-lg"
+					:class="icon('ph-house')"
 				></i>
 				<i
 					v-else-if="widgetProps.src === 'local'"
-					class="ph-chats-circle ph-bold ph-lg"
+					:class="icon('ph-chats-circle')"
 				></i>
 				<i
 					v-else-if="widgetProps.src === 'social'"
-					class="ph-share-network ph-bold ph-lg"
+					:class="icon('ph-share-network')"
 				></i>
 				<i
 					v-else-if="widgetProps.src === 'global'"
-					class="ph-planet ph-bold ph-lg"
+					:class="icon('ph-planet')"
 				></i>
 				<i
 					v-else-if="widgetProps.src === 'list'"
-					class="ph-list-bullets ph-bold ph-lg"
+					:class="icon('ph-list-bullets')"
 				></i>
 				<i
 					v-else-if="widgetProps.src === 'antenna'"
-					class="ph-television ph-bold ph-lg"
+					:class="icon('ph-television')"
 				></i>
 				<span style="margin-left: 8px">{{
 					widgetProps.src === "list"
@@ -40,9 +40,11 @@
 				}}</span>
 				<i
 					:class="
-						menuOpened
-							? 'ph-caret-up ph-bold ph-lg'
-							: 'ph-caret-down ph-bold ph-lg'
+						icon(
+							menuOpened
+								? 'ph-caret-up ph-lg'
+								: 'ph-caret-down ph-lg',
+						)
 					"
 					style="margin-left: 8px"
 				></i>
@@ -67,19 +69,15 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { ref } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import XTimeline from "@/components/MkTimeline.vue";
-import { $i } from "@/account";
 import { i18n } from "@/i18n";
+import icon from "@/scripts/icon";
 
 const name = "timeline";
 
@@ -139,7 +137,7 @@ const choose = async (ev) => {
 	]);
 	const antennaItems = antennas.map((antenna) => ({
 		text: antenna.name,
-		icon: "ph-flying-saucer ph-bold ph-lg",
+		icon: `${icon("ph-flying-saucer")}`,
 		action: () => {
 			widgetProps.antenna = antenna;
 			setSrc("antenna");
@@ -147,7 +145,7 @@ const choose = async (ev) => {
 	}));
 	const listItems = lists.map((list) => ({
 		text: list.name,
-		icon: "ph-list-bullets ph-bold ph-lg",
+		icon: `${icon("ph-list-bullets")}`,
 		action: () => {
 			widgetProps.list = list;
 			setSrc("list");
@@ -157,28 +155,28 @@ const choose = async (ev) => {
 		[
 			{
 				text: i18n.ts._timelines.home,
-				icon: "ph-house ph-bold ph-lg",
+				icon: `${icon("ph-house")}`,
 				action: () => {
 					setSrc("home");
 				},
 			},
 			{
 				text: i18n.ts._timelines.local,
-				icon: "ph-chats-teardrop ph-bold ph-lg",
+				icon: `${icon("ph-chats-teardrop")}`,
 				action: () => {
 					setSrc("local");
 				},
 			},
 			{
 				text: i18n.ts._timelines.social,
-				icon: "ph-share-network ph-bold ph-lg",
+				icon: `${icon("ph-share-network")}`,
 				action: () => {
 					setSrc("social");
 				},
 			},
 			{
 				text: i18n.ts._timelines.global,
-				icon: "ph-planet ph-bold ph-lg",
+				icon: `${icon("ph-planet")}`,
 				action: () => {
 					setSrc("global");
 				},
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index 52b068127..595a1ce13 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -1,7 +1,7 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
 		<template #header
-			><i class="ph-hash ph-bold ph-lg"></i
+			><i :class="icon('ph-hash')"></i
 			>{{ i18n.ts._widgets.trends }}</template
 		>
 
@@ -10,7 +10,7 @@
 			<transition-group
 				v-else
 				tag="div"
-				:name="$store.state.animation ? 'chart' : ''"
+				:name="defaultStore.state.animation ? 'chart' : ''"
 				class="tags"
 			>
 				<div v-for="stat in stats" :key="stat.tag">
@@ -37,19 +37,17 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { ref } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
-import {
-	WidgetComponentEmits,
-	WidgetComponentProps,
-	useWidgetPropsManager,
-} from "./widget";
+import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import MkContainer from "@/components/MkContainer.vue";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import icon from "@/scripts/icon";
 
 const name = "hashtags";
 
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
index e80c2aff7..9898df210 100644
--- a/packages/client/src/widgets/user-list.vue
+++ b/packages/client/src/widgets/user-list.vue
@@ -1,7 +1,7 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
 		<template #header
-			><i class="ph-user-list ph-bold ph-lg"></i>
+			><i :class="icon('ph-user-list')"></i>
 			{{ list ? list.name : i18n.ts._widgets.userList }}</template
 		>
 		<template #func="{ buttonStyleClass }"
@@ -10,7 +10,7 @@
 				:class="buttonStyleClass"
 				@click="configure()"
 			>
-				<i class="ph-gear-six ph-bold ph-lg"></i></button
+				<i :class="icon('ph-gear-six')"></i></button
 		></template>
 
 		<div class="wsdlkfj">
@@ -39,6 +39,7 @@ import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import { i18n } from "@/i18n";
 import MkButton from "@/components/MkButton.vue";
+import icon from "@/scripts/icon";
 
 const name = "userList";
 const widgetPropsDef = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 729ec4b4a..f56048c1b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -689,6 +689,9 @@ importers:
       '@vue/compiler-sfc':
         specifier: 3.3.4
         version: 3.3.4
+      '@vue/runtime-core':
+        specifier: 3.3.4
+        version: 3.3.4
       autobind-decorator:
         specifier: 2.4.0
         version: 2.4.0