Icon Circle

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




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

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.

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.

Available Props