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

import React from 'react'

import IconCircle from 'playbook-ui'

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

export default IconCircleDefault

Size

import React from 'react'
import { IconCircle } from 'playbook-ui'

const IconCircleSizes = (props) => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="xxs"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="xs"
      />
      <br />
      <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

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

import React from 'react'

import IconCircle from 'playbook-ui'

const IconCircleColor = (props) => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="sm"
          variant="royal"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="orange"
      />
      <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

With Emoji

The Icon Circle also allows you to pass in an HTML emoji in place of an icon if needed. To do so, pass any emoji or its hexa/decimal ref (see here) as a string to the icon prop as shown in the code snippet below.

import React from 'react'

import IconCircle from 'playbook-ui'

const IconCircleEmoji = (props) => {
  return (
    <div>
      <IconCircle
          icon="😁"
          size="sm"
      />
      <br/>
      <IconCircle
          icon="&#128525;"
          size="md"
          variant="red"
      />
      <br/>
      <IconCircle
          icon="&#x1F389;"
          size="lg"
          variant="teal"
      />
    </div>
  )
}

export default IconCircleEmoji

Things to Avoid

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

UI Samples using Icon Circle Kit

Get the full picture. See how this kit is used in our samples.

Crowdsourced Posts

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat