Icon Circle

Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.

See this kit in action in our sample UI

Default

Code Example

import React from 'react'

import IconCircle from '../_icon_circle'

const IconCircleDefault = (props) => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="md"
          {...props}
      />
    </div>
  )
}

export default IconCircleDefault

Size

Code Example

import React from 'react'
import { IconCircle } from '../..'

const IconCircleSizes = (props) => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="sm"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="md"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="lg"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="xl"
          {...props}
      />
    </div>
  )
}

export default IconCircleSizes

Color

Customize your icon circle by passing one of our seven base colors to the variant prop: royal blue orange purple teal red yellow green

Code Example

import React from 'react'

import IconCircle from '../_icon_circle'

const IconCircleColor = (props) => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="sm"
          variant="royal"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="orange"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="purple"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="teal"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="red"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="yellow"
          {...props}
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="green"
          {...props}
      />
    </div>
  )
}

export default IconCircleColor

Icon Circle

See this kit in action in our sample UI

Things to Avoid

UI Samples using Icon Circle Kit

Crowdsourced Posts