Icon

Small, symbolic graphic that communicates meaning at a glance

Figma

Not available

Status

Stable

HTML

Up to date

React

Up to date

Note

This is only an icon component. More information and guides are in the separate Icons section.

Design Usage

An icon is a graphic symbol designed to visually indicate the purpose of an interface element or to provide a visual representation of an accompanying text. Icons reinforce meaning, reduce text, and help users scan interfaces quickly.

When to Use

To support a label (e.g., “Download” with a download icon).

To convey common actions or statuses (edit, delete, success, error).

As a compact visual in lists, menus, buttons, and inputs.

When Not to Use

As the only indicator of meaning – pair with text when clarity matters.

For complex concepts that an icon can’t communicate reliably.

As decoration where it doesn’t clarify anything.

Best Practices

There are general recommendations which doesn’t have to be tightly coupled to our implementation. If you find that some features are missing, please contact the Spirit team.

Prefer standard, recognizable metaphors (don’t invent new ones).

Keep size consistent across contexts; align to pixel grid for crisp rendering.

Use icons to support labels; avoid icon-only actions except for universally known actions (then provide accessible names).

Ensure visual contrast is sufficient in all themes.