Icon Circle

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

Rails
React

Default

Code Example

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

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

export default IconCircleDefault

Size

Code Example

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

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

export default IconCircleSizes

Color

Code Example

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

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

export default IconCircleColor

Dark

Code Example

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

const IconCircleDark = () => {
  return (
    <div>
      <IconCircle
          dark
          icon="rocket"
          size="md"
      />
    </div>
  )
}

export default IconCircleDark

Dark Size

Code Example

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

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

export default IconCircleSizesDark

Dark Color

Code Example

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

const IconCircleColorDark = () => {
  return (
    <div>
      <IconCircle
          dark
          icon="rocket"
          size="sm"
          variant="royal"
      />
      <br />
      <IconCircle
          dark
          icon="rocket"
          size="sm"
          variant="blue"
      />
      <br />
      <IconCircle
          dark
          icon="rocket"
          size="sm"
          variant="purple"
      />
      <br />
      <IconCircle
          dark
          icon="rocket"
          size="sm"
          variant="teal"
      />
      <br />
      <IconCircle
          dark
          icon="rocket"
          size="sm"
          variant="red"
      />
      <br />
      <IconCircle
          dark
          icon="rocket"
          size="sm"
          variant="yellow"
      />
      <br />
      <IconCircle
          dark
          icon="rocket"
          size="sm"
          variant="green"
      />
    </div>
  )
}

export default IconCircleColorDark

Things to Avoid

Be careful of use cases where Icon Circle Button may need to be used instead.