# Icons & Emoji

Tesserae exposes a unified, strongly typed icon set through UIcons (Fluent-inspired icon set) and Emoji enums, plus helpers to render them in components.

Use Icon(...) to render icons as standalone components:

var rocket = Icon(UIcons.Rocket); //By default, icons render in Regular, Small size
var rocket = Icon(UIcons.Rocket); //By default, icons render in Regular, Small size
var settings = Icon(UIcons.Settings, UIconsWeight.Regular, TextSize.Small);
var party = Icon(Emoji.ConfettiBall, TextSize.Medium);

Factory helpers and icon overloads are defined in UI.Components.cs, with dedicated Icon component support for both UIcons and Emoji.

Many components accept icons directly. For example, Button.SetIcon supports both enums:

var save = Button("Save").SetIcon(UIcons.Save, color: Theme.Primary.Foreground);
var celebrate = Button("Yay").SetIcon(Emoji.ConfettiBall);

Button.SetIcon overloads for UIcons and Emoji are available on the Button component.

• UIcons is a large icon enum used throughout the component library (sidebar buttons, dropdowns, toolbars, etc.).
• Emoji is an enum representing emoji glyphs for quick inline usage.

When you pick an enum value, Tesserae converts it into the appropriate CSS class or glyph at render time.

For using custom icons, you can use any css class via the helper UIconHelper.AsUIcon(...). For example, if you would like to use Font Awesome icons, you could use them as follows:

var icon = Icon(UIconHelper.AsUIcon("fa-solid fa-rocket"));

Just don't forget to import the respective font and css files in your h5.json file.