Skip to main content

Icons

HASH's custom icon set, with aliases, related icons, and animation options

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.

Use animations in code

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.

<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.

Style
Categories
Icon details

Hover over an icon to preview its details. Click to pin it here while you explore aliases, related icons, and animations.

172 icons

Sort by
Group by

Was this page helpful?

Colors

Eight shared palettes, from backgrounds to text. Explore each step, then choose a semantic token for its job.

Typography

HASH Sans for everyday reading and interaction, HASH Mono for technical text, and HASH Serif for occasional editorial emphasis. Text styles combine size, line height, and letter spacing.

Privacy