StyledOcticon renders an Octicon with common system props, including color, backgroundColor, margin, and padding.

Pro tip: The StyledOcticon component has been repurposed and wrapped with the @bristlecone/system sauce to extend Primer's original intent for this component, however, their respective component should be considered anytime you are looking to represent data or information that is more oriented toward GitHub-landia.

Default example

<StyledOcticon icon={Check} size={32} color="green.5" mr={2} />
<StyledOcticon icon={X} size={32} color="red.5" />

System props

StyledOcticon components get COMMON system props. Read the System Props doc page for a full list of available props.

Component props

StyledOcticon passes all of its props except the common system props down to the Octicon component, including:

ariaLabelStringSpecifies the aria-label attribute, which is read verbatim by screen readers
iconOcticonOcticon component used in the component
sizeNumber16Sets the uniform width and height of the SVG element
verticalAlignStringtext-bottomSets the text-align CSS property