Icon

Every icon in icons/svg is exported as a React component. The file name gives the component name: edit-2.svg is Edit2Icon and star-bold.svg is StarBoldIcon. The full set is on the Icons page.

import { CalendarIcon, Edit2Icon } from '@beyul/sulmu-ui'

Source · Figma

Examples

Sizes

2xs is 12px, xs 16 (the default), sm 20, md 24, lg 32 and xl 40.

import { CalendarIcon, Flex } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={4} align="center">
      <CalendarIcon size="2xs" />
      <CalendarIcon size="xs" />
      <CalendarIcon size="sm" />
      <CalendarIcon size="md" />
      <CalendarIcon size="lg" />
      <CalendarIcon size="xl" />
    </Flex>
  )
}

Colour and label

Icons are drawn with currentColor. Outline icons are stroked; icons whose name ends in Bold are filled.

import { Flex, StarBoldIcon, StarIcon, TickCircleIcon, Warning2Icon } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={4} align="center">
      {/* Icons take the text colour of their parent. */}
      <span style={{ color: 'var(--su-colors-status-success-solid)' }}>
        <TickCircleIcon size="md" label="Confirmed" />
      </span>
      <span style={{ color: 'var(--su-colors-status-warning-solid)' }}>
        <Warning2Icon size="md" label="Needs attention" />
      </span>
      <span style={{ color: 'var(--su-colors-brand-fg)' }}>
        <StarIcon size="md" />
        <StarBoldIcon size="md" />
      </span>
    </Flex>
  )
}

Props

Every icon component takes the same props.

Prop	Type	Default	Description
size	"2xs" | "xs" | "sm" | "md" | "lg" | "xl"	xs	2xs 12, xs 16, sm 20, md 24, lg 32, xl 40 (the Figma Icon sizes).
label	string	-	Accessible name. Without it the icon is decorative and hidden from assistive tech.

Icons also accept every svg attribute except children.

Accessibility and usage

• Without label, an icon has aria-hidden="true". That is right when text next to it says the same thing, as in a button with a label.
• With label, the icon has role="img" and that accessible name.
• The components are tree-shakeable: an app only ships the icons it imports.
• The SVG files are published too, as @beyul/sulmu-ui/icons/<name>.svg.