Skip to main content
Bedrock Design System

Category Icon

Utility component for rendering Bedrock category icons.

AccessibilityPermalink to: Accessibility

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

ExamplesPermalink to: Examples

Category iconPermalink to: Category icon

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

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

function Snippet() {
  return <CategoryIcon name="autonomy" />;
}

FormatsPermalink to: Formats

Category Group Icons can be rendered in SVG (default) or PNG format via the format prop.

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

function Snippet() {
  return (
    <>
      <CategoryIcon name="autonomy" format="svg" />
      <CategoryIcon name="autonomy" format="png" />
    </>
  );
}

Width and heightPermalink to: Width and height

Use the native HTML Image width and height attributes to set the size of the Category Group Icon.

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

function Snippet() {
  return <CategoryIcon name="autonomy" width="64" />;
}

Props TablePermalink to: Props Table

CategoryIconPermalink to: CategoryIcon

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

NameTypeDescriptionDefaultRequired
namestring

One of the Category Icon names (category.standard from peakon api).

—Yes
formatsvg | png

What format to render the icon in.

svgNo