Icons

The Arctic Design Kit leverages the @arctic-kit/icons package for all icon-related needs. This package provides a comprehensive collection of SVG icons, meticulously crafted to enhance user interfaces and elevate visual communication. Each icon is optimized for modern web applications and seamlessly integrates with React components.

By default, the icons in this package are outline icons and come with a className of "arctic-icon-medium", making it simple to apply common styles like width and height through global CSS rules. For example, the icons displayed below have a global width of 24px.

If you prefer solid icons, you can easily import them from @arctic-kit/icons/solid. When using solid icons, the className will be "arctic-icon-medium solid" to maintain consistency while differentiating the icon styles.

Acknowledgment: The icons integrated into the Arctic Design Kit are sourced from @heroicons, with both solid and outline variants standardized at a 24px size.

Variants

Color

Academic Cap

Adjustments Horizontal

Adjustments Vertical

Archive Box Arrow Down

Archive Box

Archive Box XMark

Arrow Down Circle

Arrow Down

Arrow Down Left

Arrow Down On Square

Arrow Down On Square Stack

Arrow Down Right

Arrow Down Tray

Arrow Left Circle

Arrow Left End On Rectangle

Arrow Left

Arrow Left On Rectangle

Arrow Left Start On Rectangle

Arrow Long Down

Arrow Long Left

Arrow Long Right

Arrow Long Up

Arrow Path

Arrow Path Rounded Square

Arrow Right Circle

Arrow Right End On Rectangle

Arrow Right

Arrow Right On Rectangle

Arrow Right Start On Rectangle

Arrow Small Down

Arrow Small Left

Arrow Small Right

Arrow Small Up

Arrow Top Right On Square

Arrow Trending Down

Arrow Trending Up

Arrow Turn Down Left

Arrow Turn Down Right

Arrow Turn Left Down

Arrow Turn Left Up

Arrow Turn Right Down

Arrow Turn Right Up

Arrow Turn Up Left

Arrow Turn Up Right

Arrow Up Circle

Arrow Up

Arrow Up Left

Arrow Up On Square

Arrow Up On Square Stack

Arrow Up Right

Arrow Up Tray

Arrow Uturn Down

Arrow Uturn Left

Arrow Uturn Right

Arrow Uturn Up

Arrows Pointing In

Arrows Pointing Out

Arrows Right Left

Arrows Up Down

At Symbol

Backspace

Backward

Banknotes

Bars 2

Bars 3 Bottom Left

Bars 3 Bottom Right

Bars 3 Center Left

Bars 3

Bars 4

Bars Arrow Down

Bars Arrow Up

Battery 0

Battery 100

Battery 50

Beaker

Bell Alert

Bell

Bell Slash

Bell Snooze

Bold

Bolt

Bolt Slash

Book Open

Bookmark

Bookmark Slash

Bookmark Square

Briefcase

Bug Ant

Building Library

Building Office 2

Building Office

Building Storefront

Cake

Calculator

Calendar Date Range

Calendar Days

Calendar

Camera

Chart Bar

Chart Bar Square

Chart Pie

Chat Bubble Bottom Center

Chat Bubble Bottom Center Text

Chat Bubble Left Ellipsis

Chat Bubble Left

Chat Bubble Left Right

Chat Bubble Oval Left Ellipsis

Chat Bubble Oval Left

Check Badge

Check Circle

Check

Chevron Double Down

Chevron Double Left

Chevron Double Right

Chevron Double Up

Chevron Down

Chevron Left

Chevron Right

Chevron Up Down

Chevron Up

Circle Stack

Clipboard Document Check

Clipboard Document

Clipboard Document List

Clipboard

Clock

Cloud Arrow Down

Cloud Arrow Up

Cloud

Code Bracket

Code Bracket Square

Cog 6 Tooth

Cog 8 Tooth

Cog

Command Line

Computer Desktop

Cpu Chip

Credit Card

Css

Cube

Cube Transparent

Currency Bangladeshi

Currency Dollar

Currency Euro

Currency Pound

Currency Rupee

Currency Yen

Cursor Arrow Rays

Cursor Arrow Ripple

Device Phone Mobile

Device Tablet

Divide

Document Arrow Down

Document Arrow Up

Document Chart Bar

Document Check

Document Currency Bangladeshi

Document Currency Dollar

Document Currency Euro

Document Currency Pound

Document Currency Rupee

Document Currency Yen

Document Duplicate

Document

Document Magnifying Glass

Document Minus

Document Plus

Document Text

Ellipsis Horizontal Circle

Ellipsis Horizontal

Ellipsis Vertical

Envelope

Envelope Open

Equals

Exclamation Circle

Exclamation Triangle

Eye Dropper

Eye

Eye Slash

Face Frown

