Skip to content

Files

octicons_styled

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
May 4, 2020
May 1, 2020
Apr 27, 2020
Apr 24, 2020
Apr 24, 2020
Apr 20, 2021
Apr 24, 2020
Apr 24, 2020
Apr 24, 2020
Feb 4, 2025
Feb 22, 2023
Oct 30, 2024
Apr 20, 2021
Oct 30, 2024
Oct 30, 2024

@primer/styled-octicons

npm version

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>.