Skip to content
hightouchUI

Design system

1b80640

Icons

Usage

All Hightouch icons are custom SVGs that share the same sizing and color properties.

Baseline

Icons can be aligned against the baseline of text elements using the baseline prop.

Color

Color is inherited from the parent element by default. Customize it via color prop if needed.

Size

Icons have width and height set to 1em, which inherits the font size of the parent element and adjust the icon's size accordingly. This makes them work like a font icon.

361 icons

Props

All icons

NameDefaultDescription
baselinefalsebooleanAlign the icon against text's baseline.
color

—

ColorThe fill color of the icon.
aria-label

—

stringAccessible name for an icon that carries meaning on its own, rather than one sitting next to copy that already names it. Pair it with role="img" so the name is exposed consistently across browsers and assistive tech. Leave both unset when the icon is decorative.
role

—

AriaRoleARIA role. Typed as the full union rather than just "img" so an icon still satisfies the ComponentType<SVGAttributes<SVGElement>> slots that Button, MenuItem and others take.