Icon

Installation

1. Install the package.

npm install @hashintel/ds-components

2. Import the component.

import { Icon } from "@hashintel/ds-components";

export const FlowRunStatus = () => (
  <span>
    <Icon name="circleCheck" size="sm" /> Flow completed
  </span>
);

When to use

When not to use

Examples

Basic

name picks a glyph from the set. Icons render at md and are hidden from assistive technology by default.

Sizes

Five fixed steps: xxs, xs, sm, md (the default), and lg. Match the step to the surrounding text or control — sm pairs with body text, md and up with headings and empty states.

Color

Glyphs fill with currentColor, so an icon takes the surrounding text color — including the hover and state colors of a parent component. There is no color prop; set a text color on the icon or a wrapper.

Accessibility

What Icon provides

• Renders aria-hidden="true" by default, so decorative icons are invisible to assistive technology.
• Setting alt switches the SVG to role="img" with the text as its aria-label, announcing it like an image.

What you must do

• Set alt only when the icon carries meaning nearby text doesn't — labelling an icon that sits next to the same words announces it twice.
• Describe the meaning, not the glyph: alt="Private entity type", not alt="Lock".
• Never attach click handlers to a bare Icon — interactive glyphs belong on Button, which provides focus and an accessible name.

API reference

Icon

Styling

• Use --icon-size to set a custom size for an icon.