Skip to main content
Bedrock Design System

System Icon

Utility component for rendering Bedrock system icons.

AccessibilityPermalink to: Accessibility

System Icon has role="presentation" to explicitly mark it as purely decorative, preventing assistive technologies from misinterpreting it as conveying meaningful information.

ExamplesPermalink to: Examples

System iconPermalink to: System icon

Use the name prop to render a system icon (see list of system icons).

Open
import { SystemIcon } from "@peakon/bedrock/react/assets/SystemIcon";

function Snippet() {
  return <SystemIcon name="utility-ai-sparkle-search" />;
}

Current colorPermalink to: Current color

System Icon will inherit uses currentColor i.e. the inherited color from the parent element.

Open
import { SystemIcon } from "@peakon/bedrock/react/assets/SystemIcon";

function Snippet() {
  return (
    <span style={{ color: "red" }}>
      <SystemIcon name="utility-ai-sparkle-search" />
    </span>
  );
}

SizesPermalink to: Sizes

System Icon is available in 7 sizes: 12, 16, 20, 24 (default), 32, 40, and 48.

Open
import { SystemIcon } from "@peakon/bedrock/react/assets/SystemIcon";
import { Inline } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Inline spacing={8} alignItems="center">
      <SystemIcon name="utility-ai-sparkle-search" size={12} />
      <SystemIcon name="utility-ai-sparkle-search" size={16} />
      <SystemIcon name="utility-ai-sparkle-search" size={20} />
      <SystemIcon name="utility-ai-sparkle-search" size={24} />
      <SystemIcon name="utility-ai-sparkle-search" size={32} />
      <SystemIcon name="utility-ai-sparkle-search" size={40} />
      <SystemIcon name="utility-ai-sparkle-search" size={48} />
    </Inline>
  );
}

Props TablePermalink to: Props Table

SystemIconPermalink to: SystemIcon

Props extend from HTML Image Element(external link), with the omission of role and style

NameTypeDescriptionDefaultRequired
nameSystemIconName

See System Icon names.

—Yes
size12 | 16 | 20 | 24 | 32 | 40 | 48

The width and height (in pixels) of the System Icon.

24No