Skip to content
Primer/React
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

On this page

StyledOcticon

Use StyledOcticon to render an Octicon as a component.
  • Alpha
  • Not reviewed for accessibility
On this page

Example

Props

StyledOcticon

NameTypeDefaultDescription
ariaLabel
string
Specifies the aria-label attribute, which is read verbatim by screen readers
icon
Component
Checks the input by default in uncontrolled modeName of the [Octicon component](https://primer.style/octicons/) used in the
color
string
Sets an override color for the Octicon. Compatible with colors from the [Primer color system](https://primer.style/primitives/colors)."
size
number
16Sets the uniform `width` and `height` of the SVG element
verticalAlign
string
text-bottomSets the `vertical-align` CSS property
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

Status

Alpha

  • Component props and basic example usage of the component are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has robust unit test coverage (100% where achievable).
  • Component has visual regression coverage of its default and interactive states.
  • Component does not introduce any axe violations.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component does not introduce any performance regressions.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
  • Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.