chore(ui): Migrated all components to use gravity-ui

2026-04-06 04:01:58 +02:00 · 2025-11-03 01:26:20 -08:00
parent 515cd7a239
commit 769e40e904
15 changed files with 100 additions and 116 deletions
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -1,3 +1,4 @@
+import { Eye, EyeSlash, Key, Plus, TrashBin } from '@gravity-ui/icons';
 import { format } from 'date-fns';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { Field, Form, Formik, FormikHelpers } from 'formik';
@@ -14,11 +15,6 @@ import { MainPageHeader } from '@/components/elements/MainPageHeader';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { Dialog } from '@/components/elements/dialog';
-import HugeIconsEye from '@/components/elements/hugeicons/Eye';
-import HugeIconsEyeSlash from '@/components/elements/hugeicons/EyeSlash';
-import HugeIconsKey from '@/components/elements/hugeicons/Key';
-import HugeIconsPlus from '@/components/elements/hugeicons/Plus';
-import HugeIconsTrash from '@/components/elements/hugeicons/Trash';

 import createApiKey from '@/api/account/createApiKey';
 import deleteApiKey from '@/api/account/deleteApiKey';
@@ -160,7 +156,7 @@ const AccountApiContainer = () => {
                                onClick={() => setShowCreateModal(true)}
                                className='flex items-center gap-2'
                            >
-                                <HugeIconsPlus className='w-4 h-4' fill='currentColor' />
+                                <Plus width={22} height={22} fill='currentColor' />
                                Create API Key
                            </ActionButton>
                        }
