CircleOcticon

Use CircleOcticon to render any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline.

React

ready

Storybook|Source

This component will be removed in PRC's next major release (v38). Instead of using CircleOcticon, you may replace the component with specific icon imports from @primer/octicons-react and utilize customized styling. For internal usage, use the CircleOcticon Primer Recipe instead.

React examples

Default

<CircleOcticon
  icon={CheckIcon}
  style={{backgroundColor: 'var(--bgColor-success-emphasis)', color: 'var(--fgColor-onEmphasis)'}}
  aria-label="Changes approved"
/>

<CircleOcticon
  icon={CheckIcon}
  style={{backgroundColor: 'var(--bgColor-success-emphasis)', color: 'var(--fgColor-onEmphasis)'}}
  aria-label="Changes approved"
/>

Props

CircleOcticon

Name	Default	Description
icon		`Octicon`
size	`32`	`number` Set the width and height of the icon in pixels.
sx Deprecated		`SystemStyleObject`