Content Icons
For icons you write into content. The Stroke Rounded font ships with the system, so any glyph it carries works by class name: hgi hgi-stroke plus hgi-{name}, where the name is the icon's name on hugeicons.com.
The font carries 4,126 glyphs while hugeicons.com lists close to 6,000, so not every icon on the site has a class. If hgi-{name} renders nothing, pick another icon or use its SVG directly.
<i class="hgi hgi-stroke hgi-search-01" style="font-size: 32px"></i>
UI Icons
For icons inside controls and chrome. These are inlined in the stylesheet as SVG masks, so a close button or a validation mark paints with its CSS instead of waiting on the font. The class is nds-icon plus nds-hgi-{name}, and only the names in the catalog below exist.
<button class="nds-btn nds-secondary-outline">
<i class="nds-icon nds-hgi-search-01" aria-hidden="true"></i>
<span class="nds-label">Search</span>
</button>
UI Icon Catalog
The 86 classes the inline layer answers to. Click a tile to copy its class. Some glyphs are drawn for the system, so a name it shares with the font is not the same drawing: nds-icon-riyal and hgi-riyal differ.
Interface Glyphs
Brand and Bespoke Marks
Glyphs outside the HugeIcons set, so they carry an nds-icon- name: the store logos, the Saudi riyal symbol, and the small marks components paint themselves, such as the avatar placeholder and the checkbox tick.
Sizing and Color
Both layers behave like text: an icon is one em square and paints in the current text color, so it matches whatever it sits in. Change either with font-size and color, on the icon or on an ancestor.
<i class="hgi hgi-stroke hgi-notification-02" style="font-size: 16px"></i>
<i class="hgi hgi-stroke hgi-notification-02" style="font-size: 24px"></i>
<i class="hgi hgi-stroke hgi-notification-02" style="font-size: 40px; color: var(--icon-primary)"></i>
Built-in Features
What you get from the class alone
The font ships with the system and is served from your own domain. No third-party request, nothing to break if a CDN does.
Icon styles and the font load after the page paints, so content never waits on glyphs.
Icons stay hidden until they can paint, so you never see a fallback box or a late shift in the layout.
Use nds-hgi-arrow-next-01 and nds-hgi-arrow-prev-01 for forward and back: they follow reading direction, so one class is correct in Arabic and English. The left and right classes stay literal.
Icons follow the surrounding type and re-tint in dark mode with everything else.
Marks outside HugeIcons, such as the riyal symbol and the store badges, use the same classes.
Usage Guidelines
Best Practices
- Use the font (
hgi hgi-stroke hgi-{name}) for content: cards, lists, feature grids, editorial copy - Use the inline set (
nds-icon nds-hgi-{name}) for controls and chrome, where the icon must paint with the first frame - Copy names exactly, numeric suffix included:
hgi-arrow-left-01, nothgi-arrow-left. A name that does not exist renders nothing - For a next or back affordance, use the logical arrows (
nds-hgi-arrow-next-01,nds-hgi-arrow-prev-01). They mirror on LTR pages, so the same markup reads correctly in both directions. Reach forarrow-leftorarrow-rightonly when you mean that literal direction - Do not use the inline set for a one-off content icon. It is a fixed list every page carries, while the font already covers the catalog
- Size with
font-size, not width and height, and let color come from the surrounding text - Add
aria-hidden="true"to an icon next to a label. On an icon-only control, put thearia-labelon the control - Stay in one style. Only Stroke Rounded ships, and the other styles are not free
- Using no content icons? Set
use_hgi_font: falsein_config.ymlto drop the font from every page
Icon Classes
| Class | Layer | Description |
|---|---|---|
hgi hgi-stroke hgi-{name} | Font | Any glyph the font carries. hgi-stroke is the family, hgi-{name} the glyph |
nds-icon nds-hgi-{name} | Inline | A registered icon painted as an SVG mask. nds-icon is the one em box, nds-hgi-{name} the glyph |
nds-icon nds-icon-{name} | Inline | The bespoke marks: nds-icon-riyal, nds-icon-quote, nds-icon-apple, nds-icon-google-play, nds-icon-huawei |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--nds-icon | unset | The mask an .nds-icon paints. Set it in CSS to swap the glyph without touching the markup |
--nds-icon-{name} | SVG data URI | One token per inline icon, for example --nds-icon-eye. Assign one to --nds-icon rather than pasting an SVG |
/* Swap the glyph from CSS, no markup change */
.my-toggle[aria-expanded="true"] .nds-icon { --nds-icon: var(--nds-icon-view-off); }
License and Attribution
The font is the free HugeIcons Stroke Rounded set, under the MIT License. The inline set mixes those glyphs with marks drawn for the system, which are MIT as part of NDS. Commercial use, modification, and redistribution are all permitted; the only condition is that the HugeIcons notice travels with the icons, and it is kept in the LICENSE file. No credit line is needed on your pages.
What Ships
| Asset | Source | License |
|---|---|---|
| Stroke Rounded icon font | HugeIcons free set | MIT, Copyright (c) 2025 Hugeicons |
| Inline icons taken from the font | HugeIcons free set | MIT, Copyright (c) 2025 Hugeicons |
| Inline marks drawn for the system | National Design System | MIT, part of NDS |
| Solid, bulk, duotone, twotone, sharp styles | Not included | Requires a HugeIcons Pro license |
Before You Add an Icon
- Take icons from the free Stroke Rounded style only. The paid styles carry a different license
- Download from hugeicons.com, which holds the full catalog and every canonical name
- Pro terms are on the HugeIcons license agreement page
- The MIT grant covers using the icons in a product, not repackaging the set as an icon library