diff --git a/src/settings/UserInterface.scss b/src/settings/UserInterface.scss
new file mode 100644
index 00000000..121b0784
--- /dev/null
+++ b/src/settings/UserInterface.scss
@@ -0,0 +1,4 @@
+.user-interface__theme-icon {
+  float: right;
+  margin-top: .25rem;
+}
diff --git a/src/settings/UserInterface.tsx b/src/settings/UserInterface.tsx
index 608cf65f..3180ebc4 100644
--- a/src/settings/UserInterface.tsx
+++ b/src/settings/UserInterface.tsx
@@ -1,8 +1,11 @@
 import { FC } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
 import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { changeThemeInMarkup, Theme } from '../utils/theme';
 import { Settings, UiSettings } from './reducers/settings';
+import './UserInterface.scss';
 
 interface UserInterfaceProps {
   settings: Settings;
@@ -11,6 +14,7 @@ interface UserInterfaceProps {
 
 export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
   <SimpleCard title="User interface">
+    <FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
     <ToggleSwitch
       checked={ui?.theme === 'dark'}
       onChange={(useDarkTheme) => {
diff --git a/test/settings/UserInterface.test.tsx b/test/settings/UserInterface.test.tsx
index e5c295e3..02a0a037 100644
--- a/test/settings/UserInterface.test.tsx
+++ b/test/settings/UserInterface.test.tsx
@@ -1,5 +1,7 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
+import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Settings, UiSettings } from '../../src/settings/reducers/settings';
 import { UserInterface } from '../../src/settings/UserInterface';
 import ToggleSwitch from '../../src/utils/ToggleSwitch';
@@ -26,13 +28,24 @@ describe('<UserInterface />', () => {
     [{ theme: 'dark' as Theme }, true ],
     [{ theme: 'light' as Theme }, false ],
     [ undefined, false ],
-  ])('switch is toggled if theme is dark', (ui, expectedChecked) => {
+  ])('toggles switch if theme is dark', (ui, expectedChecked) => {
     const wrapper = createWrapper(ui);
     const toggle = wrapper.find(ToggleSwitch);
 
     expect(toggle.prop('checked')).toEqual(expectedChecked);
   });
 
+  it.each([
+    [{ theme: 'dark' as Theme }, faMoon ],
+    [{ theme: 'light' as Theme }, faSun ],
+    [ undefined, faSun ],
+  ])('shows different icons based on theme', (ui, expectedIcon) => {
+    const wrapper = createWrapper(ui);
+    const icon = wrapper.find(FontAwesomeIcon);
+
+    expect(icon.prop('icon')).toEqual(expectedIcon);
+  });
+
   it.each([
     [ true, 'dark' ],
     [ false, 'light' ],