Skip to content

Icons

Jump to bottom
Edgar Mesquita edited this page Aug 10, 2026 · 7 revisions

Icons Ecosystem

eQuantic.UI provides a comprehensive and extensible icon ecosystem. It supports multiple popular icon sets out of the box, all integrated through a unified component model.

🚀 Quick Start

To use icons in your project, install the desired icon set package and the core components package.

dotnet add package eQuantic.UI.Components
dotnet add package eQuantic.UI.Lucide

Usage

Nothing to register. A pack is a catalog of IconGlyph — you name the glyph you want and the compiler inlines that one:

using eQuantic.UI.Lucide;

Glyph(LucideIcons.Search)
Glyph(LucideIcons.Check, size: 20)

Sizes are the §07 whitelist (16 / 20 / 24 / 32). For a size off that list, Vector(glyph, size) draws the same paths without the icon contract. Icon(...) is the factory for the framework's own curated Icons enum — see DeclarativeSurface for why the two have different names.

Because you name the glyph, nothing resolves at run time and two packs can never disagree about a name: there is no lookup to lose.

Package Description
eQuantic.UI.Lucide Beautiful & consistent icons (default set).
eQuantic.UI.Heroicons Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.
eQuantic.UI.RadixIcons A crisp set of 15×15 icons designed by the Radix UI team.
eQuantic.UI.TablerIcons Over 4200 pixel-perfect icons for web design.
eQuantic.UI.FontAwesome6.Solid The world's most popular icon set (Solid variant).
eQuantic.UI.FontAwesome6.Regular Font Awesome 6 Regular icons.
eQuantic.UI.FontAwesome6.Brands Font Awesome 6 Brand icons.
eQuantic.UI.Phosphor A flexible icon family for interfaces, diagrams, and more.
eQuantic.UI.SimpleIcons Over 3000 SVG icons for popular brands.
eQuantic.UI.BootstrapIcons Free, high quality, open source icon library with 2,000+ icons.
eQuantic.UI.Iconoir A high-quality set of 1500+ open-source icons.
eQuantic.UI.MaterialSymbols Google's Material Symbols — 16,284 glyphs, the largest pack here.

Pack glyphs, write-once

An icon package is a catalog of IconGlyph — target-neutral path data, so the same entry serves the web realizer as inline SVG and the native atlas as glyph geometry. Draw one with Glyph:

using eQuantic.UI.MaterialSymbols;

Glyph(MaterialSymbolsIcons.PlayArrowRounded)
Glyph(MaterialSymbolsIcons.ExpandMore, size: 20)

Glyph, not Icon: Icon is the factory for the framework's own curated Icons enum, and the declarative surface has no overloads — see DeclarativeSurface. Sizes are the §07 whitelist (16 / 20 / 24 / 32); for anything off it, Vector(glyph, size) draws the same paths without the icon contract.

You pay for what you name. eqc inlines only the glyphs a page actually references: a page using two Material Symbols glyphs emits a 627-byte module, out of a catalog whose source is ~8 MB. Pack size is a build-time cost, not a download.

Since 0.2.0-preview.7

A note on Material Symbols

Google ships Material Symbols as a variable font with FILL, wght, GRAD and opsz axes, and the three cuts (outlined, rounded, sharp) are what those axes resolve to. A GPU display list cannot draw a font, so this package carries the resolved paths instead: the cut lives in the icon's name — Home, HomeRounded, HomeSharp — and there is no FILL axis, so X and XOutline are two entries. Names are the Iconify ones in PascalCase, so material-symbols:play-arrow-rounded is PlayArrowRounded.

It is also the heaviest pack the framework publishes (~13 MB of assembly against Phosphor's 8). If you need a handful of icons and have a choice, a smaller set costs less to carry.

🏗️ Technical Architecture

The icon system is built on a provider-based architecture:

  1. IIconProvider: Interface in eQuantic.UI.Core for resolving SVGs.
  2. Icon Component: Unified component in eQuantic.UI.Components that uses registered providers.
  3. Asset Management: Icons are rendered as lightweight SVGs directly in the DOM, maintaining full CSS styling compatibility (colors, sizes, animations).

🔄 Custom Icon Sets

You can implement your own icon provider by implementing IIconProvider and registering it in DI:

public class MyIconProvider : IIconProvider
{
    public bool CanResolve(string name) => /* check if icon exists */;

    public IComponent? CreateIcon(string name, int size = 24, double strokeWidth = 2,
        string color = "currentColor", string? className = null)
    {
        // Return SVG component
    }
}

// Register in Program.cs
builder.Services.AddSingleton<IIconProvider, MyIconProvider>();

Clone this wiki locally