Azin Ghasemi - UX/Product Designer

Icon Categories

System Icons

Used across UI

View in Library

Action Icons

Represent user actions

Add

Navigation Icons

Sidebar / tab symbols

Status Icons

Feedback / state

Media Icons

File or media interactions

Social / Brand Icons

External integrations

Icon Structure

Icon

├─Vector / SVG (the graphic)

├─Optional Container (background, padding)

├─

States: default, hover, active, disabled

default

hover

active

disabled

└─Theme variants: light / dark

light

dark

Visual Breakdown

Basic Icon (Vector/SVG)

Pure icon without container

Icon with Container

Icon inside a container (for buttons)

Interactive States

default

hover

active

disabled

Color changes for different interaction states

Theme Variants

light

dark

Adapts to light and dark themes

Token Categories

Color

Controls tone

default

action

success

error

disabled

icon-color-default

icon-color-on-primary

icon-color-error

icon-color-disabled

Size

12 / 16 / 20 / 24 / 32 px

12px

16px

20px

24px

32px

icon-size-xs/sm/md/lg/xl

Stroke Width

1.5 px

1px

1.5px

2px

icon-stroke-width

Container Size (optional)

40 px circle for icon buttons

32px

40px

48px

icon-container-size-md

Radius (optional)

{radius-full}

none

md

lg

full

icon-radius

Motion

For hover feedback

static

hover scale

icon-hover-scale

motion-duration-100

Icon Sizes

icon-size-xs

12px • Status dots, small badges

12px

Paired with:text-xs

icon-size-sm

16px • Inline with small text, inputs

16px

vs

12px

Paired with:text-sm

icon-size-md

20px • Default size (most common)

20px

vs

16px

Paired with:text-md

icon-size-lg

24px • Card actions, toolbars

24px

vs

20px

Paired with:text-md–text-lg

icon-size-xl

32px • Empty states, hero visuals

32px

vs

24px

Paired with:text-xl

icon-size-xxl

48px • Splash / onboarding illustrations

48px

vs

32px

Icon Context

Default / Neutral

Gray-600

{color-icon-primary}Gray-600

On Brand Surface

White

{color-text-on-primary}White

On Neutral Surface

Gray-700

{color-icon-on-bg}Gray-700

Action / Interactive

Brand tone

{color-brand-500}Brand tone

Success

Green

{color-success-500}Green

Warning

Yellow

{color-warning-500}Yellow

Error

Red

{color-error-500}Red

Disabled

Muted gray

{color-gray-400}Muted gray

Inverse / Dark Mode

Light tone

{color-gray-50}Light tone

Icon States

Default

Neutral gray / brand tone

Hover

Slightly darker or accent color

before

→

hover

Active

Brand-600 or accent shade

hover

→

active

Disabled

Gray-400

On Dark / On Brand

White

Icon Style Guidelines

Stroke weight

1.5px (consistent across all icons)

1px (thin)

1.5px ✓

2px (thick)

1.5px (consistent across all icons)

Corner radius

Round caps & joins (to feel smooth)

square

round ✓

Round caps & joins (to feel smooth)

Grid

Design icons on a 24×24 grid

24×24 grid

Design icons on a 24×24 grid

Alignment

Center in a square frame

misaligned

centered ✓

Center in a square frame

Naming convention

ic/ prefix → ic/search, ic/add, ic/trash

search-icon✗ wrong

ic/search✓ correct

ic/ prefix → ic/search, ic/add, ic/trash

File format

SVG (for scalable, token-friendly use)

PNG/JPG

→

SVG ✓

SVG (for scalable, token-friendly use)

Icons Inside Components

Button

Icon aligns left or right of text

Tokens Used:

icon-size-smicon-color-on-primary

Input Field

Prefix (search) or suffix (clear)

Prefix icon

Suffix icon (clear)

Tokens Used:

icon-size-smicon-color-placeholder

Switch / Toggle

Optional state visuals

Off

On

Tokens Used:

icon-size-xsicon-color-active

Badge

Center icon for symbolic labels

3Notification

Status

Tokens Used:

icon-size-xsicon-color-on-bg

Card / Table

Action icons (edit, delete)

John Doe

Action icons (edit, delete)

Tokens Used:

icon-size-mdicon-color-default