Icon

A lazy loaded component to display graphical elements. It supports: Font Icons, SVG Icons and Image Icons (the default).

Webframe has 30,000+ built-in open source icons that you can use in any project. You can add your own icon pack by placing icon files in the static folder /static/icons/.

Set Icon to any text size using Tailwind CSS or Webframe UI classes and style variables. The same apply to Icon color, which is treated like text color.

Props

Prop	Type	Default	Description
name	Icon	Required	Icon name, can be empty string to be styled with custom CSS
font	Boolean		If `true`, use Font icon, instead of CSS masked image, which is the default
className	Class Name		CSS class names separated by space

Examples

Default Image Icon

LTR

Largest Font Icon

LTR

Arbitrary Icon Size

LTR

Theme Colors

LTR

Expand Image