CircleOcticon

CircleOcticon renders any Octicon with a circle background; it's a wrapper component for the StyledOcticon and Badge components.

Pro tip: For a complete list of Octicons, visit the documentation site on GitHub.

Default example

<Flex
    my='3'
  flexDirection={{
    sm: 'column',
    md: 'initial'
  }}
    justifyContent='space-evenly'
    alignItems='center'
>
  <CircleOcticon my={2} mx={2} icon={'telescope'} size={32} />
  <CircleOcticon my={2} mx={2} icon={'heart'} size={32} />
  <CircleOcticon my={2} mx={2} icon={Rocket} size={32} />
  <CircleOcticon my={2} mx={2} icon={Check} size={32} />
  <CircleOcticon my={2} mx={2} icon={'graph'} size={32} />
  <CircleOcticon my={2} mx={2} icon={'radio-tower'} size={32} />
  <CircleOcticon my={2} mx={2} icon={Check} size={32} />
</Flex>

With various schemes (color flavors)

<Flex
  my='3'
  flexDirection={{
    sm: 'column',
    md: 'initial'
  }}
  justifyContent='space-evenly'
  alignItems='center'
>
  <CircleOcticon my={2} mx={2} icon={'telescope'} size={32} />
  <CircleOcticon my={2} mx={2} icon={'heart'} size={32} scheme="success" />
  <CircleOcticon my={2} mx={2} icon={Rocket} size={32} scheme="error" />
  <CircleOcticon my={2} mx={2} icon={Check} size={32} scheme="pending" />
  <CircleOcticon my={2} mx={2} icon={'graph'} size={32} scheme="warning" />
  <CircleOcticon my={2} mx={2} icon={'radio-tower'} size={32} scheme="gray" />
  <CircleOcticon my={2} mx={2} icon={Check} size={32} scheme="purple" />
</Flex>

Additional examples with other prop values

<Flex
    my='3'
  flexDirection={{
    sm: 'column',
    md: 'column',
    lg: 'initial'
  }}
    justifyContent='space-evenly'
    alignItems='center'
>
  <CircleOcticon my={2} icon={Telescope} size={48} color='white' bg="gray.5" padding={2} />
  <CircleOcticon my={2} icon={'squirrel'} size={256} iconSize={128} shadow='medium' color='white' scheme="warning" padding='0' />
  <CircleOcticon icon={'rocket'} size={128} iconSize={86} shadow='medium' color='white' bg="purple.5" padding={4} />
</Flex>

System props

CircleOcticon components get BACKGROUND, COMMON, and FLEX system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
isStringdivsets the HTML tag for the outer component element
iconOcticonOcticon component used in the component, https://octicons.github.com/
sizeNumber32used to set the width and height of the component. Minium height and width size constraint to 24 pixels
iconSizeNumbersize valueused to set the width and height of the icon
schemeStringsets the circle octicon to a pre-defined scheme, e.g. disabled, error, pending, success, warning
radiusString or Numbersets the badge radius to a pre-defined scheme, e.g. none, round, square, 1, 2, 3, ...
shadowStringsets the badge box-shadow to a pre-defined elevation size, e.g. small, medium, or large
paddingNumber2used to adjust the padding (top, right, bottom, left) of the icon container
colorStringInheritsused to set the color value of the icon
bgStringwhiteused to set the background of the icon container