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 4 sizes: 12, 16, 20 and 24 (default).

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

function Snippet() {
  return (
    <>
      <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} />
    </>
  );
}

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

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

24No