Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

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.

PropTypeDefault
name*
Name of an icon.
string

Icon name is formed as follows: first comes the name of the set, then : and then the name of the icon in the set.

All sets can be viewed here https://icon-sets.iconify.design/ clicking on the icon in the set will show the full name, copy and paste into the name property in ngs-icon.

Before using an icon from a set install it with a command such as: npm i @iconify-json/tabler.

You can find all the sets via npm: https://www.npmjs.com/search?q=@iconify-json