fix(deps): update dependency @heroicons/react to v2 (#2970)

* fix(deps): update dependency @heroicons/react to v2

* fix: update imports and fix icon name changes for heroicons

* fix: also update MiniStatusBadge to use new check icon

* fix: update last place with old import

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: sct <ryan@sct.dev>

package.json

@@ -34,7 +34,7 @@
     "@formatjs/intl-pluralrules": "5.1.8",
     "@formatjs/intl-utils": "3.8.4",
     "@headlessui/react": "1.7.7",
-    "@heroicons/react": "1.0.6",
+    "@heroicons/react": "2.0.13",
     "@supercharge/request-ip": "1.2.0",
     "@svgr/webpack": "6.5.1",
     "@tanem/react-nprogress": "5.0.22",

src/components/CollectionDetails/index.tsx

@@ -10,7 +10,7 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
-import { DownloadIcon } from '@heroicons/react/outline';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { MediaStatus } from '@server/constants/media';
 import type { Collection } from '@server/models/Collection';
 import { uniq } from 'lodash';
@@ -276,7 +276,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
               }}
               text={
                 <>
-                  <DownloadIcon />
+                  <ArrowDownTrayIcon />
                   <span>
                     {intl.formatMessage(
                       hasRequestable
@@ -295,7 +295,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
                     setIs4k(true);
                   }}
                 >
-                  <DownloadIcon />
+                  <ArrowDownTrayIcon />
                   <span>
                     {intl.formatMessage(messages.requestcollection4k)}
                   </span>

src/components/Common/Alert/index.tsx

@@ -1,8 +1,8 @@
 import {
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   InformationCircleIcon,
   XCircleIcon,
-} from '@heroicons/react/solid';
+} from '@heroicons/react/24/solid';
 
 interface AlertProps {
   title?: React.ReactNode;
@@ -16,7 +16,7 @@ const Alert = ({ title, children, type }: AlertProps) => {
       'border border-yellow-500 backdrop-blur bg-yellow-400 bg-opacity-20',
     titleColor: 'text-yellow-100',
     textColor: 'text-yellow-300',
-    svg: <ExclamationIcon className="h-5 w-5" />,
+    svg: <ExclamationTriangleIcon className="h-5 w-5" />,
   };
 
   switch (type) {

src/components/Common/ButtonWithDropdown/index.tsx

@@ -1,7 +1,7 @@
 import useClickOutside from '@app/hooks/useClickOutside';
 import { withProperties } from '@app/utils/typeHelpers';
 import { Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { Fragment, useRef, useState } from 'react';
 

src/components/Common/SensitiveInput/index.tsx

@@ -1,4 +1,4 @@
-import { EyeIcon, EyeOffIcon } from '@heroicons/react/solid';
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
 import { Field } from 'formik';
 import { useState } from 'react';
 
@@ -43,7 +43,7 @@ const SensitiveInput = ({ as = 'input', ...props }: SensitiveInputProps) => {
         type="button"
         className="input-action"
       >
-        {isHidden ? <EyeOffIcon /> : <EyeIcon />}
+        {isHidden ? <EyeSlashIcon /> : <EyeIcon />}
       </button>
     </>
   );

src/components/Common/SlideOver/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll';
 import { Transition } from '@headlessui/react';
-import { XIcon } from '@heroicons/react/outline';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
@@ -83,7 +83,7 @@ const SlideOver = ({
                           className="text-gray-200 transition duration-150 ease-in-out hover:text-white"
                           onClick={() => onClose()}
                         >
-                          <XIcon className="h-6 w-6" />
+                          <XMarkIcon className="h-6 w-6" />
                         </button>
                       </div>
                     </div>

src/components/Common/StatusBadgeMini/index.tsx

@@ -1,9 +1,5 @@
-import {
-  BellIcon,
-  CheckIcon,
-  ClockIcon,
-  MinusSmIcon,
-} from '@heroicons/react/solid';
+import { CheckCircleIcon } from '@heroicons/react/20/solid';
+import { BellIcon, ClockIcon, MinusSmallIcon } from '@heroicons/react/24/solid';
 import { MediaStatus } from '@server/constants/media';
 
 interface StatusBadgeMiniProps {
@@ -22,7 +18,7 @@ const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => {
       break;
     case MediaStatus.AVAILABLE:
       badgeStyle.push('bg-green-500 ring-green-400');
-      indicatorIcon = <CheckIcon />;
+      indicatorIcon = <CheckCircleIcon />;
       break;
     case MediaStatus.PENDING:
       badgeStyle.push('bg-yellow-500 ring-yellow-400');
@@ -30,7 +26,7 @@ const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => {
       break;
     case MediaStatus.PARTIALLY_AVAILABLE:
       badgeStyle.push('bg-green-500 ring-green-400');
-      indicatorIcon = <MinusSmIcon />;
+      indicatorIcon = <MinusSmallIcon />;
       break;
   }
 

src/components/Discover/MovieGenreSlider/index.tsx

@@ -1,7 +1,7 @@
 import { genreColorMap } from '@app/components/Discover/constants';
 import GenreCard from '@app/components/GenreCard';
 import Slider from '@app/components/Slider';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { GenreSliderItem } from '@server/interfaces/api/discoverInterfaces';
 import Link from 'next/link';
 import React from 'react';
@@ -28,7 +28,7 @@ const MovieGenreSlider = () => {
         <Link href="/discover/movies/genres">
           <a className="slider-title">
             <span>{intl.formatMessage(messages.moviegenres)}</span>
-            <ArrowCircleRightIcon />
+            <ArrowRightCircleIcon />
           </a>
         </Link>
       </div>

src/components/Discover/PlexWatchlistSlider/index.tsx

@@ -1,7 +1,7 @@
 import Slider from '@app/components/Slider';
 import TmdbTitleCard from '@app/components/TitleCard/TmdbTitleCard';
 import { UserType, useUser } from '@app/hooks/useUser';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { WatchlistItem } from '@server/interfaces/api/discoverInterfaces';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
@@ -43,7 +43,7 @@ const PlexWatchlistSlider = () => {
         <Link href="/discover/watchlist">
           <a className="slider-title">
             <span>{intl.formatMessage(messages.plexwatchlist)}</span>
-            <ArrowCircleRightIcon />
+            <ArrowRightCircleIcon />
           </a>
         </Link>
       </div>

src/components/Discover/RecentRequestsSlider/index.tsx

@@ -1,7 +1,7 @@
 import { sliderTitles } from '@app/components/Discover/constants';
 import RequestCard from '@app/components/RequestCard';
 import Slider from '@app/components/Slider';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { RequestResultsResponse } from '@server/interfaces/api/requestInterfaces';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
@@ -27,7 +27,7 @@ const RecentRequestsSlider = () => {
         <Link href="/requests?filter=all">
           <a className="slider-title">
             <span>{intl.formatMessage(sliderTitles.recentrequests)}</span>
-            <ArrowCircleRightIcon />
+            <ArrowRightCircleIcon />
           </a>
         </Link>
       </div>

src/components/Discover/TvGenreSlider/index.tsx

@@ -1,7 +1,7 @@
 import { genreColorMap } from '@app/components/Discover/constants';
 import GenreCard from '@app/components/GenreCard';
 import Slider from '@app/components/Slider';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { GenreSliderItem } from '@server/interfaces/api/discoverInterfaces';
 import Link from 'next/link';
 import React from 'react';
@@ -28,7 +28,7 @@ const TvGenreSlider = () => {
         <Link href="/discover/tv/genres">
           <a className="slider-title">
             <span>{intl.formatMessage(messages.tvgenres)}</span>
-            <ArrowCircleRightIcon />
+            <ArrowRightCircleIcon />
           </a>
         </Link>
       </div>

src/components/IssueBlock/index.tsx

@@ -3,10 +3,10 @@ import { issueOptions } from '@app/components/IssueModal/constants';
 import { useUser } from '@app/hooks/useUser';
 import {
   CalendarIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   EyeIcon,
   UserIcon,
-} from '@heroicons/react/solid';
+} from '@heroicons/react/24/solid';
 import type Issue from '@server/entity/Issue';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
@@ -31,7 +31,7 @@ const IssueBlock = ({ issue }: IssueBlockProps) => {
       <div className="flex items-center justify-between">
         <div className="mr-6 min-w-0 flex-1 flex-col items-center text-sm leading-5">
           <div className="flex flex-nowrap">
-            <ExclamationIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
+            <ExclamationTriangleIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
             <span className="w-40 truncate md:w-auto">
               {intl.formatMessage(issueOption.name)}
             </span>

src/components/IssueDetails/IssueComment/index.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import Modal from '@app/components/Common/Modal';
 import { Permission, useUser } from '@app/hooks/useUser';
 import { Menu, Transition } from '@headlessui/react';
-import { DotsVerticalIcon } from '@heroicons/react/solid';
+import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import type { default as IssueCommentType } from '@server/entity/IssueComment';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -104,7 +104,7 @@ const IssueComment = ({
                   <div>
                     <Menu.Button className="flex items-center rounded-full text-gray-400 hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
                       <span className="sr-only">Open options</span>
-                      <DotsVerticalIcon
+                      <EllipsisVerticalIcon
                         className="h-5 w-5"
                         aria-hidden="true"
                       />

src/components/IssueDetails/IssueDescription/index.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { Menu, Transition } from '@headlessui/react';
-import { DotsVerticalIcon } from '@heroicons/react/solid';
+import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -46,7 +46,10 @@ const IssueDescription = ({
                 <div>
                   <Menu.Button className="flex items-center rounded-full text-gray-400 hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
                     <span className="sr-only">Open options</span>
-                    <DotsVerticalIcon className="h-5 w-5" aria-hidden="true" />
+                    <EllipsisVerticalIcon
+                      className="h-5 w-5"
+                      aria-hidden="true"
+                    />
                   </Menu.Button>
                 </div>
 

src/components/IssueDetails/index.tsx

@@ -13,12 +13,12 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { Transition } from '@headlessui/react';
 import {
-  ChatIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
   CheckCircleIcon,
   PlayIcon,
   ServerIcon,
-} from '@heroicons/react/outline';
-import { RefreshIcon } from '@heroicons/react/solid';
+} from '@heroicons/react/24/outline';
+import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import { IssueStatus } from '@server/constants/issue';
 import { MediaType } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
@@ -510,7 +510,7 @@ const IssueDetails = () => {
                                     }
                                   }}
                                 >
-                                  <RefreshIcon />
+                                  <ArrowPathIcon />
                                   <span>
                                     {intl.formatMessage(
                                       values.message
@@ -529,7 +529,7 @@ const IssueDetails = () => {
                               !isValid || isSubmitting || !values.message
                             }
                           >
-                            <ChatIcon />
+                            <ChatBubbleOvalLeftEllipsisIcon />
                             <span>
                               {intl.formatMessage(messages.leavecomment)}
                             </span>

src/components/IssueList/IssueItem/index.tsx

@@ -4,7 +4,7 @@ import CachedImage from '@app/components/Common/CachedImage';
 import { issueOptions } from '@app/components/IssueModal/constants';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { EyeIcon } from '@heroicons/react/solid';
+import { EyeIcon } from '@heroicons/react/24/solid';
 import { IssueStatus } from '@server/constants/issue';
 import { MediaType } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';

src/components/IssueList/index.tsx

@@ -6,11 +6,11 @@ import IssueItem from '@app/components/IssueList/IssueItem';
 import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import globalMessages from '@app/i18n/globalMessages';
 import {
+  BarsArrowDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  FilterIcon,
-  SortDescendingIcon,
-} from '@heroicons/react/solid';
+  FunnelIcon,
+} from '@heroicons/react/24/solid';
 import type { IssueResultsResponse } from '@server/interfaces/api/issueInterfaces';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -98,7 +98,7 @@ const IssueList = () => {
         <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
           <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
-              <FilterIcon className="h-6 w-6" />
+              <FunnelIcon className="h-6 w-6" />
             </span>
             <select
               id="filter"
@@ -128,7 +128,7 @@ const IssueList = () => {
           </div>
           <div className="mb-2 flex flex-grow sm:mb-0 lg:flex-grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
-              <SortDescendingIcon className="h-6 w-6" />
+              <BarsArrowDownIcon className="h-6 w-6" />
             </span>
             <select
               id="sort"

src/components/IssueModal/CreateIssueModal/index.tsx

@@ -5,7 +5,7 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { RadioGroup } from '@headlessui/react';
-import { ArrowCircleRightIcon } from '@heroicons/react/solid';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
 import { MediaStatus } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
@@ -121,7 +121,7 @@ const CreateIssueModal = ({
                 <Link href={`/issues/${newIssue.data.id}`}>
                   <Button as="a" className="mt-4">
                     <span>{intl.formatMessage(messages.toastviewissue)}</span>
-                    <ArrowCircleRightIcon />
+                    <ArrowRightCircleIcon />
                   </Button>
                 </Link>
               </>,

src/components/Layout/LanguagePicker/index.tsx

@@ -3,7 +3,7 @@ import { availableLanguages } from '@app/context/LanguageContext';
 import useClickOutside from '@app/hooks/useClickOutside';
 import useLocale from '@app/hooks/useLocale';
 import { Transition } from '@headlessui/react';
-import { TranslateIcon } from '@heroicons/react/solid';
+import { LanguageIcon } from '@heroicons/react/24/solid';
 import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -28,7 +28,7 @@ const LanguagePicker = () => {
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >
-          <TranslateIcon className="h-6 w-6" />
+          <LanguageIcon className="h-6 w-6" />
         </button>
       </div>
       <Transition

src/components/Layout/Notifications/index.tsx

@@ -1,4 +1,4 @@
-import { BellIcon } from '@heroicons/react/outline';
+import { BellIcon } from '@heroicons/react/24/outline';
 
 const Notifications = () => {
   return (

src/components/Layout/SearchInput/index.tsx

@@ -1,6 +1,6 @@
 import useSearchInput from '@app/hooks/useSearchInput';
-import { XCircleIcon } from '@heroicons/react/outline';
-import { SearchIcon } from '@heroicons/react/solid';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -18,7 +18,7 @@ const SearchInput = () => {
         </label>
         <div className="relative flex w-full items-center text-white focus-within:text-gray-200">
           <div className="pointer-events-none absolute inset-y-0 left-4 flex items-center">
-            <SearchIcon className="h-5 w-5" />
+            <MagnifyingGlassIcon className="h-5 w-5" />
           </div>
           <input
             id="search_field"

src/components/Layout/Sidebar/index.tsx

@@ -5,11 +5,11 @@ import { Transition } from '@headlessui/react';
 import {
   ClockIcon,
   CogIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   SparklesIcon,
   UsersIcon,
-  XIcon,
-} from '@heroicons/react/outline';
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useRef } from 'react';
@@ -56,7 +56,7 @@ const SidebarLinks: SidebarLinkProps[] = [
     href: '/issues',
     messagesKey: 'issues',
     svgIcon: (
-      <ExclamationIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
+      <ExclamationTriangleIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
     ),
     activeRegExp: /^\/issues/,
     requiredPermission: [
@@ -126,7 +126,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                       aria-label="Close sidebar"
                       onClick={() => setClosed()}
                     >
-                      <XIcon className="h-6 w-6 text-white" />
+                      <XMarkIcon className="h-6 w-6 text-white" />
                     </button>
                   </div>
                   <div

src/components/Layout/UserDropdown/index.tsx

@@ -1,8 +1,11 @@
 import MiniQuotaDisplay from '@app/components/Layout/UserDropdown/MiniQuotaDisplay';
 import { useUser } from '@app/hooks/useUser';
 import { Menu, Transition } from '@headlessui/react';
-import { ClockIcon, LogoutIcon } from '@heroicons/react/outline';
-import { CogIcon, UserIcon } from '@heroicons/react/solid';
+import {
+  ArrowRightOnRectangleIcon,
+  ClockIcon,
+} from '@heroicons/react/24/outline';
+import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
@@ -147,7 +150,7 @@ const UserDropdown = () => {
                     }`}
                     onClick={() => logout()}
                   >
-                    <LogoutIcon className="mr-2 inline h-5 w-5" />
+                    <ArrowRightOnRectangleIcon className="mr-2 inline h-5 w-5" />
                     <span>{intl.formatMessage(messages.signout)}</span>
                   </a>
                 )}

src/components/Layout/VersionStatus/index.tsx

@@ -1,9 +1,9 @@
 import {
-  ArrowCircleUpIcon,
+  ArrowUpCircleIcon,
   BeakerIcon,
-  CodeIcon,
+  CodeBracketIcon,
   ServerIcon,
-} from '@heroicons/react/outline';
+} from '@heroicons/react/24/outline';
 import type { StatusResponse } from '@server/interfaces/api/settingsInterfaces';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
@@ -56,7 +56,7 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
         }`}
       >
         {data.commitTag === 'local' ? (
-          <CodeIcon className="h-6 w-6" />
+          <CodeBracketIcon className="h-6 w-6" />
         ) : data.version.startsWith('develop-') ? (
           <BeakerIcon className="h-6 w-6" />
         ) : (
@@ -80,7 +80,7 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
             )}
           </span>
         </div>
-        {data.updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
+        {data.updateAvailable && <ArrowUpCircleIcon className="h-6 w-6" />}
       </a>
     </Link>
   );

src/components/Layout/index.tsx

@@ -6,8 +6,8 @@ import type { AvailableLocale } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
-import { MenuAlt2Icon } from '@heroicons/react/outline';
-import { ArrowLeftIcon } from '@heroicons/react/solid';
+import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
+import { ArrowLeftIcon } from '@heroicons/react/24/solid';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -76,7 +76,7 @@ const Layout = ({ children }: LayoutProps) => {
             onClick={() => setSidebarOpen(true)}
             data-testid="sidebar-toggle"
           >
-            <MenuAlt2Icon className="h-6 w-6" />
+            <Bars3BottomLeftIcon className="h-6 w-6" />
           </button>
           <div className="flex flex-1 items-center justify-between pr-4 md:pr-4 md:pl-4">
             <button

src/components/Login/LocalLogin.tsx

@@ -1,7 +1,10 @@
 import Button from '@app/components/Common/Button';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import useSettings from '@app/hooks/useSettings';
-import { LoginIcon, SupportIcon } from '@heroicons/react/outline';
+import {
+  ArrowLeftOnRectangleIcon,
+  LifebuoyIcon,
+} from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -121,7 +124,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       disabled={isSubmitting || !isValid}
                       data-testid="local-signin-button"
                     >
-                      <LoginIcon />
+                      <ArrowLeftOnRectangleIcon />
                       <span>
                         {isSubmitting
                           ? intl.formatMessage(messages.signingin)
@@ -133,7 +136,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                     <span className="inline-flex rounded-md shadow-sm">
                       <Link href="/resetpassword" passHref>
                         <Button as="a" buttonType="ghost">
-                          <SupportIcon />
+                          <LifebuoyIcon />
                           <span>
                             {intl.formatMessage(messages.forgotpassword)}
                           </span>

src/components/Login/index.tsx

@@ -7,7 +7,7 @@ import PlexLoginButton from '@app/components/PlexLoginButton';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
 import { Transition } from '@headlessui/react';
-import { XCircleIcon } from '@heroicons/react/solid';
+import { XCircleIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
 import { useEffect, useState } from 'react';

src/components/ManageSlideOver/index.tsx

@@ -7,8 +7,8 @@ import RequestBlock from '@app/components/RequestBlock';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { ServerIcon, ViewListIcon } from '@heroicons/react/outline';
-import { CheckCircleIcon, DocumentRemoveIcon } from '@heroicons/react/solid';
+import { Bars4Icon, ServerIcon } from '@heroicons/react/24/outline';
+import { CheckCircleIcon, DocumentMinusIcon } from '@heroicons/react/24/solid';
 import { IssueStatus } from '@server/constants/issue';
 import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
 import type { MediaWatchDataResponse } from '@server/interfaces/api/mediaInterfaces';
@@ -297,7 +297,7 @@ const ManageSlideOver = ({
                             watchData?.data ? 'rounded-t-none' : ''
                           }`}
                         >
-                          <ViewListIcon />
+                          <Bars4Icon />
                           <span>
                             {intl.formatMessage(messages.opentautulli)}
                           </span>
@@ -418,7 +418,7 @@ const ManageSlideOver = ({
                             watchData?.data4k ? 'rounded-t-none' : ''
                           }`}
                         >
-                          <ViewListIcon />
+                          <Bars4Icon />
                           <span>
                             {intl.formatMessage(messages.opentautulli)}
                           </span>
@@ -492,7 +492,7 @@ const ManageSlideOver = ({
                   confirmText={intl.formatMessage(globalMessages.areyousure)}
                   className="w-full"
                 >
-                  <DocumentRemoveIcon />
+                  <DocumentMinusIcon />
                   <span>
                     {intl.formatMessage(messages.manageModalClearMedia)}
                   </span>

src/components/MediaSlider/ShowMoreCard/index.tsx

@@ -1,5 +1,5 @@
 import TitleCard from '@app/components/TitleCard';
-import { ArrowCircleRightIcon } from '@heroicons/react/solid';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -94,7 +94,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
                 )}
               </div>
               <div className="absolute inset-0 z-20 flex flex-col items-center justify-center text-white">
-                <ArrowCircleRightIcon className="w-14" />
+                <ArrowRightCircleIcon className="w-14" />
                 <div className="mt-2 font-extrabold">
                   {intl.formatMessage(messages.seemore)}
                 </div>

src/components/MediaSlider/index.tsx

@@ -3,7 +3,7 @@ import PersonCard from '@app/components/PersonCard';
 import Slider from '@app/components/Slider';
 import TitleCard from '@app/components/TitleCard';
 import useSettings from '@app/hooks/useSettings';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import { MediaStatus } from '@server/constants/media';
 import type {
   MovieResult,
@@ -151,7 +151,7 @@ const MediaSlider = ({
           <Link href={linkUrl}>
             <a className="slider-title">
               <span>{title}</span>
-              <ArrowCircleRightIcon />
+              <ArrowRightCircleIcon />
             </a>
           </Link>
         ) : (

src/components/MovieDetails/index.tsx

@@ -26,18 +26,18 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
 import {
-  ArrowCircleRightIcon,
+  ArrowRightCircleIcon,
   CloudIcon,
   CogIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   FilmIcon,
   PlayIcon,
   TicketIcon,
-} from '@heroicons/react/outline';
+} from '@heroicons/react/24/outline';
 import {
   ChevronDoubleDownIcon,
   ChevronDoubleUpIcon,
-} from '@heroicons/react/solid';
+} from '@heroicons/react/24/solid';
 import type { RTRating } from '@server/api/rottentomatoes';
 import { IssueStatus } from '@server/constants/issue';
 import { MediaStatus } from '@server/constants/media';
@@ -389,7 +389,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                   onClick={() => setShowIssueModal(true)}
                   className="ml-2 first:ml-0"
                 >
-                  <ExclamationIcon />
+                  <ExclamationTriangleIcon />
                 </Button>
               </Tooltip>
             )}
@@ -447,7 +447,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                 <Link href={`/movie/${data.id}/crew`}>
                   <a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
                     <span>{intl.formatMessage(messages.viewfullcrew)}</span>
-                    <ArrowCircleRightIcon className="ml-1.5 inline-block h-5 w-5" />
+                    <ArrowRightCircleIcon className="ml-1.5 inline-block h-5 w-5" />
                   </a>
                 </Link>
               </div>
@@ -785,7 +785,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
             <Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
               <a className="slider-title">
                 <span>{intl.formatMessage(messages.cast)}</span>
-                <ArrowCircleRightIcon />
+                <ArrowRightCircleIcon />
               </a>
             </Link>
           </div>

src/components/PersonCard/index.tsx

@@ -1,5 +1,5 @@
 import CachedImage from '@app/components/Common/CachedImage';
-import { UserCircleIcon } from '@heroicons/react/solid';
+import { UserCircleIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import { useState } from 'react';
 

src/components/PlexLoginButton/index.tsx

@@ -1,6 +1,6 @@
 import globalMessages from '@app/i18n/globalMessages';
 import PlexOAuth from '@app/utils/plex';
-import { LoginIcon } from '@heroicons/react/outline';
+import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -49,7 +49,7 @@ const PlexLoginButton = ({
         disabled={loading || isProcessing}
         className="plex-button"
       >
-        <LoginIcon />
+        <ArrowLeftOnRectangleIcon />
         <span>
           {loading
             ? intl.formatMessage(globalMessages.loading)

src/components/PullToRefresh/index.tsx

@@ -1,4 +1,4 @@
-import { RefreshIcon } from '@heroicons/react/outline';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import { useRouter } from 'next/router';
 import PR from 'pulltorefreshjs';
 import { useEffect } from 'react';
@@ -15,7 +15,7 @@ const PullToRefresh = () => {
       },
       iconArrow: ReactDOMServer.renderToString(
         <div className="p-2">
-          <RefreshIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
+          <ArrowPathIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
         </div>
       ),
       iconRefreshing: ReactDOMServer.renderToString(
@@ -23,7 +23,7 @@ const PullToRefresh = () => {
           className="animate-spin p-2"
           style={{ animationDirection: 'reverse' }}
         >
-          <RefreshIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
+          <ArrowPathIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
         </div>
       ),
       instructionsPullToRefresh: ReactDOMServer.renderToString(<div />),

src/components/RegionSelector/index.tsx

@@ -1,6 +1,6 @@
 import useSettings from '@app/hooks/useSettings';
 import { Listbox, Transition } from '@headlessui/react';
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/solid';
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
 import type { Region } from '@server/lib/settings';
 import { hasFlag } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';

src/components/RequestBlock/index.tsx

@@ -12,8 +12,8 @@ import {
   PencilIcon,
   TrashIcon,
   UserIcon,
-  XIcon,
-} from '@heroicons/react/solid';
+  XMarkIcon,
+} from '@heroicons/react/24/solid';
 import { MediaRequestStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 import axios from 'axios';
@@ -149,7 +149,7 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
                     onClick={() => updateRequest('decline')}
                     disabled={isUpdating}
                   >
-                    <XIcon />
+                    <XMarkIcon />
                   </Button>
                 </Tooltip>
                 <Tooltip content={intl.formatMessage(messages.edit)}>

src/components/RequestButton/index.tsx

@@ -3,12 +3,12 @@ import RequestModal from '@app/components/RequestModal';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { DownloadIcon } from '@heroicons/react/outline';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import {
   CheckIcon,
   InformationCircleIcon,
-  XIcon,
-} from '@heroicons/react/solid';
+  XMarkIcon,
+} from '@heroicons/react/24/solid';
 import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
 import type Media from '@server/entity/Media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
@@ -158,7 +158,7 @@ const RequestButton = ({
           action: () => {
             modifyRequest(activeRequest, 'decline');
           },
-          svg: <XIcon />,
+          svg: <XMarkIcon />,
         }
       );
     } else if (
@@ -186,7 +186,7 @@ const RequestButton = ({
           action: () => {
             modifyRequests(activeRequests, 'decline');
           },
-          svg: <XIcon />,
+          svg: <XMarkIcon />,
         }
       );
     }
@@ -228,7 +228,7 @@ const RequestButton = ({
           action: () => {
             modifyRequest(active4kRequest, 'decline');
           },
-          svg: <XIcon />,
+          svg: <XMarkIcon />,
         }
       );
     } else if (
@@ -256,7 +256,7 @@ const RequestButton = ({
           action: () => {
             modifyRequests(active4kRequests, 'decline');
           },
-          svg: <XIcon />,
+          svg: <XMarkIcon />,
         }
       );
     }
@@ -282,7 +282,7 @@ const RequestButton = ({
         setEditRequest(false);
         setShowRequestModal(true);
       },
-      svg: <DownloadIcon />,
+      svg: <ArrowDownTrayIcon />,
     });
   } else if (
     mediaType === 'tv' &&
@@ -301,7 +301,7 @@ const RequestButton = ({
         setEditRequest(false);
         setShowRequestModal(true);
       },
-      svg: <DownloadIcon />,
+      svg: <ArrowDownTrayIcon />,
     });
   }
 
@@ -327,7 +327,7 @@ const RequestButton = ({
         setEditRequest(false);
         setShowRequest4kModal(true);
       },
-      svg: <DownloadIcon />,
+      svg: <ArrowDownTrayIcon />,
     });
   } else if (
     mediaType === 'tv' &&
@@ -347,7 +347,7 @@ const RequestButton = ({
         setEditRequest(false);
         setShowRequest4kModal(true);
       },
-      svg: <DownloadIcon />,
+      svg: <ArrowDownTrayIcon />,
     });
   }
 

src/components/RequestCard/index.tsx

@@ -9,12 +9,12 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { withProperties } from '@app/utils/typeHelpers';
 import {
+  ArrowPathIcon,
   CheckIcon,
   PencilIcon,
-  RefreshIcon,
   TrashIcon,
-  XIcon,
-} from '@heroicons/react/solid';
+  XMarkIcon,
+} from '@heroicons/react/24/solid';
 import { MediaRequestStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { MovieDetails } from '@server/models/Movie';
@@ -441,7 +441,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                   disabled={isRetrying}
                   onClick={() => retryRequest()}
                 >
-                  <RefreshIcon
+                  <ArrowPathIcon
                     className={isRetrying ? 'animate-spin' : ''}
                     style={{ marginRight: '0', animationDirection: 'reverse' }}
                   />
@@ -483,7 +483,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                       className="hidden sm:block"
                       onClick={() => modifyRequest('decline')}
                     >
-                      <XIcon />
+                      <XMarkIcon />
                       <span>{intl.formatMessage(globalMessages.decline)}</span>
                     </Button>
                     <Tooltip
@@ -495,7 +495,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                         className="sm:hidden"
                         onClick={() => modifyRequest('decline')}
                       >
-                        <XIcon />
+                        <XMarkIcon />
                       </Button>
                     </Tooltip>
                   </div>
@@ -540,7 +540,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                     className="hidden sm:block"
                     onClick={() => deleteRequest()}
                   >
-                    <XIcon />
+                    <XMarkIcon />
                     <span>{intl.formatMessage(globalMessages.cancel)}</span>
                   </Button>
                   <Tooltip content={intl.formatMessage(messages.cancelrequest)}>
@@ -550,7 +550,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                       className="sm:hidden"
                       onClick={() => deleteRequest()}
                     >
-                      <XIcon />
+                      <XMarkIcon />
                     </Button>
                   </Tooltip>
                 </div>

src/components/RequestList/RequestItem/index.tsx

@@ -8,12 +8,12 @@ import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import {
+  ArrowPathIcon,
   CheckIcon,
   PencilIcon,
-  RefreshIcon,
   TrashIcon,
-  XIcon,
-} from '@heroicons/react/solid';
+  XMarkIcon,
+} from '@heroicons/react/24/solid';
 import { MediaRequestStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { MovieDetails } from '@server/models/Movie';
@@ -601,7 +601,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                 disabled={isRetrying}
                 onClick={() => retryRequest()}
               >
-                <RefreshIcon
+                <ArrowPathIcon
                   className={isRetrying ? 'animate-spin' : ''}
                   style={{ animationDirection: 'reverse' }}
                 />
@@ -642,7 +642,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                     buttonType="danger"
                     onClick={() => modifyRequest('decline')}
                   >
-                    <XIcon />
+                    <XMarkIcon />
                     <span>{intl.formatMessage(globalMessages.decline)}</span>
                   </Button>
                 </span>
@@ -672,7 +672,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                 confirmText={intl.formatMessage(globalMessages.areyousure)}
                 className="w-full"
               >
-                <XIcon />
+                <XMarkIcon />
                 <span>{intl.formatMessage(messages.cancelRequest)}</span>
               </ConfirmButton>
             )}

src/components/RequestList/index.tsx

@@ -7,11 +7,11 @@ import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import {
+  BarsArrowDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  FilterIcon,
-  SortDescendingIcon,
-} from '@heroicons/react/solid';
+  FunnelIcon,
+} from '@heroicons/react/24/solid';
 import type { RequestResultsResponse } from '@server/interfaces/api/requestInterfaces';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -139,7 +139,7 @@ const RequestList = () => {
         <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
           <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
-              <FilterIcon className="h-6 w-6" />
+              <FunnelIcon className="h-6 w-6" />
             </span>
             <select
               id="filter"
@@ -181,7 +181,7 @@ const RequestList = () => {
           </div>
           <div className="mb-2 flex flex-grow sm:mb-0 lg:flex-grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
-              <SortDescendingIcon className="h-6 w-6" />
+              <BarsArrowDownIcon className="h-6 w-6" />
             </span>
             <select
               id="sort"

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -5,7 +5,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { formatBytes } from '@app/utils/numberHelpers';
 import { Listbox, Transition } from '@headlessui/react';
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/solid';
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid';
 import type {
   ServiceCommonServer,
   ServiceCommonServerWithDetails,

src/components/RequestModal/QuotaDisplay/index.tsx

@@ -1,5 +1,5 @@
 import ProgressCircle from '@app/components/Common/ProgressCircle';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
 import type { QuotaStatus } from '@server/interfaces/api/userInterfaces';
 import Link from 'next/link';
 import { useState } from 'react';

src/components/ResetPassword/RequestResetLink.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
-import { ArrowLeftIcon, MailIcon } from '@heroicons/react/solid';
+import { ArrowLeftIcon, EnvelopeIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -128,7 +128,7 @@ const ResetPassword = () => {
                               type="submit"
                               disabled={isSubmitting || !isValid}
                             >
-                              <MailIcon />
+                              <EnvelopeIcon />
                               <span>
                                 {intl.formatMessage(messages.emailresetlink)}
                               </span>

src/components/ResetPassword/index.tsx

@@ -3,7 +3,7 @@ import ImageFader from '@app/components/Common/ImageFader';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
 import globalMessages from '@app/i18n/globalMessages';
-import { SupportIcon } from '@heroicons/react/outline';
+import { LifebuoyIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -168,7 +168,7 @@ const ResetPassword = () => {
                               type="submit"
                               disabled={isSubmitting || !isValid}
                             >
-                              <SupportIcon />
+                              <LifebuoyIcon />
                               <span>
                                 {isSubmitting
                                   ? intl.formatMessage(globalMessages.saving)

src/components/Settings/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { ClipboardCopyIcon } from '@heroicons/react/solid';
+import { ClipboardDocumentIcon } from '@heroicons/react/24/solid';
 import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -32,7 +32,7 @@ const CopyButton = ({ textToCopy }: { textToCopy: string }) => {
       }}
       className="input-action"
     >
-      <ClipboardCopyIcon />
+      <ClipboardDocumentIcon />
     </button>
   );
 };

src/components/Settings/LibraryItem.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, XIcon } from '@heroicons/react/solid';
+import { CheckIcon, XMarkIcon } from '@heroicons/react/24/solid';
 
 interface LibraryItemProps {
   isEnabled?: boolean;
@@ -41,7 +41,7 @@ const LibraryItem = ({ isEnabled, name, onToggle }: LibraryItemProps) => {
                     : 'opacity-100 duration-200 ease-in'
                 } absolute inset-0 flex h-full w-full items-center justify-center transition-opacity`}
               >
-                <XIcon className="h-3 w-3 text-gray-400" />
+                <XMarkIcon className="h-3 w-3 text-gray-400" />
               </span>
               <span
                 className={`${

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -3,7 +3,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -295,7 +295,7 @@ const NotificationsDiscord = () => {
                       (values.enabled && !values.types)
                     }
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -3,7 +3,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import SettingsBadge from '@app/components/Settings/SettingsBadge';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -460,7 +460,7 @@ const NotificationsEmail = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsGotify/index.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/solid';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -242,7 +242,7 @@ const NotificationsGotify = () => {
                       (values.enabled && !values.types)
                     }
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsLunaSea/index.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -247,7 +247,7 @@ const NotificationsLunaSea = () => {
                       (values.enabled && !values.types)
                     }
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsPushbullet/index.tsx

@@ -3,7 +3,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -239,7 +239,7 @@ const NotificationsPushbullet = () => {
                       (values.enabled && !values.types)
                     }
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -272,7 +272,7 @@ const NotificationsPushover = () => {
                       (values.enabled && !values.types)
                     }
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -225,7 +225,7 @@ const NotificationsSlack = () => {
                       (values.enabled && !values.types)
                     }
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -3,7 +3,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useState } from 'react';
@@ -321,7 +321,7 @@ const NotificationsTelegram = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid || isTesting}
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsWebPush/index.tsx

@@ -2,7 +2,7 @@ import Alert from '@app/components/Common/Alert';
 import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useEffect, useState } from 'react';
@@ -149,7 +149,7 @@ const NotificationsWebPush = () => {
                       type="submit"
                       disabled={isSubmitting || isTesting}
                     >
-                      <SaveIcon />
+                      <ArrowDownOnSquareIcon />
                       <span>
                         {isSubmitting
                           ? intl.formatMessage(globalMessages.saving)

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -2,8 +2,11 @@ import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
-import { QuestionMarkCircleIcon, RefreshIcon } from '@heroicons/react/solid';
+import { ArrowDownOnSquareIcon, BeakerIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowPathIcon,
+  QuestionMarkCircleIcon,
+} from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import dynamic from 'next/dynamic';
@@ -291,7 +294,7 @@ const NotificationsWebhook = () => {
                     }}
                     className="mr-2"
                   >
-                    <RefreshIcon />
+                    <ArrowPathIcon />
                     <span>{intl.formatMessage(messages.resetPayload)}</span>
                   </Button>
                   <Link
@@ -359,7 +362,7 @@ const NotificationsWebhook = () => {
                       (values.enabled && !values.types)
                     }
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/Settings/SettingsAbout/Releases/index.tsx

@@ -4,7 +4,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
 import globalMessages from '@app/i18n/globalMessages';
 import { Transition } from '@headlessui/react';
-import { DocumentTextIcon } from '@heroicons/react/outline';
+import { DocumentTextIcon } from '@heroicons/react/24/outline';
 import dynamic from 'next/dynamic';
 import { Fragment, useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';

src/components/Settings/SettingsAbout/index.tsx

@@ -6,7 +6,7 @@ import PageTitle from '@app/components/Common/PageTitle';
 import Releases from '@app/components/Settings/SettingsAbout/Releases';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
-import { InformationCircleIcon } from '@heroicons/react/solid';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import type {
   SettingsAboutResponse,
   StatusResponse,

src/components/Settings/SettingsJobsCache/index.tsx

@@ -9,8 +9,8 @@ import useLocale from '@app/hooks/useLocale';
 import globalMessages from '@app/i18n/globalMessages';
 import { formatBytes } from '@app/utils/numberHelpers';
 import { Transition } from '@headlessui/react';
-import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/outline';
-import { PencilIcon } from '@heroicons/react/solid';
+import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { PencilIcon } from '@heroicons/react/24/solid';
 import type {
   CacheItem,
   CacheResponse,

src/components/Settings/SettingsLogs/index.tsx

@@ -13,13 +13,13 @@ import { Transition } from '@headlessui/react';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
-  ClipboardCopyIcon,
-  DocumentSearchIcon,
-  FilterIcon,
+  ClipboardDocumentIcon,
+  DocumentMagnifyingGlassIcon,
+  FunnelIcon,
+  MagnifyingGlassIcon,
   PauseIcon,
   PlayIcon,
-  SearchIcon,
-} from '@heroicons/react/solid';
+} from '@heroicons/react/24/solid';
 import type {
   LogMessage,
   LogsResultsResponse,
@@ -252,7 +252,7 @@ const SettingsLogs = () => {
         <div className="mt-2 flex flex-grow flex-col sm:flex-grow-0 sm:flex-row sm:justify-end">
           <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 md:flex-grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
-              <SearchIcon className="h-6 w-6" />
+              <MagnifyingGlassIcon className="h-6 w-6" />
             </span>
             <input
               type="text"
@@ -276,7 +276,7 @@ const SettingsLogs = () => {
             </Button>
             <div className="flex flex-grow">
               <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
-                <FilterIcon className="h-6 w-6" />
+                <FunnelIcon className="h-6 w-6" />
               </span>
               <select
                 id="filter"
@@ -367,7 +367,7 @@ const SettingsLogs = () => {
                             }
                             className="m-1"
                           >
-                            <DocumentSearchIcon className="icon-md" />
+                            <DocumentMagnifyingGlassIcon className="icon-md" />
                           </Button>
                         </Tooltip>
                       )}
@@ -380,7 +380,7 @@ const SettingsLogs = () => {
                           onClick={() => copyLogString(row)}
                           className="m-1"
                         >
-                          <ClipboardCopyIcon className="icon-md" />
+                          <ClipboardDocumentIcon className="icon-md" />
                         </Button>
                       </Tooltip>
                     </Table.TD>

src/components/Settings/SettingsMain/DiscoverCustomization/DiscoverOption/index.tsx

@@ -2,7 +2,7 @@ import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import SlideCheckbox from '@app/components/Common/SlideCheckbox';
 import Tooltip from '@app/components/Common/Tooltip';
-import { MenuIcon, XIcon } from '@heroicons/react/solid';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-aria';
@@ -135,7 +135,7 @@ const DiscoverOption = ({
           isDragging ? 'opacity-0' : 'opacity-100'
         }`}
       >
-        <MenuIcon className="h-6 w-6" />
+        <Bars3Icon className="h-6 w-6" />
 
         <span className="flex-1">{title}</span>
         {subtitle && <Badge>{subtitle}</Badge>}
@@ -147,7 +147,7 @@ const DiscoverOption = ({
               buttonSize="sm"
               onClick={() => deleteSlider()}
             >
-              <XIcon />
+              <XMarkIcon />
               <span>{intl.formatMessage(messages.remove)}</span>
             </Button>
           </div>

src/components/Settings/SettingsMain/DiscoverCustomization/index.tsx

@@ -5,7 +5,10 @@ import { sliderTitles } from '@app/components/Discover/constants';
 import CreateSlider from '@app/components/Settings/SettingsMain/DiscoverCustomization/CreateSlider';
 import DiscoverOption from '@app/components/Settings/SettingsMain/DiscoverCustomization/DiscoverOption';
 import globalMessages from '@app/i18n/globalMessages';
-import { RefreshIcon, SaveIcon } from '@heroicons/react/solid';
+import {
+  ArrowDownOnSquareIcon,
+  ArrowPathIcon,
+} from '@heroicons/react/24/solid';
 import { DiscoverSliderType } from '@server/constants/discover';
 import type DiscoverSlider from '@server/entity/DiscoverSlider';
 import axios from 'axios';
@@ -194,7 +197,7 @@ const DiscoverCustomization = () => {
           <span className="ml-3 inline-flex rounded-md shadow-sm">
             <Tooltip content={intl.formatMessage(messages.resetwarning)}>
               <Button buttonType="default" onClick={() => resetSliders()}>
-                <RefreshIcon />
+                <ArrowPathIcon />
                 <span>{intl.formatMessage(messages.resettodefault)}</span>
               </Button>
             </Tooltip>
@@ -207,7 +210,7 @@ const DiscoverCustomization = () => {
               onClick={() => updateSliders()}
               data-testid="discover-customize-submit"
             >
-              <SaveIcon />
+              <ArrowDownOnSquareIcon />
               <span>{intl.formatMessage(globalMessages.save)}</span>
             </Button>
           </span>

src/components/Settings/SettingsMain/index.tsx

@@ -13,8 +13,8 @@ import { availableLanguages } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
-import { RefreshIcon } from '@heroicons/react/solid';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
+import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import type { UserSettingsGeneralResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import type { MainSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -215,7 +215,7 @@ const SettingsMain = () => {
                           }}
                           className="input-action"
                         >
-                          <RefreshIcon />
+                          <ArrowPathIcon />
                         </button>
                       </div>
                     </div>
@@ -439,7 +439,7 @@ const SettingsMain = () => {
                         type="submit"
                         disabled={isSubmitting || !isValid}
                       >
-                        <SaveIcon />
+                        <ArrowDownOnSquareIcon />
                         <span>
                           {isSubmitting
                             ? intl.formatMessage(globalMessages.saving)

src/components/Settings/SettingsNotifications.tsx

@@ -9,7 +9,7 @@ import PageTitle from '@app/components/Common/PageTitle';
 import type { SettingsRoute } from '@app/components/Common/SettingsTabs';
 import SettingsTabs from '@app/components/Common/SettingsTabs';
 import globalMessages from '@app/i18n/globalMessages';
-import { CloudIcon, LightningBoltIcon, MailIcon } from '@heroicons/react/solid';
+import { BoltIcon, CloudIcon, EnvelopeIcon } from '@heroicons/react/24/solid';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -34,7 +34,7 @@ const SettingsNotifications = ({ children }: SettingsNotificationsProps) => {
       text: intl.formatMessage(messages.email),
       content: (
         <span className="flex items-center">
-          <MailIcon className="mr-2 h-4" />
+          <EnvelopeIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.email)}
         </span>
       ),
@@ -133,7 +133,7 @@ const SettingsNotifications = ({ children }: SettingsNotificationsProps) => {
       text: intl.formatMessage(messages.webhook),
       content: (
         <span className="flex items-center">
-          <LightningBoltIcon className="mr-2 h-4" />
+          <BoltIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.webhook)}
         </span>
       ),

src/components/Settings/SettingsPlex.tsx

@@ -7,8 +7,12 @@ import SensitiveInput from '@app/components/Common/SensitiveInput';
 import LibraryItem from '@app/components/Settings/LibraryItem';
 import SettingsBadge from '@app/components/Settings/SettingsBadge';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
-import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowPathIcon,
+  MagnifyingGlassIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/solid';
 import type { PlexDevice } from '@server/interfaces/api/plexInterfaces';
 import type { PlexSettings, TautulliSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -487,7 +491,7 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                       }}
                       className="input-action"
                     >
-                      <RefreshIcon
+                      <ArrowPathIcon
                         className={isRefreshingPresets ? 'animate-spin' : ''}
                         style={{ animationDirection: 'reverse' }}
                       />
@@ -598,7 +602,7 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                       type="submit"
                       disabled={isSubmitting || !isValid}
                     >
-                      <SaveIcon />
+                      <ArrowDownOnSquareIcon />
                       <span>
                         {isSubmitting
                           ? intl.formatMessage(globalMessages.saving)
@@ -625,7 +629,7 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
           onClick={() => syncLibraries()}
           disabled={isSyncing || !data?.ip || !data?.port}
         >
-          <RefreshIcon
+          <ArrowPathIcon
             className={isSyncing ? 'animate-spin' : ''}
             style={{ animationDirection: 'reverse' }}
           />
@@ -708,12 +712,12 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                   onClick={() => startScan()}
                   disabled={isSyncing || !activeLibraries.length}
                 >
-                  <SearchIcon />
+                  <MagnifyingGlassIcon />
                   <span>{intl.formatMessage(messages.startscan)}</span>
                 </Button>
               ) : (
                 <Button buttonType="danger" onClick={() => cancelScan()}>
-                  <XIcon />
+                  <XMarkIcon />
                   <span>{intl.formatMessage(messages.cancelscan)}</span>
                 </Button>
               )}
@@ -916,7 +920,7 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                           type="submit"
                           disabled={isSubmitting || !isValid}
                         >
-                          <SaveIcon />
+                          <ArrowDownOnSquareIcon />
                           <span>
                             {isSubmitting
                               ? intl.formatMessage(globalMessages.saving)

src/components/Settings/SettingsServices.tsx

@@ -10,7 +10,7 @@ import RadarrModal from '@app/components/Settings/RadarrModal';
 import SonarrModal from '@app/components/Settings/SonarrModal';
 import globalMessages from '@app/i18n/globalMessages';
 import { Transition } from '@headlessui/react';
-import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid';
+import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/solid';
 import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Fragment, useState } from 'react';

src/components/Settings/SettingsUsers/index.tsx

@@ -4,7 +4,7 @@ import PageTitle from '@app/components/Common/PageTitle';
 import PermissionEdit from '@app/components/PermissionEdit';
 import QuotaSelector from '@app/components/QuotaSelector';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import type { MainSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -202,7 +202,7 @@ const SettingsUsers = () => {
                         type="submit"
                         disabled={isSubmitting}
                       >
-                        <SaveIcon />
+                        <ArrowDownOnSquareIcon />
                         <span>
                           {isSubmitting
                             ? intl.formatMessage(globalMessages.saving)

src/components/Setup/SetupSteps.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon } from '@heroicons/react/solid';
+import { CheckIcon } from '@heroicons/react/24/solid';
 
 interface CurrentStep {
   stepNumber: number;

src/components/Slider/index.tsx

@@ -1,6 +1,6 @@
 import TitleCard from '@app/components/TitleCard';
 import globalMessages from '@app/i18n/globalMessages';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/outline';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { debounce } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';

src/components/TitleCard/ErrorCard.tsx

@@ -1,6 +1,6 @@
 import Button from '@app/components/Common/Button';
 import globalMessages from '@app/i18n/globalMessages';
-import { CheckIcon, TrashIcon } from '@heroicons/react/solid';
+import { CheckIcon, TrashIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { defineMessages, useIntl } from 'react-intl';
 import { mutate } from 'swr';

src/components/TitleCard/index.tsx

@@ -9,8 +9,9 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { withProperties } from '@app/utils/typeHelpers';
 import { Transition } from '@headlessui/react';
-import { DownloadIcon } from '@heroicons/react/outline';
-import { BellIcon, CheckIcon, ClockIcon } from '@heroicons/react/solid';
+import { CheckCircleIcon } from '@heroicons/react/20/solid';
+import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import { BellIcon, ClockIcon } from '@heroicons/react/24/solid';
 import { MediaStatus } from '@server/constants/media';
 import type { MediaType } from '@server/models/Search';
 import Link from 'next/link';
@@ -145,7 +146,7 @@ const TitleCard = ({
               {(currentStatus === MediaStatus.AVAILABLE ||
                 currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
                 <div className="flex h-4 w-4 items-center justify-center rounded-full border border-green-500 bg-green-500 bg-opacity-80 text-green-100 shadow sm:h-5 sm:w-5">
-                  <CheckIcon className="h-3 w-3 sm:h-4 sm:w-4" />
+                  <CheckCircleIcon className="h-3 w-3 sm:h-4 sm:w-4" />
                 </div>
               )}
               {currentStatus === MediaStatus.PENDING && (
@@ -258,7 +259,7 @@ const TitleCard = ({
                       }}
                       className="h-7 w-full"
                     >
-                      <DownloadIcon />
+                      <ArrowDownTrayIcon />
                       <span>{intl.formatMessage(globalMessages.request)}</span>
                     </Button>
                   )}

src/components/Toast/index.tsx

@@ -2,10 +2,10 @@ import { Transition } from '@headlessui/react';
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   InformationCircleIcon,
-} from '@heroicons/react/outline';
-import { XIcon } from '@heroicons/react/solid';
+} from '@heroicons/react/24/outline';
+import { XMarkIcon } from '@heroicons/react/24/solid';
 import { Fragment } from 'react';
 import type { ToastProps } from 'react-toast-notifications';
 
@@ -42,7 +42,7 @@ const Toast = ({
                     <InformationCircleIcon className="h-6 w-6 text-indigo-500" />
                   )}
                   {appearance === 'warning' && (
-                    <ExclamationIcon className="h-6 w-6 text-orange-400" />
+                    <ExclamationTriangleIcon className="h-6 w-6 text-orange-400" />
                   )}
                 </div>
                 <div className="ml-3 w-0 flex-1 text-white">{children}</div>
@@ -51,7 +51,7 @@ const Toast = ({
                     onClick={() => onDismiss()}
                     className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:text-gray-500 focus:outline-none"
                   >
-                    <XIcon className="h-5 w-5" />
+                    <XMarkIcon className="h-5 w-5" />
                   </button>
                 </div>
               </div>

src/components/TvDetails/index.tsx

@@ -31,13 +31,13 @@ import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
 import { Disclosure, Transition } from '@headlessui/react';
 import {
-  ArrowCircleRightIcon,
+  ArrowRightCircleIcon,
   CogIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
   FilmIcon,
   PlayIcon,
-} from '@heroicons/react/outline';
-import { ChevronUpIcon } from '@heroicons/react/solid';
+} from '@heroicons/react/24/outline';
+import { ChevronUpIcon } from '@heroicons/react/24/solid';
 import type { RTRating } from '@server/api/rottentomatoes';
 import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
 import { IssueStatus } from '@server/constants/issue';
@@ -404,7 +404,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                   onClick={() => setShowIssueModal(true)}
                   className="ml-2 first:ml-0"
                 >
-                  <ExclamationIcon />
+                  <ExclamationTriangleIcon />
                 </Button>
               </Tooltip>
             )}
@@ -476,7 +476,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                 <Link href={`/tv/${data.id}/crew`}>
                   <a className="flex items-center text-gray-400 transition duration-300 hover:text-gray-100">
                     <span>{intl.formatMessage(messages.viewfullcrew)}</span>
-                    <ArrowCircleRightIcon className="ml-1.5 inline-block h-5 w-5" />
+                    <ArrowRightCircleIcon className="ml-1.5 inline-block h-5 w-5" />
                   </a>
                 </Link>
               </div>
@@ -951,7 +951,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
             <Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
               <a className="slider-title">
                 <span>{intl.formatMessage(messages.cast)}</span>
-                <ArrowCircleRightIcon />
+                <ArrowRightCircleIcon />
               </a>
             </Link>
           </div>

src/components/UserList/index.tsx

@@ -16,13 +16,13 @@ import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { Transition } from '@headlessui/react';
 import {
+  BarsArrowDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-  InboxInIcon,
+  InboxArrowDownIcon,
   PencilIcon,
-  SortDescendingIcon,
-  UserAddIcon,
-} from '@heroicons/react/solid';
+  UserPlusIcon,
+} from '@heroicons/react/24/solid';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import axios from 'axios';
@@ -487,7 +487,7 @@ const UserList = () => {
               buttonType="primary"
               onClick={() => setCreateModal({ isOpen: true })}
             >
-              <UserAddIcon />
+              <UserPlusIcon />
               <span>{intl.formatMessage(messages.createlocaluser)}</span>
             </Button>
             <Button
@@ -495,13 +495,13 @@ const UserList = () => {
               buttonType="primary"
               onClick={() => setShowImportModal(true)}
             >
-              <InboxInIcon />
+              <InboxArrowDownIcon />
               <span>{intl.formatMessage(messages.importfromplex)}</span>
             </Button>
           </div>
           <div className="mb-2 flex flex-grow lg:mb-0 lg:flex-grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
-              <SortDescendingIcon className="h-6 w-6" />
+              <BarsArrowDownIcon className="h-6 w-6" />
             </span>
             <select
               id="sort"

src/components/UserProfile/ProfileHeader/index.tsx

@@ -1,7 +1,7 @@
 import Button from '@app/components/Common/Button';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
-import { CogIcon, UserIcon } from '@heroicons/react/solid';
+import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -12,7 +12,7 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import type { UserSettingsGeneralResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -520,7 +520,7 @@ const UserGeneralSettings = () => {
                       type="submit"
                       disabled={isSubmitting || !isValid}
                     >
-                      <SaveIcon />
+                      <ArrowDownOnSquareIcon />
                       <span>
                         {isSubmitting
                           ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -3,7 +3,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import type { UserSettingsNotificationsResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -156,7 +156,7 @@ const UserNotificationsDiscord = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx

@@ -8,7 +8,7 @@ import { OpenPgpLink } from '@app/components/Settings/Notifications/Notification
 import SettingsBadge from '@app/components/Settings/SettingsBadge';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import type { UserSettingsNotificationsResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
@@ -151,7 +151,7 @@ const UserEmailSettings = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx

@@ -3,7 +3,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import NotificationTypeSelector from '@app/components/NotificationTypeSelector';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import type { UserSettingsNotificationsResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
@@ -185,7 +185,7 @@ const UserTelegramSettings = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsWebPush.tsx

@@ -5,7 +5,7 @@ import NotificationTypeSelector, {
 } from '@app/components/NotificationTypeSelector';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import type { UserSettingsNotificationsResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
@@ -103,7 +103,7 @@ const UserWebPushSettings = () => {
                     type="submit"
                     disabled={isSubmitting || !isValid}
                   >
-                    <SaveIcon />
+                    <ArrowDownOnSquareIcon />
                     <span>
                       {isSubmitting
                         ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -9,7 +9,7 @@ import SettingsTabs from '@app/components/Common/SettingsTabs';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
-import { CloudIcon, MailIcon } from '@heroicons/react/solid';
+import { CloudIcon, EnvelopeIcon } from '@heroicons/react/24/solid';
 import type { UserSettingsNotificationsResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';
@@ -41,7 +41,7 @@ const UserNotificationSettings = ({
       text: intl.formatMessage(messages.email),
       content: (
         <span className="flex items-center">
-          <MailIcon className="mr-2 h-4" />
+          <EnvelopeIcon className="mr-2 h-4" />
           {intl.formatMessage(messages.email)}
         </span>
       ),

src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx

@@ -6,7 +6,7 @@ import SensitiveInput from '@app/components/Common/SensitiveInput';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -233,7 +233,7 @@ const UserPasswordChange = () => {
                       type="submit"
                       disabled={isSubmitting || !isValid}
                     >
-                      <SaveIcon />
+                      <ArrowDownOnSquareIcon />
                       <span>
                         {isSubmitting
                           ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/UserSettings/UserPermissions/index.tsx

@@ -6,7 +6,7 @@ import PermissionEdit from '@app/components/PermissionEdit';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
-import { SaveIcon } from '@heroicons/react/outline';
+import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -120,7 +120,7 @@ const UserPermissions = () => {
                       type="submit"
                       disabled={isSubmitting}
                     >
-                      <SaveIcon />
+                      <ArrowDownOnSquareIcon />
                       <span>
                         {isSubmitting
                           ? intl.formatMessage(globalMessages.saving)

src/components/UserProfile/index.tsx

@@ -8,7 +8,7 @@ import TmdbTitleCard from '@app/components/TitleCard/TmdbTitleCard';
 import ProfileHeader from '@app/components/UserProfile/ProfileHeader';
 import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import Error from '@app/pages/_error';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { WatchlistResponse } from '@server/interfaces/api/discoverInterfaces';
 import type {
   QuotaResponse,
@@ -291,7 +291,7 @@ const UserProfile = () => {
               >
                 <a className="slider-title">
                   <span>{intl.formatMessage(messages.recentrequests)}</span>
-                  <ArrowCircleRightIcon />
+                  <ArrowRightCircleIcon />
                 </a>
               </Link>
             </div>
@@ -332,7 +332,7 @@ const UserProfile = () => {
               >
                 <a className="slider-title">
                   <span>{intl.formatMessage(messages.plexwatchlist)}</span>
-                  <ArrowCircleRightIcon />
+                  <ArrowRightCircleIcon />
                 </a>
               </Link>
             </div>

src/pages/404.tsx

@@ -1,5 +1,5 @@
 import PageTitle from '@app/components/Common/PageTitle';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -24,7 +24,7 @@ const Custom404 = () => {
       <Link href="/">
         <a className="mt-2 flex">
           {intl.formatMessage(messages.returnHome)}
-          <ArrowCircleRightIcon className="ml-2 h-6 w-6" />
+          <ArrowRightCircleIcon className="ml-2 h-6 w-6" />
         </a>
       </Link>
     </div>

src/pages/_error.tsx

@@ -1,6 +1,6 @@
 import PageTitle from '@app/components/Common/PageTitle';
 import type { Undefinable } from '@app/utils/typeHelpers';
-import { ArrowCircleRightIcon } from '@heroicons/react/outline';
+import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import type { NextPage } from 'next';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
@@ -47,7 +47,7 @@ const Error: NextPage<ErrorProps> = ({ statusCode }) => {
       <Link href="/">
         <a className="mt-2 flex">
           {intl.formatMessage(messages.returnHome)}
-          <ArrowCircleRightIcon className="ml-2 h-6 w-6" />
+          <ArrowRightCircleIcon className="ml-2 h-6 w-6" />
         </a>
       </Link>
     </div>

yarn.lock

@@ -1598,10 +1598,10 @@
   dependencies:
     client-only "^0.0.1"
 
-"@heroicons/react@1.0.6":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
-  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
+"@heroicons/react@2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.13.tgz#9b1cc54ff77d6625c9565efdce0054a4bcd9074c"
+  integrity sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==
 
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"