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.
npm install @primer/styled-octicons@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} />
)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.
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>. |