This page documents the CSS class system Nerd Fonts provides for embedding icons in web pages. It covers the @font-face declaration in css/nerd-fonts-generated.css, the base .nf class and its aliases, the nf-{vendor}-{name} naming convention, and how to use these classes in HTML. It also documents the status of removed Material Design Icons classes introduced in v3.0.0.
For the JSON data file that drives CSS generation, see Glyph Names JSON. For an overview of web integration as a whole, see Web and CSS Integration.
css/nerd-fonts-generated.css is the primary CSS artifact for web use. It is generated from glyphnames.json by build scripts and must not be edited by hand. The file has three sections:
| Section | Lines | Content |
|---|---|---|
| Header comment | 1–6 | Version metadata |
@font-face block | 8–14 | Font registration |
| Base classes | 16–27 | .nf, .nerd-font, .nerd-fonts |
| Per-icon classes | 29+ | .nf-{vendor}-{name}:before for every glyph |
Sources: css/nerd-fonts-generated.css1-27
@font-face Declarationcss/nerd-fonts-generated.css8-14
@font-face {
font-family: 'NerdFontsSymbols Nerd Font';
/* @TODO you need to adjust the path to the font: */
src: url("../fonts/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
The declaration registers the font family name 'NerdFontsSymbols Nerd Font'. The @TODO comment at line 10 is intentional: the font path ../fonts/Symbols-2048-em Nerd Font Complete.woff2 is relative to the CSS file location and must be adjusted to match the consumer's project layout before use.
The referenced font file is the Symbols-only variant — it contains only icon glyphs, not Latin text. This is the same font used by the terminal fallback mechanism described in Using with Terminal Emulators.
Sources: css/nerd-fonts-generated.css8-14
css/nerd-fonts-generated.css16-27
Three CSS selectors share the same base rule:
| Class | Notes |
|---|---|
.nf | Primary, short-form |
.nerd-font | Long-form alias |
.nerd-fonts | Plural alias |
Properties applied by all three:
| Property | Value |
|---|---|
font-family | 'NerdFontsSymbols Nerd Font' |
font-style | normal |
font-weight | normal |
font-variant | normal |
text-transform | none |
line-height | 1 |
-webkit-font-smoothing | antialiased |
-moz-osx-font-smoothing | grayscale |
The base class configures the font and rendering settings only. It does not insert a glyph. The glyph codepoint is injected by the specific icon class via a ::before pseudo-element.
Sources: css/nerd-fonts-generated.css16-27
Every icon class follows this pattern:
.nf-{vendor}-{icon_name}:before {
content: "\xxxx";
}
nf- is the fixed Nerd Fonts namespace prefix.{vendor} is a short token identifying the upstream icon set.{icon_name} is the normalized icon name: lowercase, words separated by underscores.content value is the Unicode codepoint in the Private Use Area assigned to that glyph.Example from Font Awesome:
.nf-fa-heart:before {
content: "\f004";
}
Both .nf and the icon-specific class must appear on the same element.
Anatomy of a class name:
Sources: css/nerd-fonts-generated.css29-32 glyphnames.json1
Each vendor prefix corresponds to an upstream icon set. The prefix is used in both the key names in glyphnames.json and in the CSS class names (prefixed with nf-).
| CSS Prefix | JSON Key Prefix | Icon Set |
|---|---|---|
.nf-cod- | cod- | VS Code Codicons |
.nf-custom- | custom- | Custom Nerd Fonts icons |
.nf-dev- | dev- | Devicons |
.nf-extra- | extra- | Extra icons (progress bars, spinners) |
.nf-fa- | fa- | Font Awesome |
.nf-md- | md- | Material Design Icons (new range, v3.0.0+) |
.nf-oct- | oct- | GitHub Octicons |
.nf-pl- | pl- | Powerline |
.nf-ple- | ple- | Powerline Extra |
.nf-seti- | seti- | Seti UI |
.nf-weather- | weather- | Weather Icons |
.nf-linux- | linux- | Linux Logo icons |
The complete list of all glyph names and their codepoints is in glyphnames.json. See Glyph Names JSON for the file's schema.
Vendor prefix to icon set mapping:
Sources: css/nerd-fonts-generated.css29-2992 glyphnames.json1
Option 1 — Remote hosted CSS (nerdfonts.com):
This is the URL shown in the cheat sheet examples. The hosted version handles the font path automatically.
Option 2 — Self-hosted:
css/nerd-fonts-generated.css to your project.Symbols-2048-em Nerd Font Complete.woff2 to the location expected by the @font-face src property.src path at css/nerd-fonts-generated.css11 to match your layout.<head>.Apply both the base class and the specific icon class to any inline element:
The <i> tag is conventional (matching Font Awesome's pattern) but any inline element will work. Both classes must be on the same element: .nf sets the font family and rendering, and the icon class (e.g. nf-fa-heart) inserts the glyph via ::before.
Rendering mechanism:
Sources: bin/scripts/data/cheatsheet-foot.txt14-24 css/nerd-fonts-generated.css16-27
How glyphnames.json becomes classes in css/nerd-fonts-generated.css:
See Glyph Names JSON for how glyphnames.json is structured and generated.
Sources: css/nerd-fonts-generated.css1-6 glyphnames.json1
With the v3.0.0 release, the Material Design Icons were updated and reassigned to a new Unicode codepoint range. The old nf-mdi-* classes no longer map to glyphs present in the font files. They remain in the cheat sheet for reference only, marked as removed.
The replacement classes use the nf-md-* prefix. To find a replacement for a specific removed icon (e.g. nf-mdi-altimeter), search the cheat sheet for the base name (altimeter) — the matching nf-md-* result is the current equivalent. Some MDI icons were dropped entirely with no replacement.
| Old class pattern | Status | Replacement pattern |
|---|---|---|
.nf-mdi-* | Removed — no longer in font files | .nf-md-* |
For the history of this change and codepoint reassignments, see Version History.
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.