diff --git a/public/offline.html b/public/offline.html
index 01658360f..12c6c29f5 100644
--- a/public/offline.html
+++ b/public/offline.html
@@ -31,7 +31,7 @@
   <body>
     <h1>You are offline</h1>
 
-    <button type="button">⤾ Reload</button>
+    <button type="button">↻ Reload</button>
 
     <!-- Inline the page's JavaScript file. -->
     <script>
diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx
index fd3281015..c74382282 100644
--- a/src/components/RequestList/index.tsx
+++ b/src/components/RequestList/index.tsx
@@ -1,4 +1,9 @@
-import { FilterIcon, SortDescendingIcon } from '@heroicons/react/solid';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  FilterIcon,
+  SortDescendingIcon,
+} from '@heroicons/react/solid';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
@@ -271,13 +276,15 @@ const RequestList: React.FC = () => {
               disabled={!hasPrevPage}
               onClick={() => updateQueryParams('page', (page - 1).toString())}
             >
-              {intl.formatMessage(globalMessages.previous)}
+              <ChevronLeftIcon />
+              <span>{intl.formatMessage(globalMessages.previous)}</span>
             </Button>
             <Button
               disabled={!hasNextPage}
               onClick={() => updateQueryParams('page', (page + 1).toString())}
             >
-              {intl.formatMessage(globalMessages.next)}
+              <span>{intl.formatMessage(globalMessages.next)}</span>
+              <ChevronRightIcon />
             </Button>
           </div>
         </nav>
diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index 218e3906d..1286c8dca 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -1,4 +1,4 @@
-import { AtSymbolIcon } from '@heroicons/react/outline';
+import { ArrowLeftIcon, MailIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -68,7 +68,8 @@ const ResetPassword: React.FC = () => {
                 <span className="flex justify-center mt-4 rounded-md shadow-sm">
                   <Link href="/login" passHref>
                     <Button as="a" buttonType="ghost">
-                      {intl.formatMessage(messages.gobacklogin)}
+                      <ArrowLeftIcon />
+                      <span>{intl.formatMessage(messages.gobacklogin)}</span>
                     </Button>
                   </Link>
                 </span>
@@ -125,7 +126,7 @@ const ResetPassword: React.FC = () => {
                               type="submit"
                               disabled={isSubmitting || !isValid}
                             >
-                              <AtSymbolIcon />
+                              <MailIcon />
                               <span>
                                 {intl.formatMessage(messages.emailresetlink)}
                               </span>
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index 1d4f74646..285459f25 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -1,3 +1,4 @@
+import { SupportIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -165,9 +166,12 @@ const ResetPassword: React.FC = () => {
                               type="submit"
                               disabled={isSubmitting || !isValid}
                             >
-                              {isSubmitting
-                                ? intl.formatMessage(globalMessages.saving)
-                                : intl.formatMessage(globalMessages.save)}
+                              <SupportIcon />
+                              <span>
+                                {isSubmitting
+                                  ? intl.formatMessage(globalMessages.saving)
+                                  : intl.formatMessage(globalMessages.save)}
+                              </span>
                             </Button>
                           </span>
                         </div>
diff --git a/src/components/Settings/Notifications/NotificationsDiscord.tsx b/src/components/Settings/Notifications/NotificationsDiscord.tsx
index 4c64c9c90..7ade37603 100644
--- a/src/components/Settings/Notifications/NotificationsDiscord.tsx
+++ b/src/components/Settings/Notifications/NotificationsDiscord.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -253,9 +254,12 @@ const NotificationsDiscord: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -264,9 +268,12 @@ const NotificationsDiscord: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsEmail.tsx b/src/components/Settings/Notifications/NotificationsEmail.tsx
index f29685654..e14f2f190 100644
--- a/src/components/Settings/Notifications/NotificationsEmail.tsx
+++ b/src/components/Settings/Notifications/NotificationsEmail.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -437,9 +438,12 @@ const NotificationsEmail: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -448,9 +452,12 @@ const NotificationsEmail: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
index 2141a33a6..efa5be9cf 100644
--- a/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -232,9 +233,12 @@ const NotificationsLunaSea: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -243,9 +247,12 @@ const NotificationsLunaSea: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
index 81185ec77..694eda0e0 100644
--- a/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -212,9 +213,12 @@ const NotificationsPushbullet: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -223,9 +227,12 @@ const NotificationsPushbullet: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsPushover/index.tsx b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
index 11f25608b..a79a9eb9e 100644
--- a/src/components/Settings/Notifications/NotificationsPushover/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsPushover/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -258,9 +259,12 @@ const NotificationsPushover: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -269,9 +273,12 @@ const NotificationsPushover: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsSlack/index.tsx b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
index f5a9e85f9..43d2c0f60 100644
--- a/src/components/Settings/Notifications/NotificationsSlack/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsSlack/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -210,9 +211,12 @@ const NotificationsSlack: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -221,9 +225,12 @@ const NotificationsSlack: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsTelegram.tsx b/src/components/Settings/Notifications/NotificationsTelegram.tsx
index 70261da52..bcb03df89 100644
--- a/src/components/Settings/Notifications/NotificationsTelegram.tsx
+++ b/src/components/Settings/Notifications/NotificationsTelegram.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useState } from 'react';
@@ -306,9 +307,12 @@ const NotificationsTelegram: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -317,9 +321,12 @@ const NotificationsTelegram: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
index 1fc54b8de..56aef39f7 100644
--- a/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebPush/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React, { useEffect, useState } from 'react';
@@ -132,9 +133,12 @@ const NotificationsWebPush: React.FC = () => {
                         testSettings();
                       }}
                     >
-                      {isTesting
-                        ? intl.formatMessage(globalMessages.testing)
-                        : intl.formatMessage(globalMessages.test)}
+                      <BeakerIcon />
+                      <span>
+                        {isTesting
+                          ? intl.formatMessage(globalMessages.testing)
+                          : intl.formatMessage(globalMessages.test)}
+                      </span>
                     </Button>
                   </span>
                   <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -143,9 +147,12 @@ const NotificationsWebPush: React.FC = () => {
                       type="submit"
                       disabled={isSubmitting || isTesting}
                     >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
+                      <SaveIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                     </Button>
                   </span>
                 </div>
diff --git a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
index 37dff207e..7720ab939 100644
--- a/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
+++ b/src/components/Settings/Notifications/NotificationsWebhook/index.tsx
@@ -1,3 +1,4 @@
+import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -327,9 +328,12 @@ const NotificationsWebhook: React.FC = () => {
                       testSettings();
                     }}
                   >
-                    {isTesting
-                      ? intl.formatMessage(globalMessages.testing)
-                      : intl.formatMessage(globalMessages.test)}
+                    <BeakerIcon />
+                    <span>
+                      {isTesting
+                        ? intl.formatMessage(globalMessages.testing)
+                        : intl.formatMessage(globalMessages.test)}
+                    </span>
                   </Button>
                 </span>
                 <span className="inline-flex ml-3 rounded-md shadow-sm">
@@ -338,9 +342,12 @@ const NotificationsWebhook: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/Settings/SettingsLogs/index.tsx b/src/components/Settings/SettingsLogs/index.tsx
index e244a2de9..c00dca719 100644
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -1,4 +1,6 @@
 import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
   ClipboardCopyIcon,
   DocumentSearchIcon,
   FilterIcon,
@@ -421,7 +423,8 @@ const SettingsLogs: React.FC = () => {
                         updateQueryParams('page', (page - 1).toString())
                       }
                     >
-                      {intl.formatMessage(globalMessages.previous)}
+                      <ChevronLeftIcon />
+                      <span>{intl.formatMessage(globalMessages.previous)}</span>
                     </Button>
                     <Button
                       disabled={!hasNextPage}
@@ -429,7 +432,8 @@ const SettingsLogs: React.FC = () => {
                         updateQueryParams('page', (page + 1).toString())
                       }
                     >
-                      {intl.formatMessage(globalMessages.next)}
+                      <span>{intl.formatMessage(globalMessages.next)}</span>
+                      <ChevronRightIcon />
                     </Button>
                   </div>
                 </nav>
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 25751115f..a55ecb755 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import { RefreshIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -406,9 +407,12 @@ const SettingsMain: React.FC = () => {
                         type="submit"
                         disabled={isSubmitting || !isValid}
                       >
-                        {isSubmitting
-                          ? intl.formatMessage(globalMessages.saving)
-                          : intl.formatMessage(globalMessages.save)}
+                        <SaveIcon />
+                        <span>
+                          {isSubmitting
+                            ? intl.formatMessage(globalMessages.saving)
+                            : intl.formatMessage(globalMessages.save)}
+                        </span>
                       </Button>
                     </span>
                   </div>
diff --git a/src/components/Settings/SettingsNotifications.tsx b/src/components/Settings/SettingsNotifications.tsx
index f47d89062..329ec679f 100644
--- a/src/components/Settings/SettingsNotifications.tsx
+++ b/src/components/Settings/SettingsNotifications.tsx
@@ -1,5 +1,4 @@
-import { AtSymbolIcon } from '@heroicons/react/outline';
-import { CloudIcon, LightningBoltIcon } from '@heroicons/react/solid';
+import { CloudIcon, LightningBoltIcon, MailIcon } from '@heroicons/react/solid';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import DiscordLogo from '../../assets/extlogos/discord.svg';
@@ -30,7 +29,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.email),
       content: (
         <span className="flex items-center">
-          <AtSymbolIcon className="h-4 mr-2" />
+          <MailIcon className="h-4 mr-2" />
           {intl.formatMessage(messages.email)}
         </span>
       ),
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index 3724cfecb..d790d6de1 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
@@ -520,9 +521,12 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       type="submit"
                       disabled={isSubmitting || !isValid}
                     >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
+                      <SaveIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                     </Button>
                   </span>
                 </div>
diff --git a/src/components/Settings/SettingsUsers/index.tsx b/src/components/Settings/SettingsUsers/index.tsx
index 5ab6c0ffd..327e40fc5 100644
--- a/src/components/Settings/SettingsUsers/index.tsx
+++ b/src/components/Settings/SettingsUsers/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import React from 'react';
@@ -200,9 +201,12 @@ const SettingsUsers: React.FC = () => {
                         type="submit"
                         disabled={isSubmitting}
                       >
-                        {isSubmitting
-                          ? intl.formatMessage(globalMessages.saving)
-                          : intl.formatMessage(globalMessages.save)}
+                        <SaveIcon />
+                        <span>
+                          {isSubmitting
+                            ? intl.formatMessage(globalMessages.saving)
+                            : intl.formatMessage(globalMessages.save)}
+                        </span>
                       </Button>
                     </span>
                   </div>
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 357283f93..8b7fac7a9 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -1,5 +1,7 @@
 import { TrashIcon } from '@heroicons/react/outline';
 import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
   InboxInIcon,
   PencilIcon,
   SortDescendingIcon,
@@ -740,7 +742,8 @@ const UserList: React.FC = () => {
                       updateQueryParams('page', (page - 1).toString())
                     }
                   >
-                    {intl.formatMessage(globalMessages.previous)}
+                    <ChevronLeftIcon />
+                    <span>{intl.formatMessage(globalMessages.previous)}</span>
                   </Button>
                   <Button
                     disabled={!hasNextPage}
@@ -748,7 +751,8 @@ const UserList: React.FC = () => {
                       updateQueryParams('page', (page + 1).toString())
                     }
                   >
-                    {intl.formatMessage(globalMessages.next)}
+                    <span>{intl.formatMessage(globalMessages.next)}</span>
+                    <ChevronRightIcon />
                   </Button>
                 </div>
               </nav>
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index eea4a4377..70d73bc07 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -357,9 +358,12 @@ const UserGeneralSettings: React.FC = () => {
                       type="submit"
                       disabled={isSubmitting}
                     >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
+                      <SaveIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                     </Button>
                   </span>
                 </div>
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
index e07a8ef64..155c013b7 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -146,9 +147,12 @@ const UserNotificationsDiscord: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
index 921558c92..576bdf14e 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -144,9 +145,12 @@ const UserEmailSettings: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
index dcbe614ad..b27e5afed 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -182,9 +183,12 @@ const UserTelegramSettings: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
index f2ff47c68..d2e36810a 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -96,9 +97,12 @@ const UserWebPushSettings: React.FC = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    {isSubmitting
-                      ? intl.formatMessage(globalMessages.saving)
-                      : intl.formatMessage(globalMessages.save)}
+                    <SaveIcon />
+                    <span>
+                      {isSubmitting
+                        ? intl.formatMessage(globalMessages.saving)
+                        : intl.formatMessage(globalMessages.save)}
+                    </span>
                   </Button>
                 </span>
               </div>
diff --git a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
index 5d2953a19..0f58f7e7b 100644
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
@@ -1,5 +1,4 @@
-import { AtSymbolIcon } from '@heroicons/react/outline';
-import { CloudIcon } from '@heroicons/react/solid';
+import { CloudIcon, MailIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -34,7 +33,7 @@ const UserNotificationSettings: React.FC = ({ children }) => {
       text: intl.formatMessage(messages.email),
       content: (
         <span className="flex items-center">
-          <AtSymbolIcon className="h-4 mr-2" />
+          <MailIcon className="h-4 mr-2" />
           {intl.formatMessage(messages.email)}
         </span>
       ),
diff --git a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
index 624e0a143..95fb02a5d 100644
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -223,9 +224,12 @@ const UserPasswordChange: React.FC = () => {
                       type="submit"
                       disabled={isSubmitting || !isValid}
                     >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
+                      <SaveIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                     </Button>
                   </span>
                 </div>
diff --git a/src/components/UserProfile/UserSettings/UserPermissions/index.tsx b/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
index e89682d4f..5d2098960 100644
--- a/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
@@ -1,3 +1,4 @@
+import { SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -114,9 +115,12 @@ const UserPermissions: React.FC = () => {
                       type="submit"
                       disabled={isSubmitting}
                     >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
+                      <SaveIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
+                      </span>
                     </Button>
                   </span>
                 </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 939e415bd..54d57ee03 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -303,11 +303,11 @@ button.input-action {
 .button-md svg,
 button.input-action svg,
 .plex-button svg {
-  @apply w-5 h-5 mr-2 last:mr-0;
+  @apply w-5 h-5 ml-2 mr-2 first:ml-0 last:mr-0;
 }
 
 .button-sm svg {
-  @apply w-4 h-4 mr-1.5 last:mr-0;
+  @apply w-4 h-4 ml-1.5 mr-1.5 first:ml-0 last:mr-0;
 }
 
 .modal-icon {
