Design System

Icons

Icon components built on unplugin-icons with Iconify. Supports block sizing and inline-in-text placement with optical nudge correction.

Gallery

All available icons. Pass the name string to the name prop.

xsmall

small

standard

large

xlarge

envelope

xsmall

small

standard

large

xlarge

twitter

xsmall

small

standard

large

xlarge

facebook

xsmall

small

standard

large

xlarge

xsmall

small

standard

large

xlarge

books

xsmall

small

standard

large

xlarge

mastodon

xsmall

small

standard

large

xlarge

bluesky

xsmall

small

standard

large

xlarge

rss

xsmall

small

standard

large

xlarge

magnifying-glass

xsmall

small

standard

large

xlarge

powerpoint

xsmall

small

standard

large

xlarge

pdf

xsmall

small

standard

large

xlarge

magnifying-glass-plus

xsmall

small

standard

large

xlarge

magnifying-glass-minus

xsmall

small

standard

large

xlarge

hash

xsmall

small

standard

large

xlarge

discord

xsmall

small

standard

large

xlarge

github

xsmall

small

standard

large

xlarge

spotify

xsmall

small

standard

large

xlarge

lloyd-atkinson

xsmall

small

standard

large

xlarge

color-palette

xsmall

small

standard

large

xlarge

vanilla-extract

xsmall

small

standard

large

xlarge

astro

xsmall

small

standard

large

xlarge

devices

xsmall

small

standard

large

xlarge

squares-four

xsmall

small

standard

large

xlarge

list

xsmall

small

standard

large

xlarge

xsmall

small

standard

large

xlarge

sun

xsmall

small

standard

large

xlarge

moon

xsmall

small

standard

large

xlarge

sun-horizon

xsmall

small

standard

large

xlarge

tree-evergreen

xsmall

small

standard

large

xlarge

layout

xsmall

small

standard

large

xlarge

book-open

xsmall

small

standard

large

xlarge

ruler

xsmall

small

standard

large

xlarge

seal-check

xsmall

small

standard

large

xlarge

prohibit

xsmall

small

standard

large

xlarge

dotnet

xsmall

small

standard

large

xlarge

csharp

xsmall

small

standard

large

xlarge

fsharp

xsmall

small

standard

large

xlarge

javascript

xsmall

small

standard

large

xlarge

typescript

xsmall

small

standard

large

xlarge

rust

xsmall

small

standard

large

xlarge

powershell

xsmall

small

standard

large

xlarge

node

xsmall

small

standard

large

xlarge

deno

xsmall

small

standard

large

xlarge

visual-studio

xsmall

small

standard

large

xlarge

visual-studio-code

xsmall

small

standard

large

xlarge

git

xsmall

small

standard

large

xlarge

github-actions

xsmall

small

standard

large

xlarge

azure

xsmall

small

standard

large

xlarge

docker

xsmall

small

standard

large

xlarge

ansible

xsmall

small

standard

large

xlarge

nuget

xsmall

small

standard

large

xlarge

npm

xsmall

small

standard

large

xlarge

pnpm

xsmall

small

standard

large

xlarge

vite

xsmall

small

standard

large

xlarge

vitest

xsmall

small

standard

large

xlarge

eslint

xsmall

small

standard

large

xlarge

biome

xsmall

small

standard

large

xlarge

grafana

xsmall

small

standard

large

xlarge

windows

xsmall

small

standard

large

xlarge

windows-1992

xsmall

small

standard

large

xlarge

ms-dos

xsmall

small

standard

large

xlarge

linux

xsmall

small

standard

large

xlarge

linux-debian

xsmall

small

standard

large

xlarge

unix

xsmall

small

standard

large

xlarge

Tone

Pass tone to set an explicit color independent of the surrounding context. Uses the same semantic tone scale as Text.

1
<Inline
2
    space="moderate"
3
    align="center">
4
    <Icon
5
        name="magnifying-glass"
6
        tone="neutral"
7
    />
8
    <Icon
9
        name="magnifying-glass"
10
        tone="secondary"
11
    />
12
    <Icon
13
        name="magnifying-glass"
14
        tone="critical"
15
    />
16
    <Icon
17
        name="magnifying-glass"
18
        tone="caution"
19
    />
20
    <Icon
21
        name="magnifying-glass"
22
        tone="positive"
23
    />
24
    <Icon
25
        name="magnifying-glass"
26
        tone="info"
27
    />
28
    <Icon
29
        name="magnifying-glass"
30
        tone="promote"
31
    />
32
</Inline>

Sizes

Five explicit sizes for block (standalone) icons: xsmall (16px), small (20px), standard (24px, default), large (32px), xlarge (48px).

1
<Inline
2
    space="moderate"
3
    alignY="center">
4
    <Icon
5
        name="github"
6
        size="xsmall"
7
    />
8
    <Icon
9
        name="github"
10
        size="small"
11
    />
12
    <Icon
13
        name="github"
14
        size="standard"
15
    />
16
    <Icon
17
        name="github"
18
        size="large"
19
    />
20
    <Icon
21
        name="github"
22
        size="xlarge"
23
    />
24
</Inline>

Inline

Pass inline to place an icon inside a line of text. The icon scales with the surrounding font size and applies an optical nudge correction to align with uppercase letterforms.

Follow me on GitHub or subscribe via RSS.

1
<Text element="p">
2
    Follow me on{' '}
3
    <Icon
4
        name="github"
5
        inline
6
    />{' '}
7
    GitHub or subscribe via{' '}
8
    <Icon
9
        name="rss"
10
        inline
11
    />{' '}
12
    RSS.
13
</Text>

Icon prop on Text

Pass an icon name to the Text component's icon prop. The icon inherits the Text tone automatically via CSS colour inheritance and scales with the font size.

Neutral text with an icon

Critical message with an icon

Positive message with an icon

Caution message with an icon

Info message with an icon

1
<Stack space="small">
2
    <Text
3
        element="p"
4
        icon="magnifying-glass">
5
        Neutral text with an icon
6
    </Text>
7
    <Text
8
        element="p"
9
        tone="critical"
10
        icon="magnifying-glass-minus">
11
        Critical message with an icon
12
    </Text>
13
    <Text
14
        element="p"
15
        tone="positive"
16
        icon="magnifying-glass-plus">
17
        Positive message with an icon
18
    </Text>
19
    <Text
20
        element="p"
21
        tone="caution"
22
        icon="hash">
23
        Caution message with an icon
24
    </Text>
25
    <Text
26
        element="p"
27
        tone="info"
28
        icon="hash">
29
        Info message with an icon
30
    </Text>
31
</Stack>

Without inline

Without the inline prop the icon renders as a block element, breaking out of the text flow and sitting on its own line.

Follow me on GitHub or subscribe via RSS.

1
<Text element="p">
2
    Follow me on <Icon name="github" /> GitHub or subscribe via <Icon name="rss" /> RSS.
3
</Text>