Skip to main content Skip to navigation Skip to search

Icon

Icon Properties

Name Type Description
shape Changes the svg glyph displayed in the icon component. Defaults to the 'unknown' icon if the specified icon cannot be found in the icon registry.
size string | xs | sm | md | lg | xl | xxl Apply numerical width-height or a t-shirt-sized CSS classname
direction up | down | left | right Takes a directional value that rotates the icon 90° with the top of the icon pointing in the specified direction.
flip horizontal | vertical Takes an orientation value that reverses the orientation of the icon vertically or horizontally'
solid boolean Displays most icons in their "filled" version if set to `true`.
status neutral | info | success | warning | danger Changes color of icon fills and outlines
inverse boolean Inverts color of icon fills and outlines if `true`. Useful for displaying icons on a dark background.
badge neutral | info | success | warning | danger | inherit | warning -triangle | inherit-triangle}

Icon CSS Properties

Name
--color
--badge-color