Face Smile

Film

Finger Print

Fire

Flag

Folder Arrow Down

Folder

Folder Minus

Folder Open

Folder Plus

Forward

Funnel

Gif

Gift

Gift Top

Github

Globe Alt

Globe Americas

Globe Asia Australia

Globe Europe Africa

H 1

H 2

H 3

Hand Raised

Hand Thumb Down

Hand Thumb Up

Hashtag

Heart

Home

Home Modern

Identification

Inbox Arrow Down

Inbox

Inbox Stack

Information Circle

Italic

Key

Language

Lifebuoy

Light Bulb

Link

Link Slash

List Bullet

Lock Closed

Lock Open

Magnifying Glass Circle

Magnifying Glass

Magnifying Glass Minus

Magnifying Glass Plus

Map

Map Pin

Megaphone

Microphone

Minus Circle

Minus

Minus Small

Moon

Musical Note

Newspaper

No Symbol

Npm

Numbered List

Paint Brush

Paper Airplane

Paper Clip

Pause Circle

Pause

Pencil

Pencil Square

Percent Badge

Phone Arrow Down Left

Phone Arrow Up Right

Phone

Phone XMark

Photo

Play Circle

Play

Play Pause

Plus Circle

Plus

Plus Small

Power

Presentation Chart Bar

Presentation Chart Line

Printer

Puzzle Piece

Qr Code

Question Mark Circle

Queue List

Radio

Receipt Percent

Receipt Refund

Rectangle Group

Rectangle Stack

Rocket Launch

Rss

Scale

Scissors

Server

Server Stack

Shield Check

Shield Exclamation

Shopping Bag

Shopping Cart

Signal

Signal Slash

Slash

Sparkles

Speaker Wave

Speaker XMark

Square 2 Stack

Square 3 Stack 3 d

Squares 2 x 2

Squares Plus

Star

Stop Circle

Stop

Strikethrough

Sun

Swatch

Table Cells

Tag

Ticket

Trash

Trophy

Truck

Type Script Circle

Underline

User Circle

User Group

User

User Minus

User Plus

Users

Variable

Video Camera

Video Camera Slash

View Columns

Viewfinder Circle

Wallet

Wifi

Window

Wrench

Wrench Screwdriver

XCircle

XMark

Yarn

Usage with IconButton

import { Box, IconButton } from '@arctic-kit/snow';
import {
  ChevronDoubleDownIcon,
  CheckCircleIcon,
  ArrowDownLeftIcon,
  CloudArrowUpIcon,
} from '@arctic-kit/icons';

export default function Example() {
  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 16,
        padding: 8,
        flexWrap: 'wrap',
      }}
    >
      <IconButton>
        <ChevronDoubleDownIcon />
      </IconButton>
      <IconButton>
        <CheckCircleIcon />
      </IconButton>
      <IconButton>
        <ArrowDownLeftIcon />
      </IconButton>
      <IconButton>
        <CloudArrowUpIcon />
      </IconButton>
    </Box>
  );
}

Usage with Tooltips

import { Tooltip } from '@arctic-kit/snow';
import {
  ChevronDoubleDownIcon,
  CheckCircleIcon,
  ArrowDownLeftIcon,
  CloudArrowUpIcon,
} from '@arctic-kit/icons';
import { styled } from '@pigment-css/react';

const Container = styled.div({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  gap: 16,
  padding: 8,
  '& svg': {
    width: '24px',
  },
  flexWrap: 'wrap',
});

export default function Example() {
  return (
    <Container>
      <Tooltip message='Chevron double down icon'>
        <ChevronDoubleDownIcon />
      </Tooltip>
      <Tooltip message='Check circle icon'>
        <CheckCircleIcon />
      </Tooltip>
      <Tooltip message='Arrow down left icon'>
        <ArrowDownLeftIcon />
      </Tooltip>
      <Tooltip message='Cloud arrow up icon'>
        <CloudArrowUpIcon />
      </Tooltip>
    </Container>
  );
}

Usage with Buttons

import { Box, Button } from '@arctic-kit/snow';
import {
  ChevronDoubleDownIcon,
  CheckCircleIcon,
  ArrowDownLeftIcon,
  CloudArrowUpIcon,
} from '@arctic-kit/icons';

export default function Example() {
  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 16,
        padding: 8,
        flexWrap: 'wrap',
      }}
    >
      <Button prefix={<ChevronDoubleDownIcon />}>Double Down</Button>
      <Button prefix={<CheckCircleIcon />}>Check Circle</Button>
      <Button prefix={<ArrowDownLeftIcon />}>Arrow Down Left</Button>
      <Button prefix={<CloudArrowUpIcon />}>Cloud Arrow Up</Button>
    </Box>
  );
}

Colors Components