feat(ui): change icons to phosphor-icons #467 (#469)

* change icons to phosphor-icons * feat(ui): change icons to phosphor-icons * feat(ui): change icons to phosphor-icons * feat(ui): correct icon sizes, weights, and colors * feat(ui): change arrow-up-right sizes to 16px
2024-12-31 13:36:08 -06:00
parent 918f4e419c
commit 37bd7e79d9
25 changed files with 112 additions and 141 deletions
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
        "@headlessui/react": "^2.2.0",
        "@hello-pangea/dnd": "^17.0.0",
        "@octokit/rest": "^21.0.2",
+        "@phosphor-icons/react": "^2.1.7",
        "@sentry/react": "^8.38.0",
        "@unocss/vite": "^0.63.6",
        "@vitejs/plugin-react": "^4.3.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,6 +28,9 @@ importers:
      '@octokit/rest':
        specifier: ^21.0.2
        version: 21.0.2
+      '@phosphor-icons/react':
+        specifier: ^2.1.7
+        version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@sentry/react':
        specifier: ^8.38.0
        version: 8.38.0(react@18.3.1)
@@ -1315,6 +1318,13 @@ packages:
    resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
    engines: {node: '>= 10.0.0'}

+  '@phosphor-icons/react@2.1.7':
+    resolution: {integrity: sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8'
+      react-dom: '>= 16.8'
+
  '@pkgjs/parseargs@0.11.0':
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}
@@ -7816,6 +7826,11 @@ snapshots:
      '@parcel/watcher-win32-x64': 2.5.0
    optional: true

+  '@phosphor-icons/react@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
  '@pkgjs/parseargs@0.11.0':
    optional: true

--- a/src/shared/util/icons.tsx
+++ b/src/shared/util/icons.tsx
@@ -1,12 +1,9 @@
+import { ClockUser, LockKey, Prohibit } from '@phosphor-icons/react';
 import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
 import type { SVGProps } from 'react';
 import React from 'react';

-import ClosedIcon from '~icons/material-symbols/lock';
-import WaitlistIcon from '~icons/material-symbols/timelapse';
-import CancelledIcon from '~icons/material-symbols/warning';
-
 interface StatusIconProps extends SVGProps<SVGSVGElement> {
    status: StatusType;
 }
