Animated SVG icons for DASH React interfaces
DS Icons provides HASH's SVG icon set for React, with adjustable stroke weight, hover feedback, and state transitions. Browse the icon explorer on hash.design to choose an icon and preview its appearance and motion.
View on GitHub
View package source code in our hash monorepo
View on npm
or use npm install @hashintel/ds-icons
Install the icons and their styled-system dependency in a React 19 project:
npm install @hashintel/ds-icons @hashintel/ds-helpers
The package requires React 19.x, React DOM 19.x, and @hashintel/ds-helpers version ^0.2.2.
Add the icon preset and build information to your application's existing Panda configuration. Preserve the other presets and include paths your project uses.
import { dsIconsPandaPreset } from "@hashintel/ds-icons/panda-preset";
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
presets: [dsIconsPandaPreset],
include: [
"./src/**/*.{ts,tsx}",
"./node_modules/@hashintel/ds-icons/dist/panda.buildinfo.json",
],
});
Run your application's Panda code generation after updating the configuration. Panda generates the icon styles and animation keyframes; the package does not include a separate stylesheet.
Use HashIconProvider to set defaults for a group of icons. Named components such as PlayIcon render a specific icon.
import { HashIconProvider, PlayIcon } from "@hashintel/ds-icons";
export const PlayButton = () => (
<HashIconProvider size={20} weight={500}>
<button type="button">
<PlayIcon aria-hidden="true" />
Play
</button>
</HashIconProvider>
);
Use HashIcon with a name when the icon is chosen dynamically. hashIconNames lists the available names. For DS Components, pass hashIconPack to its IconProvider to use this set for component icons.
Keep a visible text label alongside an icon where practical. Give an icon-only button an accessible name describing its action, and hide decorative icons from assistive technology. Keep status information available in text rather than relying on animation alone.
See the icon usage and motion guidance for examples. Check the installed package's API before using animation options introduced in newer releases.