diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index fac11d9ef..8e23d4cfa 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="nicnklzforebnpfgasiypmpdaaglujqm">
 	<label>
-		<span>{{ $t('light-theme') }}</span>
+		<span><fa :icon="faSun"/> {{ $t('light-theme') }}</span>
 		<ui-select v-model="light" :placeholder="$t('light-theme')">
 			<optgroup :label="$t('light-themes')">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -13,7 +13,7 @@
 	</label>
 
 	<label>
-		<span>{{ $t('dark-theme') }}</span>
+		<span><fa :icon="faMoon"/> {{ $t('dark-theme') }}</span>
 		<ui-select v-model="dark" :placeholder="$t('dark-theme')">
 			<optgroup :label="$t('dark-themes')">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -104,6 +104,7 @@ import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
 import * as tinycolor from 'tinycolor2';
 import * as JSON5 from 'json5';
+import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons';
 
 // 後方互換性のため
 function convertOldThemedefinition(t) {
@@ -135,7 +136,8 @@ export default Vue.extend({
 			myThemeDesc: '',
 			myThemePrimary: lightTheme.vars.primary,
 			myThemeSecondary: lightTheme.vars.secondary,
-			myThemeText: lightTheme.vars.text
+			myThemeText: lightTheme.vars.text,
+			faMoon, faSun
 		};
 	},