@@ -190,7 +186,7 @@ const AccountApiContainer = () => {
                        {keys.length === 0 ? (
                            <div className='text-center py-12'>
                                <div className='w-16 h-16 mx-auto mb-4 rounded-full bg-[#ffffff11] flex items-center justify-center'>
-                                    <HugeIconsKey className='w-8 h-8 text-zinc-400' fill='currentColor' />
+                                    <Key width={22} height={22} className='text-zinc-400' fill='currentColor' />
                                </div>
                                <h3 className='text-lg font-medium text-zinc-200 mb-2'>No API Keys</h3>
                                <p className='text-sm text-zinc-400 max-w-sm mx-auto'>
@@ -240,15 +236,13 @@ const AccountApiContainer = () => {
                                                                className='p-1 text-zinc-400 hover:text-zinc-300'
                                                            >
                                                                {showKeys[key.identifier] ? (
-                                                                    <HugeIconsEyeSlash
-                                                                        className='w-3 h-3'
+                                                                    <EyeSlash
+                                                                        width={18}
+                                                                        height={18}
                                                                        fill='currentColor'
                                                                    />
                                                                ) : (
-                                                                    <HugeIconsEye
-                                                                        className='w-3 h-3'
-                                                                        fill='currentColor'
-                                                                    />
+                                                                    <Eye width={18} height={18} fill='currentColor' />
                                                                )}
                                                            </ActionButton>
                                                        </div>
@@ -260,7 +254,7 @@ const AccountApiContainer = () => {
                                                    className='ml-4'
                                                    onClick={() => setDeleteIdentifier(key.identifier)}
                                                >
-                                                    <HugeIconsTrash className='w-4 h-4' fill='currentColor' />
+                                                    <TrashBin width={20} height={20} fill='currentColor' />
                                                </ActionButton>
                                            </div>
                                        </div>
--- a/resources/scripts/components/elements/CheckboxLabel.tsx
+++ b/resources/scripts/components/elements/CheckboxLabel.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '@/lib/utils';

 const Checkbox = React.forwardRef<
@@ -14,22 +15,13 @@ const Checkbox = React.forwardRef<
    };

    return (
-        <div
-            className={cn(
-                'flex items-center gap-2 select-none',
-                className
-            )}
-            {...props}
-            ref={ref}
-        >
+        <div className={cn('flex items-center gap-2 select-none', className)} {...props} ref={ref}>
            {label && (
                <span
                    onClick={handleClick}
                    className={cn(
                        'inline-block rounded-lg w-full px-2 py-1 cursor-pointer transition-colors duration-200 mb-2',
-                        checked
-                            ? 'bg-green-800 text-white'
-                            : 'border-transparent hover:bg-gray-700'
+                        checked ? 'bg-brand/40 text-white' : 'border-transparent hover:bg-gray-700/30',
                    )}
                >
                    {label}
@@ -41,4 +33,4 @@ const Checkbox = React.forwardRef<

 Checkbox.displayName = 'Checkbox';

-export { Checkbox };
+export { Checkbox };
--- a/resources/scripts/components/elements/CheckboxNew.tsx
+++ b/resources/scripts/components/elements/CheckboxNew.tsx
@@ -1,8 +1,7 @@
+import { Check } from '@gravity-ui/icons';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as React from 'react';

-import HugeIconsCheck from '@/components/elements/hugeicons/Check';
-
 import { cn } from '@/lib/utils';

 const Checkbox = React.forwardRef<
@@ -18,7 +17,7 @@ const Checkbox = React.forwardRef<
        {...props}
    >
        <CheckboxPrimitive.Indicator className={cn('flex h-full w-full items-center justify-center text-current')}>
-            <HugeIconsCheck fill='currentColor' className='h-4 w-4' />
+            <Check width={22} height={22} fill='currentColor' />
        </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
 ));
--- a/resources/scripts/components/elements/ContextMenu.tsx
+++ b/resources/scripts/components/elements/ContextMenu.tsx
@@ -1,10 +1,7 @@
+import { Check, ChevronsRight, CircleFill } from '@gravity-ui/icons';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as React from 'react';

-import HugeIconsCheck from '@/components/elements/hugeicons/Check';
-import HugeIconsChevronRight from '@/components/elements/hugeicons/ChevronRight';
-import HugeIconsDotFilled from '@/components/elements/hugeicons/DotFilled';
-
 import { cn } from '@/lib/utils';

 const ContextMenu = ContextMenuPrimitive.Root;
@@ -35,7 +32,7 @@ const ContextMenuSubTrigger = React.forwardRef<
        {...props}
    >
        {children}
-        <HugeIconsChevronRight className='ml-auto h-4 w-4' />
+        <ChevronsRight width={22} height={22} className='ml-auto' />
    </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
@@ -105,7 +102,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
    >
        <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
            <ContextMenuPrimitive.ItemIndicator>
-                <HugeIconsCheck className='h-4 w-4' />
+                <Check width={22} height={22} />
            </ContextMenuPrimitive.ItemIndicator>
        </span>
        {children}
@@ -127,7 +124,7 @@ const ContextMenuRadioItem = React.forwardRef<
    >
        <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
            <ContextMenuPrimitive.ItemIndicator>
-                <HugeIconsDotFilled className='h-4 w-4 fill-current' />
+                <CircleFill width={22} height={22} className='fill-current' />
            </ContextMenuPrimitive.ItemIndicator>
        </span>
        {children}
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -1,11 +1,9 @@
+import { Check, ChevronRight } from '@gravity-ui/icons';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as React from 'react';

 import { cn } from '@/lib/utils';

-import HugeIconsCheck from './hugeicons/Check';
-import HugeIconsChevronRight from './hugeicons/ChevronRight';
-
 const DropdownMenu = DropdownMenuPrimitive.Root;

 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -34,7 +32,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
        {...props}
    >
        {children}
-        <HugeIconsChevronRight className='ml-auto h-4 w-4' fill='currentColor' />
+        <ChevronRight width={22} height={22} className='ml-auto ' fill='currentColor' />
    </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -106,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    >
        <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
            <DropdownMenuPrimitive.ItemIndicator>
-                <HugeIconsCheck className='h-4 w-4' fill='currentColor' />
+                <Check width={22} height={22} fill='currentColor' />
            </DropdownMenuPrimitive.ItemIndicator>
        </span>
        {children}
--- a/resources/scripts/components/elements/MobileFullScreenMenu.tsx
+++ b/resources/scripts/components/elements/MobileFullScreenMenu.tsx
@@ -1,21 +1,25 @@
+import {
+    AbbrApi,
+    Box,
+    BranchesDown,
+    Clock,
+    ClockArrowRotateLeft,
+    CloudArrowUpIn,
+    Database,
+    Ellipsis,
+    FolderOpen,
+    Gear,
+    House,
+    Key,
+    PencilToLine,
+    Persons,
+    Terminal,
+    Xmark,
+} from '@gravity-ui/icons';
 import React from 'react';
 import { NavLink } from 'react-router-dom';

 import Can from '@/components/elements/Can';
-import HugeIconsApi from '@/components/elements/hugeicons/Api';
-import HugeIconsClock from '@/components/elements/hugeicons/Clock';
-import HugeIconsCloudUp from '@/components/elements/hugeicons/CloudUp';
-import HugeIconsConnections from '@/components/elements/hugeicons/Connections';
-import HugeIconsConsole from '@/components/elements/hugeicons/Console';
-import HugeIconsController from '@/components/elements/hugeicons/Controller';
-import HugeIconsDashboardSettings from '@/components/elements/hugeicons/DashboardSettings';
-import HugeIconsDatabase from '@/components/elements/hugeicons/Database';
-import HugeIconsFolder from '@/components/elements/hugeicons/Folder';
-import HugeIconsHome from '@/components/elements/hugeicons/Home';
-import HugeIconsPencil from '@/components/elements/hugeicons/Pencil';
-import HugeIconsPeople from '@/components/elements/hugeicons/People';
-import HugeIconsSsh from '@/components/elements/hugeicons/Ssh';
-import HugeIconsX from '@/components/elements/hugeicons/X';

 interface MobileFullScreenMenuProps {
    isVisible: boolean;
@@ -34,7 +38,7 @@ const MobileFullScreenMenu = ({ isVisible, onClose, children }: MobileFullScreen
                className='absolute top-4 right-4 p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-all duration-200'
                aria-label='Close menu'
            >
-                <HugeIconsX fill='currentColor' />
+                <Xmark width={22} height={22} fill='currentColor' />
            </button>

            {/* Full screen navigation menu */}
@@ -61,7 +65,7 @@ export const DashboardMobileMenu = ({ isVisible, onClose }: DashboardMobileMenuP
        end = false,
    }: {
        to: string;
-        icon: React.ComponentType<{ fill: string }>;
+        icon: React.ComponentType<{ width: number; height: number; fill: string }>;
        children: React.ReactNode;
        end?: boolean;
    }) => (
@@ -69,31 +73,32 @@ export const DashboardMobileMenu = ({ isVisible, onClose }: DashboardMobileMenuP
            to={to}
            end={end}
            className={({ isActive }) =>
-                `flex items-center gap-4 p-4 rounded-md transition-all duration-200 ${
-                    isActive
-                        ? 'bg-gradient-to-r from-brand/20 to-brand/10 border-l-4 border-brand text-white'
-                        : 'text-white/80 hover:text-white hover:bg-[#ffffff11] border-l-4 border-transparent'
+                `flex items-center gap-4 p-4 rounded-md transition-all duration-200 ${isActive
+                    ? 'bg-gradient-to-r from-brand/20 to-brand/10 border-l-4 border-brand text-white'
+                    : 'text-white/80 hover:text-white hover:bg-[#ffffff11] border-l-4 border-transparent'
                }`
            }
            onClick={onClose}
        >
-            <Icon fill='currentColor' />
+            <div>
+                <Icon width={22} height={22} fill='currentColor' />
+            </div>
            <span className='text-lg font-medium'>{children}</span>
        </NavLink>
    );

    return (
        <MobileFullScreenMenu isVisible={isVisible} onClose={onClose}>
-            <NavigationItem to='/' icon={HugeIconsHome} end>
+            <NavigationItem to='/' icon={House} end>
                Servers
            </NavigationItem>
-            <NavigationItem to='/account/api' icon={HugeIconsApi} end>
+            <NavigationItem to='/account/api' icon={AbbrApi} end>
                API Keys
            </NavigationItem>
-            <NavigationItem to='/account/ssh' icon={HugeIconsSsh} end>
+            <NavigationItem to='/account/ssh' icon={Key} end>
                SSH Keys
            </NavigationItem>
-            <NavigationItem to='/account' icon={HugeIconsDashboardSettings} end>
+            <NavigationItem to='/account' icon={Gear} end>
                Settings
            </NavigationItem>
        </MobileFullScreenMenu>
@@ -126,7 +131,7 @@ export const ServerMobileMenu = ({
        end = false,
    }: {
        to: string;
-        icon: React.ComponentType<{ fill: string }>;
+        icon: React.ComponentType<{ width: number; height: number; fill: string }>;
        children: React.ReactNode;
        end?: boolean;
    }) => (
@@ -134,15 +139,14 @@ export const ServerMobileMenu = ({
            to={to}
            end={end}
            className={({ isActive }) =>
-                `flex items-center gap-4 p-4 rounded-md transition-all duration-200 ${
-                    isActive
-                        ? 'bg-gradient-to-r from-brand/20 to-brand/10 border-l-4 border-brand text-white'
-                        : 'text-white/80 hover:text-white hover:bg-[#ffffff11] border-l-4 border-transparent'
+                `flex items-center gap-4 p-4 rounded-md transition-all duration-200 ${isActive
+                    ? 'bg-gradient-to-r from-brand/20 to-brand/10 border-l-4 border-brand text-white'
+                    : 'text-white/80 hover:text-white hover:bg-[#ffffff11] border-l-4 border-transparent'
                }`
            }
            onClick={onClose}
        >
-            <Icon fill='currentColor' />
+            <Icon width={22} height={22} fill='currentColor' />
            <span className='text-lg font-medium'>{children}</span>
        </NavLink>
    );
@@ -151,20 +155,20 @@ export const ServerMobileMenu = ({

    return (
        <MobileFullScreenMenu isVisible={isVisible} onClose={onClose}>
-            <NavigationItem to={`/server/${serverId}`} icon={HugeIconsHome} end>
+            <NavigationItem to={`/server/${serverId}`} icon={House} end>
                Home
            </NavigationItem>

            <>
                <Can action={'file.*'} matchAny>
-                    <NavigationItem to={`/server/${serverId}/files`} icon={HugeIconsFolder}>
+                    <NavigationItem to={`/server/${serverId}/files`} icon={FolderOpen}>
                        Files
                    </NavigationItem>
                </Can>

                {databaseLimit !== 0 && (
                    <Can action={'database.*'} matchAny>
-                        <NavigationItem to={`/server/${serverId}/databases`} icon={HugeIconsDatabase} end>
+                        <NavigationItem to={`/server/${serverId}/databases`} icon={Database} end>
                            Databases
                        </NavigationItem>
                    </Can>
@@ -172,7 +176,7 @@ export const ServerMobileMenu = ({

                {backupLimit !== 0 && (
                    <Can action={'backup.*'} matchAny>
-                        <NavigationItem to={`/server/${serverId}/backups`} icon={HugeIconsCloudUp} end>
+                        <NavigationItem to={`/server/${serverId}/backups`} icon={CloudArrowUpIn} end>
                            Backups
                        </NavigationItem>
                    </Can>
@@ -180,45 +184,45 @@ export const ServerMobileMenu = ({

                {(allocationLimit > 0 || subdomainSupported) && (
                    <Can action={'allocation.*'} matchAny>
-                        <NavigationItem to={`/server/${serverId}/network`} icon={HugeIconsConnections} end>
+                        <NavigationItem to={`/server/${serverId}/network`} icon={BranchesDown} end>
                            Networking
                        </NavigationItem>
                    </Can>
                )}

                <Can action={'user.*'} matchAny>
-                    <NavigationItem to={`/server/${serverId}/users`} icon={HugeIconsPeople} end>
+                    <NavigationItem to={`/server/${serverId}/users`} icon={Persons} end>
                        Users
                    </NavigationItem>
                </Can>

                <Can action={['startup.read', 'startup.update', 'startup.command', 'startup.docker-image']} matchAny>
-                    <NavigationItem to={`/server/${serverId}/startup`} icon={HugeIconsConsole} end>
+                    <NavigationItem to={`/server/${serverId}/startup`} icon={Terminal} end>
                        Startup
                    </NavigationItem>
                </Can>

                <Can action={'schedule.*'} matchAny>
-                    <NavigationItem to={`/server/${serverId}/schedules`} icon={HugeIconsClock}>
+                    <NavigationItem to={`/server/${serverId}/schedules`} icon={Clock}>
                        Schedules
                    </NavigationItem>
                </Can>

                <Can action={['settings.*', 'file.sftp']} matchAny>
-                    <NavigationItem to={`/server/${serverId}/settings`} icon={HugeIconsDashboardSettings} end>
+                    <NavigationItem to={`/server/${serverId}/settings`} icon={Gear} end>
                        Settings
                    </NavigationItem>
                </Can>

                <Can action={['activity.*', 'activity.read']} matchAny>
-                    <NavigationItem to={`/server/${serverId}/activity`} icon={HugeIconsPencil} end>
+                    <NavigationItem to={`/server/${serverId}/activity`} icon={PencilToLine} end>
                        Activity
                    </NavigationItem>
                </Can>
            </>

            <Can action={'startup.software'}>
-                <NavigationItem to={`/server/${serverId}/shell`} icon={HugeIconsController} end>
+                <NavigationItem to={`/server/${serverId}/shell`} icon={Box} end>
                    Software
                </NavigationItem>
            </Can>
--- a/resources/scripts/components/elements/MobileTopBar.tsx
+++ b/resources/scripts/components/elements/MobileTopBar.tsx
@@ -1,3 +1,4 @@
+import { BarsPlay } from '@gravity-ui/icons';
 import { NavLink } from 'react-router-dom';

 import {
@@ -8,7 +9,6 @@ import {
    DropdownMenuTrigger,
 } from '@/components/elements/DropdownMenu';
 import Logo from '@/components/elements/PyroLogo';
-import HugeIconsMenu from '@/components/elements/hugeicons/Menu';

 interface MobileTopBarProps {
    onMenuToggle: () => void;
@@ -92,7 +92,7 @@ const MobileTopBar = ({ onMenuToggle, onTriggerLogout, onSelectAdminPanel, rootA
                    className='w-10 h-10 flex items-center justify-center rounded-md text-white hover:bg-[#ffffff11] p-2 cursor-pointer'
                    aria-label='Toggle navigation menu'
                >
-                    <HugeIconsMenu fill='currentColor' />
+                    <BarsPlay width={22} height={22} fill='currentColor' />
                </button>
            </div>
        </div>
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -1,3 +1,4 @@
+import { Xmark } from '@gravity-ui/icons';
 import { Dialog as HDialog } from '@headlessui/react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useMemo, useRef, useState } from 'react';
@@ -7,8 +8,6 @@ import ActionButton from '@/components/elements/ActionButton';
 import Spinner from '@/components/elements/Spinner';
 import { DialogContext, IconPosition, styles } from '@/components/elements/dialog';

-import HugeIconsX from './hugeicons/X';
-
 const variants = {
    open: {
        scale: 1,
@@ -145,7 +144,7 @@ const Modal: React.FC<ModalProps> = ({
                                                    onClick={onDismissed}
                                                    className={'opacity-45 hover:opacity-100 p-6 -m-6 cursor-pointer'}
                                                >
-                                                    <HugeIconsX fill='currentColor' />
+                                                    <Xmark width={22} height={22} fill='currentColor' />
                                                </button>
                                            )}
                                        </div>
--- a/resources/scripts/components/elements/Pagination.tsx
+++ b/resources/scripts/components/elements/Pagination.tsx
@@ -1,12 +1,10 @@
+import { ArrowLeft, ArrowRight } from '@gravity-ui/icons';
 import styled from 'styled-components';

 import Button from '@/components/elements/Button';

 import { PaginatedResult } from '@/api/http';

-import HugeIconsArrowLeft from './hugeicons/ArrowLeft';
-import HugeIconsArrowRight from './hugeicons/ArrowRight';
-
 interface RenderFuncProps<T> {
    items: T[];
    isLastPage: boolean;
@@ -56,7 +54,9 @@ function Pagination<T>({ data: { items, pagination }, onPageSelect, children }:
                                onPageSelect(pagination.currentPage - 1)
                            }
                        >
-                            <HugeIconsArrowLeft
+                            <ArrowLeft
+                                width={22}
+                                height={22}
                                fill={'currentColor'}
                                className={`${pagination.currentPage === 1 ? 'text-neutral-500 cursor-not-allowed' : 'text-white'}`}
                            />
@@ -83,7 +83,9 @@ function Pagination<T>({ data: { items, pagination }, onPageSelect, children }:
                                onPageSelect(pagination.currentPage + 1)
                            }
                        >
-                            <HugeIconsArrowRight
+                            <ArrowRight
+                                width={22}
+                                height={22}
                                fill={'currentColor'}
                                className={`${pagination.currentPage === pagination.totalPages ? 'text-neutral-500 cursor-not-allowed' : 'text-white'}`}
                            />
--- a/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
+++ b/resources/scripts/components/elements/activity/ActivityLogEntry.tsx
@@ -1,4 +1,5 @@
 import { ActivityLog } from '@definitions/user';
+import { TerminalLine } from '@gravity-ui/icons';
 // FIXME: add icons back
 import clsx from 'clsx';
 // FIXME: replace with radix tooltip
@@ -7,8 +8,6 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { Link } from 'react-router-dom';

 import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
-import FolderIcon from '@/components/elements/hugeicons/Folder';
-import TerminalIcon from '@/components/elements/hugeicons/Terminal';

 import { formatObjectToIdentString } from '@/lib/objects';

@@ -54,7 +53,7 @@ const ActivityLogEntry = ({ activity, children }: Props) => {
                    <div className='flex items-center gap-1 ml-auto'>
                        {activity.isApi && (
                            <span className='text-xs bg-blue-900/30 text-blue-300 px-1.5 py-0.5 rounded flex items-center gap-1'>
-                                <TerminalIcon fill='currentColor' className='w-3 h-3' />
+                                <TerminalLine width={22} height={22} fill='currentColor' />
                                API
                            </span>
                        )}
--- a/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
+++ b/resources/scripts/components/elements/activity/ActivityLogMetaButton.tsx
@@ -1,9 +1,8 @@
+import { Code, Copy } from '@gravity-ui/icons';
 import { useState } from 'react';

 import ActionButton from '@/components/elements/ActionButton';
 import { Dialog } from '@/components/elements/dialog';
-import HugeIconsCode from '@/components/elements/hugeicons/Code';
-import HugeIconsCopy from '@/components/elements/hugeicons/Copy';

 import { formatObjectToIdentString } from '@/lib/objects';

@@ -35,7 +34,7 @@ const ActivityLogMetaButton = ({ meta }: { meta: Record<string, unknown> }) => {
                            onClick={copyToClipboard}
                            className='flex items-center gap-2 text-xs'
                        >
-                            <HugeIconsCopy className='w-3 h-3' />
+                            <Copy width={22} height={22} />
                            {copied ? 'Copied!' : 'Copy JSON'}
                        </ActionButton>
                    </div>
@@ -68,7 +67,7 @@ const ActivityLogMetaButton = ({ meta }: { meta: Record<string, unknown> }) => {
                className='w-6 h-6 rounded text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800/50 transition-colors duration-150 flex items-center justify-center'
                onClick={() => setOpen(true)}
            >
-                <HugeIconsCode className='w-3 h-3' />
+                <Code width={22} height={22} />
            </button>
        </>
    );
--- a/resources/scripts/components/elements/alert/Alert.tsx
+++ b/resources/scripts/components/elements/alert/Alert.tsx
@@ -1,7 +1,6 @@
+import { TriangleExclamation } from '@gravity-ui/icons';
 import clsx from 'clsx';

-import HugeIconsAlert from '../hugeicons/Alert';
-
 interface AlertProps {
    type: 'warning' | 'danger';
    className?: string;
@@ -21,10 +20,14 @@ const Alert = ({ type, className, children }: AlertProps) => {
            )}
        >
            {type === 'danger' ? (
-                <HugeIconsAlert fill='currentColor' className={'w-6 h-6 text-red-400 mr-2'} />
+                <TriangleExclamation
+                    width={22}
+                    height={22}
+                    fill='currentColor'
+                    className={'w-6 h-6 text-red-400 mr-2'}
+                />
            ) : (
-                // <HugeIconsAlert fill='currentColor'></HugeIconsAlert>
-                <HugeIconsAlert fill='currentColor' className='pl-2 mr-3 text-yellow-500' />
+                <TriangleExclamation width={22} height={22} fill='currentColor' className='pl-2 mr-3 text-yellow-500' />
            )}
            {children}
        </div>
--- a/resources/scripts/components/elements/dialog/Dialog.tsx
+++ b/resources/scripts/components/elements/dialog/Dialog.tsx
@@ -1,8 +1,8 @@
+import { Xmark } from '@gravity-ui/icons';
 import { Dialog as HDialog } from '@headlessui/react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useRef, useState } from 'react';

-import HugeIconsX from '../hugeicons/X';
 import { DialogContext, IconPosition, RenderDialogProps, styles } from './';

 const variants = {
@@ -117,7 +117,7 @@ const Dialog = ({
                                    {!hideCloseIcon && (
                                        <div className={'absolute right-0 top-0 m-4 p-2 opacity-45 hover:opacity-100'}>
                                            <button onClick={onClose} className='cursor-pointer'>
-                                                <HugeIconsX fill='currentColor' />
+                                                <Xmark width={22} height={22} fill='currentColor' />
                                            </button>
                                        </div>
                                    )}
--- a/resources/scripts/components/elements/dialog/DialogIcon.tsx
+++ b/resources/scripts/components/elements/dialog/DialogIcon.tsx
@@ -1,7 +1,7 @@
+import { Shield } from '@gravity-ui/icons';
 import clsx from 'clsx';
 import { useContext, useEffect } from 'react';

-import HugeIconsUserShield from '../hugeicons/UserShield';
 import { DialogContext, DialogIconProps, styles } from './';

 // const icons = {
@@ -19,8 +19,7 @@ export default ({ type, position, className }: DialogIconProps) => {

        setIcon(
            <div className={clsx(styles.dialog_icon, styles[type], className)}>
-                {/* <Icon className={'w-6 h-6'} /> */}
-                <HugeIconsUserShield fill='currentColor'></HugeIconsUserShield>
+                <Shield width={22} height={22} fill='currentColor' />
            </div>,
        );
    }, [type, className]);
--- a/resources/scripts/components/elements/table/PaginationFooter.tsx
+++ b/resources/scripts/components/elements/table/PaginationFooter.tsx
@@ -1,8 +1,7 @@
+import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';
 import clsx from 'clsx';

 import ActionButton from '@/components/elements/ActionButton';
-import HugeIconsChevronLeft from '@/components/elements/hugeicons/ChevronLeft';
-import HugeIconsChevronRight from '@/components/elements/hugeicons/ChevronRight';

 import { PaginationDataSet } from '@/api/http';

@@ -48,9 +47,9 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
                        size='sm'
                        onClick={() => onPageSelect(current - 1)}
                        disabled={current <= 1}
-                        className='w-8 h-8 p-0 flex items-center justify-center'
+                        className=' p-0 flex items-center justify-center'
                    >
-                        <HugeIconsChevronLeft fill='currentColor' className='w-3 h-3' />
+                        <ChevronLeft width={22} height={22} fill='currentColor' />
                    </ActionButton>
                    {pages.previous.reverse().map((value) => (
                        <ActionButton
@@ -87,9 +86,9 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
                        size='sm'
                        onClick={() => onPageSelect(current + 1)}
                        disabled={current >= total}
-                        className='w-8 h-8 p-0 flex items-center justify-center'
+                        className='p-0 flex items-center justify-center'
                    >
-                        <HugeIconsChevronRight fill='currentColor' className='w-3 h-3' />
+                        <ChevronRight width={22} height={22} fill='currentColor' />
                    </ActionButton>
                </div>
            )}