Icon

Render a registered design-system SVG icon by name.

Icon is a client component ("use client") that looks up an SVG component by name in designSystemIcons (from @reactberry/system/icons) and renders it through Box, so styled-system props apply. Use it to place a registered icon by name inside buttons, labels and status messages.

IconUpload

IconPencil

IconGear

IconHouse

IconLock

IconLaunch

IconFile

IconCCheck

Import#

typescript

import { Icon } from "@reactberry/system/blocks";

Usage#

typescript

import { Icon } from "@reactberry/system/blocks";
import { Button, Text } from "@reactberry/system/elements";

export default function UploadButton() {
  return (
    <Button variant="primary" $size="small" display="flex" gap="xxsmall">
      <Icon icon="IconUpload" size="1rem" />
      <Text>Upload</Text>
    </Button>
  );
}

Examples#

In buttons#

Place the icon next to a label, or give an icon-only button an aria-label.

Upload

Theme colour and responsive size#

color accepts theme colours, and size accepts a responsive object.

Your trial ends in 3 days

Non-square sizing#

Set size="" so width and height apply.

API#

Icon#

Prop	Type	Default	Description
`icon*`	`string`	—	Name of a registered icon in `designSystemIcons`.
`width`	`string \| number`	`24px`	Used only when `size` is falsy.
`height`	`string \| number`	`24px`	Used only when `size` is falsy.
`color`	`string`	`currentColor`	Icon colour.
`size`	`string \| number \| object`	`24px`	Applied as both width and height. Takes precedence over `width` and `height`.

All other props are spread onto the Box rendered as the icon component.

Accessibility#

The rendered SVG has no accessible name. Decorative icons next to text need nothing extra; icon-only controls need an aria-label on the control.

Notes#

Registered names: Icon24Folder, IconArrowLeft, IconArrowRight, IconArrowSmDown, IconArrowSmRight, IconBan, IconCCheck, IconDCheck, IconDocFolder, IconDotsAnim, IconDownloadData, IconEAdd, IconERemove, IconFile, IconGear, IconHouse, IconLaunch, IconLock, IconMove3, IconOWarning, IconPencil, IconText, IconUpload, IconUserFocus.
An unknown name logs a console warning and renders nothing.
Because size defaults to "24px", passing width or height alone has no effect.