For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt, and this page is available as Markdown at https://wallarm.github.io/design-system/foundations/icons.md.
Design System

    Icons

    Icons are React components exported from their own entry point:

    import { Search, TriangleAlert } from '@wallarm-org/design-system/icons';

export const IconExamples = () => (
  <>
    <Search size='md' />
    <TriangleAlert size='lg' title='Warning' />
  </>
);

    Size

    size takes inherit (the default) or a step from the icon scale: xs, sm, md, lg, xl, 2xl. With inherit, the icon follows the font size of its parent, so it lines up with the text around it.

    Accessibility

    Without title, an icon is decorative: it gets aria-hidden and assistive technology skips it. That is right when a text label sits next to it. When the icon is the only thing that carries meaning, pass title: the icon gets role='img' and the title becomes its accessible name.

    For an icon-only button, put the label on the button instead (aria-label), so the name sits on the element that is clicked.