@@ -22,11 +19,11 @@ export function StatusIcon(props: StatusIconProps): JSX.Element | null {

    switch (status) {
        case Status.WAITLISTED:
-            return <WaitlistIcon {...rest} />;
+            return <ClockUser weight='fill' {...rest} />;
        case Status.CLOSED:
-            return <ClosedIcon {...rest} />;
+            return <LockKey weight='fill' {...rest} />;
        case Status.CANCELLED:
-            return <CancelledIcon {...rest} />;
+            return <Prohibit weight='fill' {...rest} />;
        default:
            return null;
    }
--- a/src/stories/components/Button.stories.tsx
+++ b/src/stories/components/Button.stories.tsx
@@ -1,16 +1,9 @@
+import { CalendarDots, ChatText, FileText, ImageSquare, Minus, Plus, Smiley } from '@phosphor-icons/react';
 import { colorsFlattened } from '@shared/util/themeColors';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@views/components/common/Button';
 import React from 'react';

-import AddIcon from '~icons/material-symbols/add';
-import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
-import DescriptionIcon from '~icons/material-symbols/description';
-import ImagePlaceholderIcon from '~icons/material-symbols/image';
-import HappyFaceIcon from '~icons/material-symbols/mood';
-import RemoveIcon from '~icons/material-symbols/remove';
-import ReviewsIcon from '~icons/material-symbols/reviews';
-
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
    title: 'Components/Common/Button',
@@ -24,7 +17,7 @@ const meta = {
    // More on argTypes: https://storybook.js.org/docs/api/argtypes
    args: {
        children: 'Button',
-        icon: ImagePlaceholderIcon,
+        icon: ImageSquare,
    },
    argTypes: {
        children: { control: 'text' },
@@ -106,10 +99,10 @@ export const PrettyColors: Story = {
 export const CourseButtons: Story = {
    render: props => (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center' }}>
-            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+            <Button {...props} variant='filled' color='ut-green' icon={Plus}>
                Add Course
            </Button>
-            <Button {...props} variant='filled' color='theme-red' icon={RemoveIcon}>
+            <Button {...props} variant='filled' color='theme-red' icon={Minus}>
                Remove Course
            </Button>
        </div>
@@ -129,17 +122,17 @@ export const CourseCatalogActionButtons: Story = {
    },
    render: props => (
        <div style={{ display: 'flex', gap: '15px' }}>
-            <Button {...props} variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
-            <Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
+            <Button {...props} variant='filled' color='ut-burntorange' icon={CalendarDots} />
+            <Button {...props} variant='outline' color='ut-blue' icon={ChatText}>
                RateMyProf
            </Button>
-            <Button {...props} variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+            <Button {...props} variant='outline' color='ut-teal' icon={Smiley}>
                CES
            </Button>
-            <Button {...props} variant='outline' color='ut-orange' icon={DescriptionIcon}>
+            <Button {...props} variant='outline' color='ut-orange' icon={FileText}>
                Past Syllabi
            </Button>
-            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+            <Button {...props} variant='filled' color='ut-green' icon={Plus}>
                Add Course
            </Button>
        </div>
--- a/src/stories/components/DialogProvider.stories.tsx
+++ b/src/stories/components/DialogProvider.stories.tsx
@@ -1,11 +1,10 @@
+import { ArrowsVertical } from '@phosphor-icons/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@views/components/common/Button';
 import DialogProvider, { usePrompt } from '@views/components/common/DialogProvider/DialogProvider';
 import Text from '@views/components/common/Text/Text';
 import React, { useState } from 'react';

-import MaterialSymbolsExpandAllRoundedIcon from '~icons/material-symbols/expand-all-rounded';
-
 const meta = {
    title: 'Components/Common/DialogProvider',
    component: DialogProvider,
@@ -46,7 +45,13 @@ const InnerComponent = () => {
    };

    return (
-        <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+        <Button
+            variant='filled'
+            color='ut-burntorange'
+            icon={ArrowsVertical}
+            iconProps={{ className: 'h-4 w-4' }}
+            onClick={myShow}
+        >
            Open Dialog
        </Button>
    );
@@ -86,7 +91,7 @@ const FiveDialogsInnerComponent = () => {
    };

    return (
-        <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+        <Button variant='filled' color='ut-burntorange' icon={ArrowsVertical} onClick={myShow}>
            Open Dialogs
        </Button>
    );
@@ -121,7 +126,7 @@ const NestedDialogsInnerComponent = () => {
    };

    return (
-        <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+        <Button variant='filled' color='ut-burntorange' icon={ArrowsVertical} onClick={myShow}>
            Open Next Dialog
        </Button>
    );
@@ -161,7 +166,7 @@ const DialogWithOnCloseInnerComponent = () => {
            <h1>
                You closed the button below {timesClosed} {timesClosed === 1 ? 'time' : 'times'}
            </h1>
-            <Button variant='filled' color='ut-burntorange' icon={MaterialSymbolsExpandAllRoundedIcon} onClick={myShow}>
+            <Button variant='filled' color='ut-burntorange' icon={ArrowsVertical} onClick={myShow}>
                Open Dialog
            </Button>
        </>
--- a/src/stories/components/Divider.stories.tsx
+++ b/src/stories/components/Divider.stories.tsx
@@ -1,14 +1,9 @@
+import { CalendarDots, ChatText, FileText, Plus, Smiley } from '@phosphor-icons/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@views/components/common/Button';
 import Divider from '@views/components/common/Divider';
 import React from 'react';

-import AddIcon from '~icons/material-symbols/add';
-import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
-import DescriptionIcon from '~icons/material-symbols/description';
-import HappyFaceIcon from '~icons/material-symbols/mood';
-import ReviewsIcon from '~icons/material-symbols/reviews';
-
 const meta = {
    title: 'Components/Common/Divider',
    component: Divider,
@@ -59,18 +54,18 @@ export const CourseCatalogActionButtons: Story = {
    },
    render: props => (
        <div className='flex items-center gap-3.75'>
-            <Button variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
+            <Button variant='filled' color='ut-burntorange' icon={CalendarDots} />
            <Divider {...props} />
-            <Button variant='outline' color='ut-blue' icon={ReviewsIcon}>
+            <Button variant='outline' color='ut-blue' icon={ChatText}>
                RateMyProf
            </Button>
-            <Button variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+            <Button variant='outline' color='ut-teal' icon={Smiley}>
                CES
            </Button>
-            <Button variant='outline' color='ut-orange' icon={DescriptionIcon}>
+            <Button variant='outline' color='ut-orange' icon={FileText}>
                Past Syllabi
            </Button>
-            <Button variant='filled' color='ut-green' icon={AddIcon}>
+            <Button variant='filled' color='ut-green' icon={Plus}>
                Add Course
            </Button>
        </div>
--- a/src/stories/components/FileUpload.stories.tsx
+++ b/src/stories/components/FileUpload.stories.tsx
@@ -1,10 +1,9 @@
+import { ImageSquare } from '@phosphor-icons/react';
 import { colorsFlattened } from '@shared/util/themeColors';
 import type { Meta, StoryObj } from '@storybook/react';
 import FileUpload from '@views/components/common/FileUpload';
 import React from 'react';

-import ImagePlaceholderIcon from '~icons/material-symbols/image';
-
 /**
 * Stole this straight from Button.stories.tsx to test the input
 */
@@ -17,7 +16,7 @@ const meta = {
    tags: ['autodocs'],
    args: {
        children: 'Upload File',
-        icon: ImagePlaceholderIcon,
+        icon: ImageSquare,
    },
    argTypes: {
        children: { control: 'text' },
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -1,5 +1,6 @@
 import splashText from '@assets/insideJokes';
 import createSchedule from '@pages/background/lib/createSchedule';
+import { CalendarDots, GearSix, Plus } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
@@ -13,10 +14,7 @@ import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeStrin
 import useKC_DABR_WASM from 'kc-dabr-wasm';
 import React, { useEffect, useState } from 'react';

-import AddSchedule from '~icons/material-symbols/add';
-import CalendarIcon from '~icons/material-symbols/calendar-month';
 import Feedback from '~icons/material-symbols/flag';
-import SettingsIcon from '~icons/material-symbols/settings';

 import { Button } from './common/Button';
 import CourseStatus from './common/CourseStatus';
@@ -94,10 +92,10 @@ export default function PopupMain(): JSX.Element {
                    <SmallLogo />
                    <div className='flex items-center gap-2.5'>
                        <button className='bg-ut-burntorange px-2 py-1.25 btn' onClick={handleCalendarOpenOnClick}>
-                            <CalendarIcon className='size-6 text-white' />
+                            <CalendarDots className='size-6 text-white' />
                        </button>
                        <button className='bg-transparent px-2 py-1.25 btn' onClick={handleOpenOptions}>
-                            <SettingsIcon className='size-6 color-ut-black' />
+                            <GearSix className='size-6 color-ut-black' />
                        </button>
                        <button className='bg-transparent px-2 py-1.25 btn' onClick={openReportWindow}>
                            <Feedback className='size-6 color-ut-black' />
@@ -138,7 +136,7 @@ export default function PopupMain(): JSX.Element {
                            className='h-fit p-0 btn'
                            onClick={handleAddSchedule}
                        >
-                            <AddSchedule className='h-6 w-6' />
+                            <Plus className='h-6 w-6' />
                        </Button>
                    </div>
                </ScheduleDropdown>
--- a/src/views/components/calendar/CalendarBottomBar.tsx
+++ b/src/views/components/calendar/CalendarBottomBar.tsx
@@ -1,3 +1,4 @@
+import { CalendarDots, ImageSquare } from '@phosphor-icons/react';
 import type { Course } from '@shared/types/Course';
 import { saveAsCal, saveCalAsPng } from '@views/components/calendar/utils';
 import { Button } from '@views/components/common/Button';
@@ -7,9 +8,6 @@ import type { CalendarGridCourse } from '@views/hooks/useFlattenedCourseSchedule
 import clsx from 'clsx';
 import React from 'react';

-import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
-import ImageIcon from '~icons/material-symbols/image';
-
 import CalendarCourseBlock from './CalendarCourseCell';

 type CalendarBottomBarProps = {
@@ -62,14 +60,14 @@ export default function CalendarBottomBar({ courseCells, setCourse }: CalendarBo
            </div>
            <div className='flex items-center screenshot:hidden'>
                {displayCourses && <Divider orientation='vertical' size='1rem' className='mx-1.25' />}
-                <Button variant='single' color='ut-black' icon={CalendarMonthIcon} onClick={saveAsCal}>
+                <Button variant='single' color='ut-black' icon={CalendarDots} onClick={saveAsCal}>
                    Save as .CAL
                </Button>
                <Divider orientation='vertical' size='1rem' className='mx-1.25' />
                <Button
                    variant='single'
                    color='ut-black'
-                    icon={ImageIcon}
+                    icon={ImageSquare}
                    onClick={() => requestAnimationFrame(() => saveCalAsPng())}
                >
                    Save as .PNG
--- a/src/views/components/calendar/CalendarCourseCell.tsx
+++ b/src/views/components/calendar/CalendarCourseCell.tsx
@@ -1,3 +1,4 @@
+import { ClockUser, LockKey, Prohibit } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import type { StatusType } from '@shared/types/Course';
 import { Status } from '@shared/types/Course';
@@ -7,10 +8,6 @@ import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';

-import ClosedIcon from '~icons/material-symbols/lock';
-import WaitlistIcon from '~icons/material-symbols/timelapse';
-import CancelledIcon from '~icons/material-symbols/warning';
-
 /**
 * Props for the CalendarCourseCell component.
 */
@@ -59,11 +56,11 @@ export default function CalendarCourseCell({
    let rightIcon: React.ReactNode | null = null;
    if (enableCourseStatusChips) {
        if (status === Status.WAITLISTED) {
-            rightIcon = <WaitlistIcon className='h-5 w-5' />;
+            rightIcon = <ClockUser weight='fill' className='h-5 w-5' />;
        } else if (status === Status.CLOSED) {
-            rightIcon = <ClosedIcon className='h-5 w-5' />;
+            rightIcon = <LockKey weight='fill' className='h-5 w-5' />;
        } else if (status === Status.CANCELLED) {
-            rightIcon = <CancelledIcon className='h-5 w-5' />;
+            rightIcon = <Prohibit weight='fill' className='h-5 w-5' />;
        }
    }

--- a/src/views/components/calendar/CalendarCourseCellColorPicker/ColorPatch.tsx
+++ b/src/views/components/calendar/CalendarCourseCellColorPicker/ColorPatch.tsx
@@ -1,8 +1,7 @@
+import { Check } from '@phosphor-icons/react';
 import { getThemeColorHexByName } from '@shared/util/themeColors';
 import React from 'react';

-import CheckIcon from '~icons/material-symbols/check';
-
 /**
 * Props for the ColorPatch component
 */
@@ -30,7 +29,7 @@ export default function ColorPatch({ color, isSelected, handleSetSelectedColor }
            style={{ backgroundColor: color }}
            onClick={handleClick}
        >
-            {isSelected && <CheckIcon className='h-5 w-5 color-white' />}
+            {isSelected && <Check className='h-5 w-5 color-white' />}
        </button>
    );
 }
--- a/src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx
+++ b/src/views/components/calendar/CalendarCourseCellColorPicker/HexColorEditor.tsx
@@ -1,8 +1,7 @@
+import { Hash } from '@phosphor-icons/react';
 import { getThemeColorHexByName } from '@shared/util/themeColors';
 import React from 'react';

-import TagIcon from '~icons/material-symbols/tag';
-
 /**
 * Props for the HexColorEditor component
 */
@@ -29,7 +28,7 @@ export default function HexColorEditor({ hexCode, setHexCode }: HexColorEditorPr
                style={{ backgroundColor: previewColor }}
                className='h-5.5 w-5.25 flex items-center justify-center rounded-l-1'
            >
-                <TagIcon className='h-4 w-4 text-color-white' />
+                <Hash className='h-4 w-4 text-color-white' />
            </div>
            <div className='h-5.5 w-[53px] flex flex-1 items-center justify-center border-b border-r border-t rounded-br rounded-tr p-1.25'>
                <input
--- a/src/views/components/calendar/CalendarHeader.tsx
+++ b/src/views/components/calendar/CalendarHeader.tsx
@@ -1,3 +1,4 @@
+import { GearSix, Sidebar } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { Button } from '@views/components/common/Button';
 import CourseStatus from '@views/components/common/CourseStatus';
@@ -8,10 +9,6 @@ import useSchedules from '@views/hooks/useSchedules';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React, { useEffect, useState } from 'react';

-import MenuIcon from '~icons/material-symbols/menu';
-// import RefreshIcon from '~icons/material-symbols/refresh';
-import SettingsIcon from '~icons/material-symbols/settings';
-
 /**
 * Opens the options page in a new tab.
 * @returns A promise that resolves when the options page is opened.
@@ -61,7 +58,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
        <div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
            <Button
                variant='single'
-                icon={MenuIcon}
+                icon={Sidebar}
                color='ut-gray'
                onClick={onSidebarToggle}
                className='screenshot:hidden'
@@ -86,7 +83,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)

                {/* <Button variant='single' icon={UndoIcon} color='ut-black' />
                <Button variant='single' icon={RedoIcon} color='ut-black' /> */}
-                <Button variant='single' icon={SettingsIcon} color='theme-black' onClick={handleOpenOptions} />
+                <Button variant='single' icon={GearSix} color='theme-black' onClick={handleOpenOptions} />
            </div>
        </div>
    );
--- a/src/views/components/calendar/CalendarSchedules.tsx
+++ b/src/views/components/calendar/CalendarSchedules.tsx
@@ -1,4 +1,5 @@
 import createSchedule from '@pages/background/lib/createSchedule';
+import { Plus } from '@phosphor-icons/react';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import { Button } from '@views/components/common/Button';
 import List from '@views/components/common/List';
@@ -8,8 +9,6 @@ import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
 import useSchedules, { getActiveSchedule, switchSchedule } from '@views/hooks/useSchedules';
 import React from 'react';

-import AddSchedule from '~icons/material-symbols/add';
-
 /**
 * Renders a component that displays a list of schedules.
 *
@@ -33,7 +32,7 @@ export function CalendarSchedules() {
                    MY SCHEDULES
                </Text>
                <Button variant='single' color='theme-black' className='h-fit p-0 btn' onClick={handleAddSchedule}>
-                    <AddSchedule className='h-6 w-6' />
+                    <Plus className='h-6 w-6' />
                </Button>
            </div>
            <div className='flex flex-col space-y-2.5'>
--- a/src/views/components/calendar/ImportantLinks.tsx
+++ b/src/views/components/calendar/ImportantLinks.tsx
@@ -1,9 +1,8 @@
+import { ArrowUpRight } from '@phosphor-icons/react';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';

-import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
-
 type Props = {
    className?: string;
 };
@@ -61,7 +60,7 @@ export default function ImportantLinks({ className }: Props): JSX.Element {
                    rel='noreferrer'
                >
                    <Text variant='p'>{link.text}</Text>
-                    <OutwardArrowIcon className='h-3 w-3' />
+                    <ArrowUpRight className='h-4 w-4' />
                </a>
            ))}
        </article>
--- a/src/views/components/calendar/TeamLinks.tsx
+++ b/src/views/components/calendar/TeamLinks.tsx
@@ -1,11 +1,10 @@
+import { ArrowUpRight } from '@phosphor-icons/react';
 import { CRX_PAGES } from '@shared/types/CRXPages';
 import { openReportWindow } from '@shared/util/openReportWindow';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';

-import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
-
 type Props = {
    className?: string;
 };
@@ -63,7 +62,7 @@ export default function TeamLinks({ className }: Props): JSX.Element {
                    onClick={event => handleClick(link, event)}
                >
                    <Text variant='p'>{link.text}</Text>
-                    <OutwardArrowIcon className='h-3 w-3' />
+                    <ArrowUpRight className='h-4 w-4' />
                </a>
            ))}
        </article>
--- a/src/views/components/common/Button.tsx
+++ b/src/views/components/common/Button.tsx
@@ -1,17 +1,17 @@
+import type { Icon, IconProps } from '@phosphor-icons/react';
 import type { ThemeColor } from '@shared/types/ThemeColors';
 import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';

-import type IconComponent from '~icons/material-symbols';
-
 interface Props {
    className?: string;
    style?: React.CSSProperties;
    variant: 'filled' | 'outline' | 'single';
    onClick?: () => void;
-    icon?: typeof IconComponent;
+    icon?: Icon;
+    iconProps?: IconProps;
    disabled?: boolean;
    title?: string;
    color: ThemeColor;
@@ -27,6 +27,7 @@ export function Button({
    variant,
    onClick,
    icon,
+    iconProps,
    disabled,
    title,
    color,
@@ -63,7 +64,7 @@ export function Button({
            disabled={disabled}
            onClick={disabled ? undefined : onClick}
        >
-            {Icon && <Icon className='h-6 w-6' />}
+            {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
            {!isIconOnly && (
                <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
                    {children}
--- a/src/views/components/common/FileUpload.tsx
+++ b/src/views/components/common/FileUpload.tsx
@@ -1,17 +1,17 @@
+import type { Icon, IconProps } from '@phosphor-icons/react';
 import type { ThemeColor } from '@shared/types/ThemeColors';
 import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
 import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React from 'react';

-import type IconComponent from '~icons/material-symbols';
-
 interface Props {
    className?: string;
    style?: React.CSSProperties;
    variant: 'filled' | 'outline' | 'single';
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    icon?: typeof IconComponent;
+    icon?: Icon;
+    iconProps?: IconProps;
    disabled?: boolean;
    title?: string;
    color: ThemeColor;
@@ -28,6 +28,7 @@ export default function FileUpload({
    variant,
    onChange,
    icon,
+    iconProps,
    disabled,
    title,
    color,
@@ -62,7 +63,7 @@ export default function FileUpload({
            )}
            title={title}
        >
-            {Icon && <Icon className='h-6 w-6' />}
+            {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
            {!isIconOnly && (
                <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
                    {children}
--- a/src/views/components/common/PopupCourseBlock.tsx
+++ b/src/views/components/common/PopupCourseBlock.tsx
@@ -1,4 +1,5 @@
 import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
+import { DotsSixVertical } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import type { Course } from '@shared/types/Course';
@@ -10,8 +11,6 @@ import Text from '@views/components/common/Text/Text';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';

-import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
-
 /**
 * Props for PopupCourseBlock
 */
@@ -79,7 +78,7 @@ export default function PopupCourseBlock({
                className='flex items-center self-stretch rounded rounded-r-0 cursor-move!'
                {...dragHandleProps}
            >
-                <DragIndicatorIcon className='h-6 w-6 text-white' />
+                <DotsSixVertical weight='bold' className='h-6 w-6 text-white' />
            </div>
            <Text className={clsx('flex-1 py-3.5 truncate', fontColor)} variant='h1-course'>
                <span className='px-0.5 font-450'>{formattedUniqueId}</span> {course.department} {course.number}
--- a/src/views/components/common/ScheduleDropdown.tsx
+++ b/src/views/components/common/ScheduleDropdown.tsx
@@ -1,11 +1,9 @@
 import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react';
+import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import Text from '@views/components/common/Text/Text';
 import useSchedules from '@views/hooks/useSchedules';
 import React from 'react';

-import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
-import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
-
 /**
 * Props for the Dropdown component.
 */
@@ -46,7 +44,7 @@ export default function ScheduleDropdown(props: ScheduleDropdownProps) {
                                </div>
                            </div>
                            <Text className='text-ut-burntorange text-2xl! font-normal!'>
-                                {open ? <DropdownArrowDown /> : <DropdownArrowUp />}
+                                {open ? <CaretDown weight='fill' /> : <CaretUp weight='fill' />}
                            </Text>
                        </DisclosureButton>

--- a/src/views/components/common/ScheduleListItem.tsx
+++ b/src/views/components/common/ScheduleListItem.tsx
@@ -2,6 +2,7 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
 import deleteSchedule from '@pages/background/lib/deleteSchedule';
 import duplicateSchedule from '@pages/background/lib/duplicateSchedule';
 import renameSchedule from '@pages/background/lib/renameSchedule';
+import { Circle, DotsSixVertical, DotsThree, RadioButton } from '@phosphor-icons/react';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import Text from '@views/components/common/Text/Text';
 import { useEnforceScheduleLimit } from '@views/hooks/useEnforceScheduleLimit';
@@ -9,9 +10,6 @@ import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
 import React, { useEffect, useMemo, useState } from 'react';

-import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
-import MoreActionsIcon from '~icons/material-symbols/more-vert';
-
 import { Button } from './Button';
 import DialogProvider, { usePrompt } from './DialogProvider/DialogProvider';
 import { ExtensionRootWrapper, styleResetClass } from './ExtensionRoot/ExtensionRoot';
@@ -117,21 +115,21 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
        <div className='rounded bg-white'>
            <li className='w-full flex cursor-pointer items-center text-ut-burntorange'>
                <div className='h-full cursor-move focusable' {...dragHandleProps}>
-                    <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
+                    <DotsSixVertical
+                        weight='bold'
+                        className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400'
+                    />
                </div>
                <div className='group relative flex flex-1 items-center overflow-x-hidden'>
                    <div
                        className='group/circle flex flex-grow items-center gap-1.5 overflow-x-hidden'
                        onClick={(...e) => !isEditing && onClick?.(...e)}
                    >
-                        <div
-                            className={clsx(
-                                'h-5.5 w-5.5 relative flex-shrink-0 border-2px border-current rounded-full btn-transition group-active/circle:scale-95 after:(absolute content-empty bg-current h-2.9 w-2.9 rounded-full transition transform-gpu scale-100 ease-out-expo duration-250 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2)',
-                                {
-                                    'after:(scale-0! opacity-0 ease-in-out! duration-200!)': !isActive,
-                                }
+                        {isActive ? (
+                            <RadioButton className='h-7.5 w-7.5 btn-transition active:scale-95' weight='fill' />
+                        ) : (
+                            <Circle className='h-7.5 w-7.5 btn-transition active:scale-95' />
                        )}
-                        />
                        {isEditing && (
                            <Text
                                variant='p'
@@ -158,7 +156,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
                    <DialogProvider>
                        <Menu>
                            <MenuButton className='invisible h-fit bg-transparent p-0 text-ut-gray btn-transition data-[open]:visible group-hover:visible'>
-                                <MoreActionsIcon className='h-6 w-6' />
+                                <DotsThree weight='bold' className='h-6 w-6' />
                            </MenuButton>

                            <MenuItems
--- a/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
+++ b/src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx
@@ -1,3 +1,4 @@
+import { ArrowUpRight, CalendarDots, ChatText, Copy, FileText, Minus, Plus, Smiley, X } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import type { Course } from '@shared/types/Course';
 import type Instructor from '@shared/types/Instructor';
@@ -10,16 +11,6 @@ import Text from '@views/components/common/Text/Text';
 import { useCalendar } from '@views/contexts/CalendarContext';
 import React from 'react';

-import Add from '~icons/material-symbols/add';
-import CalendarMonth from '~icons/material-symbols/calendar-month';
-import CloseIcon from '~icons/material-symbols/close';
-import Copy from '~icons/material-symbols/content-copy';
-import Description from '~icons/material-symbols/description';
-import Mood from '~icons/material-symbols/mood';
-import OpenNewIcon from '~icons/material-symbols/open-in-new';
-import Remove from '~icons/material-symbols/remove';
-import Reviews from '~icons/material-symbols/reviews';
-
 import DisplayMeetingInfo from './DisplayMeetingInfo';

 const { openNewTab, addCourse, removeCourse, openCESPage } = background;
@@ -120,7 +111,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                        {formattedUniqueId}
                    </Button>
                    <button className='bg-transparent p-0 text-ut-black btn' onClick={onClose}>
-                        <CloseIcon className='h-7 w-7' />
+                        <X className='h-6 w-6' />
                    </button>
                </div>
                <div className='flex items-center gap-2'>
@@ -168,7 +159,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                <Button
                    variant='filled'
                    color='ut-burntorange'
-                    icon={isInCalendar ? OpenNewIcon : CalendarMonth}
+                    icon={isInCalendar ? ArrowUpRight : CalendarDots}
                    onClick={() => {
                        if (isInCalendar) {
                            openNewTab({
@@ -183,7 +174,7 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                <Button
                    variant='outline'
                    color='ut-blue'
-                    icon={Reviews}
+                    icon={ChatText}
                    onClick={handleOpenRateMyProf}
                    disabled={instructors.length === 0}
                >
@@ -192,19 +183,19 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                <Button
                    variant='outline'
                    color='ut-teal'
-                    icon={Mood}
+                    icon={Smiley}
                    onClick={handleOpenCES}
                    disabled={instructors.length === 0}
                >
                    CES
                </Button>
-                <Button variant='outline' color='ut-orange' icon={Description} onClick={handleOpenPastSyllabi}>
+                <Button variant='outline' color='ut-orange' icon={FileText} onClick={handleOpenPastSyllabi}>
                    Past Syllabi
                </Button>
                <Button
                    variant='filled'
                    color={!courseAdded ? 'ut-green' : 'theme-red'}
-                    icon={!courseAdded ? Add : Remove}
+                    icon={!courseAdded ? Plus : Minus}
                    onClick={handleAddOrRemoveCourse}
                >
                    {!courseAdded ? 'Add Course' : 'Remove Course'}
--- a/src/views/components/injected/TableRow/TableRow.tsx
+++ b/src/views/components/injected/TableRow/TableRow.tsx
@@ -1,3 +1,4 @@
+import { ChartBar } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import type { Course, ScrapedRow } from '@shared/types/Course';
 import type { UserSchedule } from '@shared/types/UserSchedule';
@@ -6,8 +7,6 @@ import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot'
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';

-import RowIcon from '~icons/material-symbols/bar-chart-rounded';
-
 import styles from './TableRow.module.scss';

 interface Props {
@@ -119,7 +118,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
                    className='m1 h-6 w-6 flex items-center justify-center rounded bg-ut-burntorange color-white!'
                    onClick={onClick}
                >
-                    <RowIcon color='ut-white' />
+                    <ChartBar className='text-ut-white h-4 w-4' weight='fill' />
                </button>
                {conflicts.length > 0 && (
                    <ConflictsWithWarning
--- a/src/views/components/settings/Settings.tsx
+++ b/src/views/components/settings/Settings.tsx
@@ -3,6 +3,7 @@ import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
 import { deleteAllSchedules } from '@pages/background/lib/deleteSchedule';
 import exportSchedule from '@pages/background/lib/exportSchedule';
 import importSchedule from '@pages/background/lib/importSchedule';
+import { Trash } from '@phosphor-icons/react';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import { downloadBlob } from '@shared/util/downloadBlob';
@@ -26,9 +27,8 @@ import clsx from 'clsx';
 import React, { useCallback, useEffect, useState } from 'react';

 import IconoirGitFork from '~icons/iconoir/git-fork';
-// import { ExampleCourse } from 'src/stories/components/ConflictsWithWarning.stories';
-import DeleteForeverIcon from '~icons/material-symbols/delete-forever';

+// import { ExampleCourse } from 'src/stories/components/ConflictsWithWarning.stories';;
 import FileUpload from '../common/FileUpload';
 import { useMigrationDialog } from '../common/MigrationDialog';
 // import RefreshIcon from '~icons/material-symbols/refresh';
@@ -202,7 +202,7 @@ export default function Settings(): JSX.Element {
                        accept();
                    }}
                >
-                    I Understand
+                    I Understand hello
                </Button>
            ),
        });
@@ -440,12 +440,7 @@ export default function Settings(): JSX.Element {
                                            Erases all schedules and courses you have.
                                        </p>
                                    </div>
-                                    <Button
-                                        variant='outline'
-                                        color='theme-red'
-                                        icon={DeleteForeverIcon}
-                                        onClick={handleEraseAll}
-                                    >
+                                    <Button variant='outline' color='theme-red' icon={Trash} onClick={handleEraseAll}>
                                        Erase All
                                    </Button>
                                </div>
--- a/src/views/hooks/useChangelog.tsx
+++ b/src/views/hooks/useChangelog.tsx
@@ -1,10 +1,9 @@
+import { X } from '@phosphor-icons/react';
 import ChangelogPopup from '@views/components/common/ChangelogPopup';
 import Text from '@views/components/common/Text/Text';
 import { useDialog } from '@views/contexts/DialogContext';
 import React from 'react';

-import MaterialSymbolsClose from '~icons/material-symbols/close';
-
 import { Button } from '../components/common/Button';

 /**
@@ -23,7 +22,7 @@ export default function useChangelog(): () => void {
                        Changelog
                    </Text>
                    <Button variant='single' onClick={close} color='theme-black' className='p-1 text-gray-700'>
-                        <MaterialSymbolsClose className='h-7 w-7' />
+                        <X className='h-6 w-6' />
                    </Button>
                </div>
            ),