Data Nexus

Interface · We run it ourselves

Icon systems

The libraries that supply an application's icons: Font Awesome, Phosphor and Lucide are the three we ship.

An icon set looks like a taste decision and is mostly a delivery decision. The question is not which shapes are nicer but whether the reader downloads a library, a font and a runtime to see twenty of them.

fontawesome.com

01/Why this one

  1. 01

    In an application, a library earns its weight. The set is open — a screen added next quarter needs a shape nobody has picked yet — and the components bring accessible defaults and consistent sizing that would otherwise be rebuilt badly. Font Awesome, Phosphor and Lucide each sit in our production applications for that reason.


  2. 02

    On a marketing site the same library is a bad trade, because the set is closed. This site's stack ledger needs exactly the shapes its entries call for and grows only when an entry is written, so the paths are inlined at build time and no font, package or runtime is fetched. The reader pays for the shapes on the page and nothing else.


  3. 03

    Half the technologies worth naming have no brand glyph at all. A row where some entries carry a logo and the rest carry blank space reads as unfinished, so the entries without one take a typographic tile in the same square, the same rule and the same ink. The consistency is the design; the icon is incidental.


  4. 04

    Brand marks are drawn in a single ink here, never in vendor colours. A grid of coloured logos is the interchangeable capability page every agency publishes, and rendering them monochrome is a small structural refusal to become one.


  5. 05

    Licence terms are part of the choice, not an afterthought. Font Awesome Free is CC BY 4.0 and its attribution obligation is recorded in the source that uses it. An icon set whose terms cannot be met by a client shipping commercially is not a candidate, however good the shapes are.

02/What you can check

An entry that cannot point at something you can open, run or read does not compile. That is a property of the type, not a promise in a paragraph.

In our code
DYD-main, dyd-site and status-kvo-app — @fortawesome/react-fontawesome in production applications, alongside lucide-react.

In our code
rakairport and seahero — @phosphor-icons/react, chosen where a lighter and more uniform set suited the interface.

On this site
This collection: thirteen brand glyphs inlined as paths and a typographic tile for every entry without one. View the source and count the network requests it makes for them.Open it
03/Where it stops

Invariant

Inlining works because the set is closed and small. An application whose icon needs grow with every screen should load the library and take the caching that comes with it; hand-managing paths at that scale trades a solved problem for a chore. The threshold is roughly where a designer starts choosing icons without asking a developer.