glyphfox-universe weekly downloads statistics

glyphfox-universe

One glyphfox API over <!-- universe:total -->414,952<!-- /universe:total --> open license icons from established sets: Material Symbols, Material Design Icons, Fluent UI System Icons, IBM Carbon, Font Awesome Free, Bootstrap Icons, Heroicons, Phosphor, Lucide, Tabler, Remix Icon, Ionicons, Ant Design, Simple Icons and every other set in Iconify whose license allows redistribution and modification. A prefix:name resolver, instant search over names, tags and aliases, license metadata on every icon, the glyphfox style transforms on top, and bundler plugins that inline only the icons you use.

npm i glyphfox-universe

The package is small: it ships the code, a catalog of every set (counts, authors, licenses) and a compact search index (about 6 MB, under 2 MB compressed, loaded lazily). Icon drawings are never copied into it: each set loads on demand as one JSON file, from the @iconify-json/<prefix> packages on jsDelivr, or from a local install of @iconify-json/<prefix> or @iconify/json when there is one (Node reads those first). The data comes from @iconify/json <!-- universe:source -->2.2.547<!-- /universe:source --> (MIT); every set keeps its own license.

Quick start

import { getIcon, toSvg, search } from 'glyphfox-universe';

const icon = await getIcon('mdi:home');
// { name: 'mdi:home', body, viewBox: '0 0 24 24', width, height, stroke: false,
//   license: { spdx: 'Apache-2.0', title, url, kind: 'permissive', attribution: false, author, file } }

const svg = await toSvg('lucide:rocket', { size: 32, weight: 1.5, color: '#ff7a1a', animate: 'draw' });

const hits = await search('arrow left', { styles: ['outline'], licenses: ['permissive', 'public-domain'], limit: 20 });
// [{ name: 'lucide:arrow-left', prefix: 'lucide', icon: 'arrow-left', style: 'outline', brand: false, stroke: true }, ...]

With the glyphfox components, register the universe once and use any prefixed name wherever glyphfox takes a name:

import 'glyphfox-universe/glyphfox';
import { Icon } from 'glyphfox/react';

<Icon name="ph:rocket-launch" size={24} weight={1.5} />

<script type="module">
  import 'glyphfox/web';
  import 'glyphfox-universe/glyphfox';
</script>
<glyph-fox name="tabler:heart" animate="draw"></glyph-fox>

How names resolve (for the glyphfox packages)

1. A universe name is prefix:name, lower case: parseName('mdi:home') gives { prefix: 'mdi', name: 'home' }. Names without a prefix are glyphfox icons. Fusion and modifiers keep their syntax: cloud&mdi:lock:side, tabler:file+check@tr.
2. import 'glyphfox-universe/glyphfox' calls registerIconSource(prefix, source) of glyphfox for every shipped prefix (PREFIXES, <!-- universe:sets-count -->245<!-- /universe:sets-count --> of them). Each source has get(name), which answers from memory (icons already loaded or registered offline), and load(name), which loads the set and resolves the icon.
3. The source hands glyphfox { body, viewBox, set, license, author }, plus mode: 'fill' for icons that are not stroke based. glyphfox normalizes the viewBox onto its 24 grid, so stroke based icons keep their strokes and the weight axis, animate="draw", modifiers and Fusion work on them. Color icons (emoji, flags, logos in color) render best with toSvg, which keeps gradients and masks.
4. getIcon(name) follows Iconify aliases (with their rotations and flips, baked into the body), loads the set once per page (a small cache keeps the most recent sets) and attaches the license record of the set. Unknown names resolve to null; prefixes that are not shipped reject, so a set with a license that is not allowed can never be used through this API.
5. getIconSync(name) and toSvgSync(name) answer without a promise for icons already in memory, which is what server rendering and the offline bundles use.

Stroke based sets

icon.stroke is true when the drawing uses currentColor strokes. For those icons weight (the stroke width on the 24 grid, scaled to the icon box, with the glyphfox optical compensation below 24 px), corners and the draw animation apply. These sets are stroke based (60 percent of their icons or more), with their native stroke width:

<!-- universe:stroke:start -->

lucide (2), tabler (2), feather (2), iconoir (1.5), hugeicons (1.5), icon-park-outline (4), akar-icons (2), andrsrxn (1.5), arcticons (1), bytesize (2), charm (1.5), ci (2), codex (2), covid (1.5), gala (15.992), glyphs (6), grommet-icons (2), guidance (1), heroicons-outline (2), humbleicons (2), iconamoon (2), iconmind (2.5), iconoven (1.5), keyline-icons (2), lets-icons (2), lucide-lab (2), majesticons (2), matita (1.6), meteor-icons (2), proicons (1.5), quill (2), si (1.5), streamline-cyber (1), streamline-guidance (1), system-uicons (0.933), vadivam (2), wordpress (1.5).

<!-- universe:stroke:end -->

Many other sets have stroke based icons too (for example the outline themes of Heroicons, Solar and MingCute); the search index flags every icon, so search(q, { stroke: true }) finds them across all sets.

API…