Styled System

Stable
Not reviewed for accessibility

Source

On this page

The @primer/styled-octicons package wraps icon components from @primer/octicons-react with system props, making them easier to style in projects that use styled system—like Primer React.

Install

npm install @primer/styled-octicons

Usage

@primer/styled-octicons exports each icons as a named export. This allows you to import only the icons you need:

import {AlertIcon} from '@primer/styled-octicons'

export () => (
  <AlertIcon color="red.6" mr={2} />
)

System props

All icon components in @primer/styled-octicons get color and space system props as well as the sx prop. Read the Primer React System Props documentation for a full list of available props.

Props

In addition to system props, icon components in @primer/styled-octicons accept the same props as components in @primer/octicons-react:

Name	Type	Default	Description
aria-label	String		Sets the `aria-label` attribute of the `<svg>`. If no `aria-label` is defined, `aria-hidden` will be set to `true`.
className	String		Sets the `class` attribute on the `<svg>`.
size	Number \| `"small"` \| `"medium"` \| `"large"`	`16`	The height of the icon. Width will be scaled proportionally.
verticalAlign	`"middle"` \| `"text-bottom"` \| `"text-top"` \| `"top"` \| `"unset"`	`"text-bottom"`	The vertical alignment of the `<svg>`.

Edit this page on GitHub

4 contributors

Last edited by jonrohan on April 16, 2021