Icon Component

Configuration Options
Theme Options


The icon component can show a variety of icons from our library. These icons can have custom colors as well.


Configuration Options


Expected Type: Icon Name

The icon to show. We have a pre-defined list of icons to choose from. Use the dropdown that shows up to select the icon.


Expected Type: Color

The color for the icon


  • Click: Triggers whenever the icon is clicked.
  • Double Click: Triggers whenever the icon is clicked twice in quick succession.
  • Right Click: Triggers whenever the icon is right-clicked.
  • Mouse Enter: Triggers whenever the mouse starts hovering over the component.
  • Mouse Leave: Triggers whenever the mouse stops hovering over the component.

Theme Options

  • Icon Color: The icon's primary color. (String | Hex)
  • Padding: The icon's padding. (Number | Pixels)
  • Shadow: The icon's shadow. (Shadow)
  • Border: The icon's border. You can also specify the radius for the edges. (Border)
  • Background Color: The icon's background color. (String | Hex)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →