Icon

Ready to use


import {Icon} from '@primer/react-brand'

Examples

Default

<Icon icon={ZapIcon} />

Colors

<Stack direction="horizontal" gap={16} flexWrap="wrap" padding="none">
  <Icon icon={RocketIcon} color="default" />
  <Icon icon={RocketIcon} color="blue" />
  <Icon icon={RocketIcon} color="coral" />
  <Icon icon={RocketIcon} color="green" />
  <Icon icon={RocketIcon} color="gray" />
  <Icon icon={RocketIcon} color="indigo" />
  <Icon icon={RocketIcon} color="lemon" />
  <Icon icon={RocketIcon} color="lime" />
  <Icon icon={RocketIcon} color="orange" />
  <Icon icon={RocketIcon} color="pink" />
  <Icon icon={RocketIcon} color="purple" />
  <Icon icon={RocketIcon} color="red" />
  <Icon icon={RocketIcon} color="teal" />
  <Icon icon={RocketIcon} color="yellow" />
</Stack>

With background

<Stack direction="horizontal" gap={16} flexWrap="wrap" padding="none">
  <Icon icon={RocketIcon} hasBackground color="default" />
  <Icon icon={RocketIcon} hasBackground color="blue" />
  <Icon icon={RocketIcon} hasBackground color="coral" />
  <Icon icon={RocketIcon} hasBackground color="green" />
  <Icon icon={RocketIcon} hasBackground color="gray" />
  <Icon icon={RocketIcon} hasBackground color="indigo" />
  <Icon icon={RocketIcon} hasBackground color="lemon" />
  <Icon icon={RocketIcon} hasBackground color="lime" />
  <Icon icon={RocketIcon} hasBackground color="orange" />
  <Icon icon={RocketIcon} hasBackground color="pink" />
  <Icon icon={RocketIcon} hasBackground color="purple" />
  <Icon icon={RocketIcon} hasBackground color="red" />
  <Icon icon={RocketIcon} hasBackground color="teal" />
  <Icon icon={RocketIcon} hasBackground color="yellow" />
</Stack>

Sizes

<Stack direction="vertical">
  <Icon icon={CopilotIcon} size="small" />
  <Icon icon={CopilotIcon} size="medium" />
  <Icon icon={CopilotIcon} size="large" />
</Stack>

Component props

Name	Type	Default	Description
`icon`	`OcticonProps` \| `React.ReactElement<OcticonProps>`		The Octicon component to render
`color`	`'default'`, `'blue'`, `'coral'`, `'green'`, `'gray'`, `'indigo'`, `'lemon'`, `'lime'`, `'orange'`, `'pink'`, `'purple'`, `'red'`, `'teal'`, `'yellow'`	`'default'`	The color of the icon
`size`	`'small'`, `'medium'`, `'large'`, `20`, `24`, `28`, `32`, `36`, `40`, `44`	`'small'`	The size of the icon
`hasBackground`	`boolean`	`false`	Whether to show a background behind the icon
`className`	`string`		Additional CSS class for the icon

All other props are forwarded to the underlying SVG element.