# Icons (/foundations/icons)



The custom icon set ships as `@hashintel/ds-icons`. Hover over an icon to preview its details. Click to pin it in the sidebar while you explore aliases, related icons, and animation options. Choose an effect and try it on the large preview.

**Outline** and **Filled** share the same shapes and interactions. Filled symbols keep details such as keyholes, checkmarks, and dice pips transparent, so they work on any background. Open symbols such as arrows and equations retain their line artwork in both styles. The expanded filled set is included in this preview and awaits the next package release.

Aliases are the `@hashintel/ds-components` icon names that resolve to the same icon. Related icons are distinct symbols for connected concepts or actions, such as Place and Add Place.

Prefer **one-time animations** for hover feedback and completed actions. They play once, then settle. **Continuous animations** repeat and should signal ongoing activity, such as loading or playback. Either mode can run on hover or keyboard focus; the grid uses one-time motion by default, including Person Running.

Both modes respect reduced-motion preferences. Animation should support a clear text label, never replace one.

<details>
  <summary>
    Use animations in code
  </summary>

  The explicit `animationMode` and `hoverEffect` API is included in this preview and awaits the next `@hashintel/ds-icons` release.

  Set `animationMode="once"` or `animationMode="continuous"`. Use `hoverEffect` to choose an effect for the enclosing control's hover and focus states, or omit it to use the icon's own hover behavior.

  ```tsx
  <button type="button">
    <HashIcon name="personRunning" hoverEffect="bounce" animationMode="once" />
    Run simulation
  </button>

  <button type="button">
    <HashIcon name="personRunning" hoverEffect="bounce" animationMode="continuous" />
    Preview running
  </button>

  <HashIcon name="loading" effect="rotate" animationMode="continuous" active={isLoading} />
  ```

  For event-driven feedback, pass `effect` and change `trigger` to replay it. A continuous hover effect stops when the pointer and keyboard focus leave the control. Set `active={false}` to stop an explicit effect; `LoadingIcon` keeps its continuous loading animation by default.
</details>

<IconCatalog />