Icon

Icon renders SVG icons from Iconify by name, for example fluent:grid-24-regular or circle-flags:us. Use it for consistent interface icons in buttons, navigation, menus, form field prefixes and suffixes, statuses, empty states, alerts, table actions, and toolbars.

Size icons with Tailwind classes like size-4, w-5, or h-5. Color them with text color classes or CSS variables. Do not use ngs-icon as a clickable action by itself; place it inside an NgStarter button such as button[ngsIconButton]. Use Avatar for people or entities, Badge for counters and compact labels, and real images or illustrations for large visual artwork.

The NgStarter Angular Icon component lets you render consistent SVG interface icons from installed Iconify icon sets. Use ngs-icon with a full Iconify name such as fluent:grid-24-regular or circle-flags:us for icons in NgStarter buttons, navigation, menus, form field prefixes and suffixes, statuses, metadata, empty states, alerts, announcements, table actions, toolbar actions, and compact flag markers. It includes examples for Symbols Icons (Default), Phosphor Icons, Circle Flags Icons, and Symbols icons.

Symbols Icons (Default)

Use default interface icons for common product actions, navigation, labels, and status markers. Pick names from an installed Iconify set and pass the full name to ngs-icon.

Phosphor Icons

Phosphor-style sets are useful when a product needs one consistent icon family with multiple visual weights. Keep the same family across a feature instead of mixing unrelated sets.

Circle Flags Icons

Flag icon sets are useful for compact country, region, or language markers. For selectable countries, prefer CountrySelect; use icons only when you need a visual marker inside existing UI.