@glofonts/icons

GloFonts icon library. Universal by default, React as a sub-export.

Install

npm install @glofonts/icons

Usage

Vanilla JS / any framework (default export)

The default export is an object keyed by handle. No framework required.

import icons from '@glofonts/icons';

// Look up by handle
const arrow = icons['arrow-right'];
console.log(arrow.svg); // '<svg ...>...</svg>'
console.log(arrow.name); // 'Arrow Right'
console.log(arrow.category); // 'Interface'

// Or iterate for a browse view
for (const icon of Object.values(icons)) {
  document.body.insertAdjacentHTML('beforeend', icon.svg);
}

Tree-shakable named exports are also available:

import { arrowRight } from '@glofonts/icons';
console.log(arrowRight.svg);

Raw sub-export (explicit path)

Identical to the default export. Use this if you prefer to be explicit:

import icons, { arrowRight } from '@glofonts/icons/raw';

Manifest

The same schema as the CDN manifest, so the two are interchangeable.

import manifest from '@glofonts/icons/json';
console.log(manifest.version); // 'v1.4.0'
console.log(manifest.count); // 42

for (const icon of manifest.icons) {
  console.log(icon.handle, icon.category, icon.tags);
}

Or fetch the raw file:

import manifest from '@glofonts/icons/json/manifest.json';

React

React components are in the /react sub-export. Tree-shakable by default.

import { ArrowRight, Vibeo } from '@glofonts/icons/react';

export function MyComponent() {
  return (
    <div>
      <ArrowRight size={24} />
      <Vibeo size={32} color="#5b8cff" />
    </div>
  );
}

Every React component accepts:

• size (number | string) — width and height. Defaults to 24.
• color (string) — sets the SVG's color, which the icon uses via currentColor. Defaults to currentColor.
• title (string) — accessible label. When present, adds a <title> element.
• All standard SVG props.

Package layout

@glofonts/icons            → raw (default export)
@glofonts/icons/raw        → same thing, explicit
@glofonts/icons/json       → manifest (schema matches the CDN)
@glofonts/icons/react      → React components

Compatibility

• The default export and /raw and /json work in any modern JS environment: browser, Node 20+, Bun, Deno, Vite, Webpack, Rollup, esbuild.
• The /react sub-export ships pre-compiled .js files (not .jsx), so no bundler configuration is needed. React 17+ or a compatible automatic-JSX runtime is required.

CDN alternative

Every icon in every release is also available as a raw .svg file on the GloFonts CDN, and the manifest is served from there too:

https://glofonts-cdn.pages.dev/manifest.json
https://glofonts-cdn.pages.dev/icons/{handle}.svg

The CDN requires no install and always serves the latest release. Use whichever fits your build.

License

MIT.

Brand Disclaimer: Brand logos and product marks are trademarks of their respective owners. The MIT license covers the code representation of these icons, but does not grant any trademark usage rights. Please do not use brand logos for any purpose except to represent the company, product, or service to which they refer.