diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f2642ef56b..33125a9765 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -630,9 +630,9 @@ seems to do a decent job)
 * check the changes against our `develop` (`git diff develop`) and
   against Misskey (`git diff misskey/develop`)
 * re-generate `misskey-js` (`pnpm build-misskey-js-with-types`) and commit
-* build the frontend: `rm -rf built/; NODE_ENV=development pnpm --filter=frontend
-  build` (the `development` tells it to keep some of the original
-  filenames in the built files)
+* build the frontend: `rm -rf built/; NODE_ENV=development pnpm
+  --filter=frontend --filter=frontend-embed build` (the `development`
+  tells it to keep some of the original filenames in the built files)
 * make sure there aren't any new `ti-*` classes (Tabler Icons), and
   replace them with appropriate `ph-*` ones (Phosphor Icons):
   `grep -rP '["'\'']ti[ -](?!fw)' -- built/` should show you what to change.
diff --git a/packages/frontend-embed/vite.config.ts b/packages/frontend-embed/vite.config.ts
index 64e67401c2..5c9d0164f6 100644
--- a/packages/frontend-embed/vite.config.ts
+++ b/packages/frontend-embed/vite.config.ts
@@ -6,6 +6,7 @@ import locales from '../../locales/index.js';
 import meta from '../../package.json';
 import packageInfo from './package.json' with { type: 'json' };
 import pluginJson5 from './vite.json5.js';
+import { pluginReplaceIcons } from '../frontend/vite.replaceIcons.ts';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
@@ -68,6 +69,7 @@ export function getConfig(): UserConfig {
 		plugins: [
 			pluginVue(),
 			pluginJson5(),
+			...pluginReplaceIcons(),
 		],
 
 		resolve: {
@@ -84,11 +86,8 @@ export function getConfig(): UserConfig {
 			modules: {
 				generateScopedName(name, filename, _css): string {
 					const id = (path.relative(__dirname, filename.split('?')[0]) + '-' + name).replace(/[\\\/\.\?&=]/g, '-').replace(/(src-|vue-)/g, '');
-					if (process.env.NODE_ENV === 'production') {
-						return 'x' + toBase62(hash(id)).substring(0, 4);
-					} else {
-						return id;
-					}
+					const shortId = id.replace(/^(components(-global)?|widgets|ui(-_common_)?)-/, '');
+					return shortId + '-' + toBase62(hash(id)).substring(0, 4);
 				},
 			},
 		},