Icon

Example

KeystarUI uses the amazing Lucide icons.

Usage

Imports

Each icon is exposed from its own entry point to reduce the bundle size and improve performance. Icon entry points follow the pattern:

import { nameOfTheIcon } from '@keystar/ui/icon/icons/nameOfTheIcon';

When you need multiple icons, import from multiple entry points:

import { editIcon } from '@keystar/ui/icon/icons/editIcon';
import { trashCanIcon } from '@keystar/ui/icon/icons/trashCanIcon';

Accessibility

Icons are a great way to communicate detail, but require formatting to ensure that they are accessible for all users.

Content within static elements can be made accessible to assistive technologies using the visuallyHidden prop on the Text component.

Danger: This action is not reversible.

While interactive elements can often employ an aria-label or aria-labelledby attribute.

<ActionButton aria-label="Download">
  <Icon src={downloadIcon} />
</ActionButton>

Props

Color

Icons accept a semantic color, which is applied to the SVG stroke.

If no color prop is provided, icons will inherit the color of their parent.

Size

Icons are available in a variety of sizes, with "regular" as the default.

The size of the icon should generally map to the size of its containing element. The icon’s stroke width is relative to the size of the icon.

Stroke scaling

Mostly reserved for internal components, disabling strokeScaling can be useful in cases where the visual weight of “small” icons needs to be stronger.