How many essentional ui icons are there?

139 unique icons, each in 6 styles, for 834 definitions in the essentional-ui entry point.

Are the Essentional Ui icons free to use?

Yes. @rchernando/solar-icons is published on npm under an open licence and the essentional-ui set is included in the package.

Can I import only one essentional ui icon?

Yes — import the single export you need from "@rchernando/solar-icons/essentional-ui". Anything you do not import is tree-shaken away.

Essentional Ui Icons for Angular

Name: Solar Icons for Angular
Author: rchernando

139 icons · 6 styles each · @rchernando/solar-icons/essentional-ui

There are 139 Essentional Ui icons in the Solar Icons library — 11.2% of the 1,246 icons in the library, which makes it the 1st largest of the 37 categories. Every glyph is drawn on a 24x24 grid and exported in 6 style variants, so the set accounts for roughly 834 icon definitions on its own.

These are icons for the primitives every interface needs — add, close, check, menu, info, danger. You will normally place them in buttons, dialogs, toasts, form validation and empty states, and they are the first set literally every application, which is why it is the largest set here tends to pull in. Icons such as Accessibility, Add Circle, Add Square and Augmented Reality cover the obvious cases; further in you will find Accessibility, Close Square, Explicit and Home Add Angle, which handle the states people forget to design for.

All 139 Essentional Ui icons

battery-charge-minimalistic

battery-full

battery-full-minimalistic

battery-half

battery-half-minimalistic

battery-low

battery-low-minimalistic

box

cat

confetti-minimalistic

cup

paw

posts-carousel-horizontal

posts-carousel-vertical

slider-minimalistic-horizontal

slider-vertical

slider-vertical-minimalistic

trash-bin-minimalistic

trash-bin-minimalistic2

Style variants in the Essentional Ui set

Each of the 139 icons ships as 6 separate exports: Bold, Bold Duotone, Linear, Outline, Broken and Line Duotone. Linear is the safe default for essentional ui in a dense layout; Bold reads better at small sizes and on coloured surfaces; the duotone pair adds a second opacity layer when you want depth without introducing another colour token.

bold

bold-duotone

linear

outline

broken

line-duotone

Installing the Essentional Ui icons

Import from the "@rchernando/solar-icons/essentional-ui" entry point rather than the package root — that is what keeps the other 36 categories out of your bundle. Register the icons you need with provideSolarIcons, either once in the application config or inside the providers array of the route that uses them, and render <solar-icon> with the icon name. The SVG is inlined, so there is no runtime fetch and no flash of missing icon.

bash

npm i @rchernando/solar-icons

typescript

import { AccessibilityBold, AddCircleBold, AddSquareBold } from '@rchernando/solar-icons/essentional-ui';

html

<solar-icon name="accessibility" iconStyle="bold" size="24px" />
<solar-icon name="add-circle" iconStyle="bold" size="24px" />
<solar-icon name="add-square" iconStyle="bold" size="24px" />

Essentional Ui icons FAQ

How many essentional ui icons are there?: 139 unique icons, each in 6 styles, for 834 definitions in the essentional-ui entry point.
Are the Essentional Ui icons free to use?: Yes. @rchernando/solar-icons is published on npm under an open licence and the essentional-ui set is included in the package.
Can I import only one essentional ui icon?: Yes — import the single export you need from "@rchernando/solar-icons/essentional-ui". Anything you do not import is tree-shaken away.

Other icon categories

Sets that are commonly used next to Essentional Ui: Face Emotions Stickers (21), Files (15), Electronic Devices (89) and Design Tools (29).

37 categories, 1,246 icons. Search the whole library or read the usage patterns.