Icon
Icons are visual symbols that enhance clarity and provide functional context.
Search
Overview
The Icon component is a visual element used for both decorative and interactive purposes. It is categorized into two distinct types based on its functionality and variations
Non-functional
Functional
9+
Non-functional Icons: Purely visual and static icons, offering size variations but no state variations.
Functional Icons: Interactive icons equipped with Status component toggling (on/off), intent variations (Brand, Primary)and state variations (Enabled, Hovered, Focused, and Pressed).
Variations
The icon component has different variations designed to meet various design needs.
Small
Medium
Large
xLarge
16px
24px
32px
48px
Brand
Primary
9+
9+
Functional icon doesn't support size variations. It only comes with 24x24 px Medium (default) size. Size variations will be available in the next patch.
Intent
Only supported in Functional Icons
Brand, Primary
Enabled
Hovered
Focused
Pressed
9+
9+
9+
9+
Intent
Only supported in Functional Icons
Brand, Primary
Size
Only supported in Non-functional Icons in the present time
Small, Medium (default), Large, xLarge