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


PBIconCircle(FontAwesome.rocket)

Size


VStack(alignment: .leading, spacing: Spacing.small) {
  PBIconCircle(FontAwesome.rocket, size: .small)
  PBIconCircle(FontAwesome.rocket, size: .x1)
  PBIconCircle(FontAwesome.rocket, size: .large)
}

Color


VStack(spacing: Spacing.small) {
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data1))
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data2))
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data3))
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data4))
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data5))
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data6))
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data7))
  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data8))
}

Props

Name	Type	Description	Default	Values
Icon	`PlaybookGenericIcon`	Sets the kit's Icon
Size	`PBIcon.IconSize`	Changes the size of the Circle Icon	`.x1`	`xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10`
Color	`Color`	Changes color of the Icon and background	`.status(.neutral)`	`Color`

UI Samples using Icon Circle Kit

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

Crowdsourced Posts

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