# font-logos: distribution logos as an icon font you can install from npm
> font-logos is an icon font that packs the logos of Linux distributions and related open source projects into a single webfont with a CSS class per logo, published on npm and usable from a CDN. The fonts are generated from SVG vectors through fontforge or a Python fallback, and the trademark condition on the logos is the line to read first.
**lukas-w/font-logos** — An icon font providing popular linux distro's logos
- Repository: https://github.com/lukas-w/font-logos
- Website: https://lukas-w.github.io/font-logos
- Stars: 541 · Forks: 88
- Language: JavaScript
- License: Unlicense
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/lukas-w-font-logos
## The trademark condition is stated before anything else
font-logos is an icon font containing logos of popular Linux distributions and other open source software, and the very next line in the README is a condition rather than a feature, that all brand icons are trademarks of their respective owners and should only be used to represent the company or product to which they refer. That sentence does a lot of work in a project like this, because the whole value proposition is a set of marks owned by other people. Using a distribution logo to mean that distribution is the ordinary and legitimate case, and the note exists to say that a logo is not a generic decoration. It is also the reason the repository ships the original vector files, since the source artwork is what a reader would reach for if they needed a variant the font cannot give them. The licensing of the project itself is the Unlicense, which is the most permissive grant available and puts the code and the build tooling beyond restriction, and that is separate from the marks inside the font, which remain the property of their owners. The distinction is the one a reader has to keep straight, and it is why the note is placed above the installation instructions rather than in a legal section at the end.
## Installing it, and the two ways to load the CSS
Installation is either unpacking the latest release zip by hand or installing from npm, and the npm route is one command.
```bash
npm install font-logos
```
To use the font you include the stylesheet along with the fonts in your project and then use the CSS classes listed in the README, with the link tag pointing at the stylesheet.
```html
```
Alternatively you can link to it through a CDN such as jsDelivr, and the README gives the versioned URL form, which pins the version rather than tracking the latest.
```html
```
The npm package is the more interesting route, because the manifest publishes the stylesheet, the four font files in ttf, woff and woff2 formats, the vectors directory and the README. So the package is the whole distribution, not a pointer to it, and the vectors come along with it. The CSS class name follows a strict pattern, fl- followed by the project name in lowercase with dashes, so the Arch Linux logo is fl-archlinux and the Tux-like Ferris mascot is fl-ferris. Including the stylesheet and the font is all that is needed, since the class on an element does the rest.
## Using a glyph is one class on an empty element
The usage section is short because there is very little to it. You include an icon using the corresponding CSS class in an empty element, and the element in the README is an italic tag with the fl- class set.
```html
```
The placeholder in that class name is the actual project slug, so fl-archlinux for Arch Linux or fl-docker for Docker. There is one extra class, fl-fw, which the README describes as making a fixed width icon, and that solves the practical problem with icon fonts, that a glyph's advance width depends on its outline, so a row of icons in a menu does not line up unless every glyph is forced to the same width. For anything inserted by keyboard rather than by a template, the README gives a separate route, since a glyph of this font can be inserted on a GNU or Linux system by pressing Ctrl plus Shift plus u, releasing the keys and typing the code point, with f31a given as the example that inserts the Tux glyph. The README table also records the code point for every logo, so the keyboard route is usable rather than theoretical, and the same table maps each distribution to its CSS class and to an SVG file in the vectors directory.
## The build pipeline, and why the vector source is kept
The Makefile shows the generation pipeline, and it is more interesting than the end product. The build has a starting code point that is set to 0xf300, and the icon table in the README shows the code points allocated from there, with the entries running from 0xf300 through the 0xf35f range, which is a private use area block, and that is why the icons do not collide with a system font. The build inputs are the icons.tsv file, which is the source of truth for which logos exist and what they are called, the vectors directory, and a generated JSON file, which is produced by a node script. From there the font assets are built, and the rule is interesting: if fontforge is on the path it is used with its scripting interface, and otherwise a Python script is used instead. That fallback is what lets the project build on a machine without fontforge installed, at the cost of the two paths not necessarily producing identical output. The CSS and the other templated outputs are rendered from nunjucks templates through a node script, with the version read out of the package manifest and the copyright year generated from the current date, and the header image in the README is produced by rendering a preview page to PNG with wkhtmltoimage. The dev dependencies confirm the toolchain, with lodash.merge and nunjucks, and the package build script is simply make.
## Where font-logos is the wrong choice
The first limit is the obvious one. An icon font is monochrome and it is a rasterisation of a vector at a size you did not choose, so a logo that needs to appear in its brand colours, at a large size on a poster, or with a different weight per context, has to come from the SVG, and the vectors directory in the repository is where you would get it. The second is the one every icon font carries, that the glyphs are a single colour and inherit currentColor, which means a logo that is a wordmark with fine detail loses that detail at small sizes, and the distributions with wordmark logos are the ones that suffer. The third is the class naming convention. Everything is prefixed with fl-, which is good practice, but a page that also loads another icon font with similarly named classes has to be checked, and the README does not discuss how the font behaves when a glyph is missing from a newer version, which is a real hazard for a set that grows over time. The fourth is the currency of the set. The release history shows v1.4.0 in July 2026, v1.3.0 in October 2024 as the ten year anniversary release, and v1.2.0 in April 2024, so the set is refreshed, but a new distribution or a renamed project takes a pull request and a build, and a site that shows a hard-coded class for a project that has been renamed will show nothing. And the fifth is the trademark constraint again, which for a commercial site means someone has to decide whether a logo in a comparison table is representing the product, which is the normal case, or decorating a page, which is not.
## Conclusion
Adopt font-logos if you build something that displays distribution or project logos, such as a download page or a status dashboard, and you want one font file instead of a directory of SVGs. Skip it if you need the logos at arbitrary sizes with colour fidelity, since an icon font is monochrome and the original vectors exist in the repository. Verify first that the logo you need is in the list, that the trademark note fits your use, and that the class naming convention will not clash with an existing icon set on the same page.
## FAQ
### How do I install and use the font-logos icon font?
Install it with npm install font-logos, or download and unpack the latest release zip by hand. Include the stylesheet with a link tag, either from your own project at /assets/font-logos.css or from a CDN such as jsDelivr, then put the matching CSS class on an empty element, for example fl-archlinux for the Arch Linux logo, and add fl-fw for a fixed width icon.
### What does the font-logos package contain and how is it built?
The npm package publishes the stylesheet, the font in ttf, woff and woff2 formats, the vectors directory and the README. The build runs through make, starting from an icons.tsv table of the available logos, generating a JSON file with a node script, and then building the fonts with fontforge when it is on the path or with a Python script as a fallback, with the CSS rendered from nunjucks templates. The code point range starts at 0xf300.
### Can I use the font-logos logos freely in a commercial project?
The code and the build tooling are released under the Unlicense, but the README states that all brand icons are trademarks of their respective owners and should only be used to represent the company or product to which they refer. So a logo standing for its own project is the intended use, and using one as generic decoration is not.
## Sources
- [License: Unlicense](https://github.com/lukas-w/font-logos/blob/master/LICENSE)
- [lukas-w/font-logos on GitHub](https://github.com/lukas-w/font-logos)
- [Project website](https://lukas-w.github.io/font-logos)
- [README](https://github.com/lukas-w/font-logos/blob/master/README.md)
- [Releases](https://github.com/lukas-w/font-logos/releases)
---
Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/lukas-w-font-logos