StyledOcticon

Design

Development

Table of contents

Table of contents

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

Default example

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

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

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

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

Name	Type	Default	Description
ariaLabel	String		Specifies the `aria-label` attribute, which is read verbatim by screen readers
icon	Octicon		Octicon component used in the component
size	Number	16	Sets the uniform `width` and `height` of the SVG element
verticalAlign	String	`text-bottom`	Sets the `vertical-align` CSS property

2 contributors