Everything glyphfox can do

Install

npm install glyphfox
# Angular
npm install glyphfox-angular

glyphfox has no dependencies. React, Vue, Svelte, Solid, Preact, Qwik, Lit, Astro, React Native, Ember and Tailwind CSS are optional peer dependencies, used only when you import their entry points.

React

Each icon is a tree shakable forwardRef component named after the icon: arrow-right becomes ArrowRightIcon. className, style and every SVG attribute pass through to the svg.

import { HomeIcon, FileIcon, Icon, Fusion, MorphIcon, useMorph } from 'glyphfox/react';

export function App({ open, saved }) {
  return (
    <nav>
      <HomeIcon />
      <FileIcon size={20} weight={1.5} modifier={saved ? 'check' : undefined} />
      <Icon name="cloud&lock:overlap" variant="duotone" />
      <Fusion icons={['user', 'shield']} layout="badge" />
      <MorphIcon name={open ? 'x' : 'menu'} duration={300} />
    </nav>
  );
}

useMorph(name, options) returns icon data that morphs whenever the name changes, for custom renderers. registerIcons(icons) makes names available synchronously, for example during server rendering.

Vue

<script setup>
import { ref } from 'vue';
import { HomeIcon, Fusion, MorphIcon } from 'glyphfox/vue';
const playing = ref(false);
</script>

<template>
  <HomeIcon :size="32" color="#ff7a1a" variant="duotone" />
  <Fusion :icons="['file', 'check']" layout="badge" />
  <MorphIcon :name="playing ? 'pause' : 'play'" @click="playing = !playing" />
</template>

Props use the same names; in templates you can also write them in kebab-case (secondary-color). The useMorph(nameRef) composable mirrors the React hook.

Svelte

<script>
  import { HeartIcon, Fusion, morphStore } from 'glyphfox/svelte';
  let liked = $state(false);
  const icon = morphStore('menu');
</script>

<button onclick={() => (liked = !liked)}>
  <HeartIcon animate="pop" trigger="state" active={liked} variant={liked ? 'solid' : 'outline'} />
</button>
<Fusion icons={['message-circle', 'heart']} layout="overlap" />

For Svelte 5. Components ship as .svelte files compiled by your app. morphStore(name) is a store that morphs on every set(name).

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { iconHome, iconFile, iconCheck } from 'glyphfox';
import { provideGlyphFox } from 'glyphfox-angular';

bootstrapApplication(App, {
  providers: [provideGlyphFox({ icons: [iconHome, iconFile, iconCheck], defaults: { weight: 1.75 } })],
});

import { Component } from '@angular/core';
import { GlyphFoxIcon } from 'glyphfox-angular';

@Component({
  selector: 'app-toolbar',
  imports: [GlyphFoxIcon],
  template: `
    <gf-icon name="home"></gf-icon>
    <gf-icon name="file+check@tr" variant="duotone" [size]="20"></gf-icon>
    <gf-icon [icons]="['cloud', 'lock']" layout="overlap"></gf-icon>
  `,
})
export class Toolbar {}

glyphfox-angular is published in the Angular package format, built with ng-packagr. GlyphFoxIcon is a standalone component; provideGlyphFox registers icons by name and default props.

Web component and CDN

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>
<!-- or https://unpkg.com/glyphfox@1 -->

<glyph-fox name="home"></glyph-fox>
<glyph-fox name="file+check" size="32" weight="1.5"></glyph-fox>
<glyph-fox name="cloud&lock" layout="overlap"></glyph-fox>
<glyph-fox name="menu" morph duration="300"></glyph-fox>

One file with every icon, the element and the plain HTML runtime. Every prop is an attribute in kebab-case. With a bundler, import glyphfox/web, or glyphfox/web/element to register only your icons. The morph attribute animates every change of name.

Tailwind CSS

/* Tailwind v4 */
@import "tailwindcss";
@plugin "glyphfox/tailwind";

/* Tailwind v3: plugins: [require('glyphfox/tailwind')] */

<span class="gf-home text-2xl text-orange-500"></span>
<span class="gf-[file+check] gf-spin"></span>
<span class="gf-[cloud&lock]/side"></span>
<span class="gf-heart/solid-sharp-w1.5"></span>

Icons render as CSS masks in currentColor, so color, size and opacity utilities apply. After the slash you can join axes, a fusion layout or a badge corner with dashes. Tailwind v4 only accepts + and & inside brackets; v3 also accepts gf-file+check.

Plain HTML

<script type="module" src="https://cdn.jsdelivr.net/npm/glyphfox@1/dist/runtime/auto.js"></script>

<i data-glyph="search" data-size="20" data-variant="duotone"></i>

The runtime swaps every element with data-glyph for inline SVG, including elements added later. Props are data attributes in kebab-case.

JavaScript

import { toSvg, fuse, createMorph, search, getIcon, icons } from 'glyphfox';

toSvg('file', { size: 32, color: '#ff7a1a', variant: 'solid' });
toSvg('menu', { morphTo: 'x', trigger: 'hover' }); // CSS only morph
fuse(['cloud', 'lock'], { layout: 'overlap', gap: 1 }); // icon data that passes the lint
createMorph(getIcon('play'), getIcon('pause')).frame(0.5);
search('arrow', { limit: 10 });

The package also ships icons.json, sprite.svg, styles.css, glyphfox/core (the engine without icon data) and glyphfox/tools (lint and Fox-ify).

Frameworks and recipes

The same props come as packages for Solid, Preact, Qwik, Lit, Astro, React Native and Ember, and as hook free Server Components for React. Recipes cover Next.js, Nuxt, SvelteKit, Remix, Alpine and htmx.

Every framework and recipe

Props

The same props, names and meaning in React, Vue, Svelte, Angular, the web component and toSvg. Plus class and style, passed to the svg (or to the host element for Angular and the web component).

Name syntax

Shared by the web component, the CDN, Tailwind, the CLI, the Icon component and toSvg.

Variable axes

Weight runs from 1 to 3. Below 24 px the stroke grows a little so small icons keep their presence; absoluteWeight turns this off. Corners switch between round and sharp joins and caps. The solid style fills the closed outer shapes and cuts the inner lines out as negative space; it is computed at build time for the set and at render time for fusions and modifiers.

Morph

Paths are flattened into strands, matched with an optimal assignment, resampled to the same number of points, aligned and interpolated. Strands without a partner shrink and fade. Hand tuned hints cover the common pairs. Without JavaScript, toSvg with morphTo returns an SVG that morphs with a CSS d transition and cross fades where that is not supported.

Fusion

fuse combines 2 to 10 icons into one icon that still passes the lint. Layouts: overlap, side, stack, grid (2x2, 3x3 and 10 slots), orbit, badge and inside. Parts are scaled and snapped to the grid, and the part behind is trimmed around the part in front with a knockout gap. Options: layout, gap, weight, scale and offsets.

Living states

Each preset is a small stylesheet inside the SVG, so it works everywhere the SVG goes. draw traces the strokes in drawing order, shake swings from the top. Triggers: mount, hover (the icon or its direct parent), click (replays on each click) and state (plays while active). Reduced motion turns every animation off.

Modifiers

Eleven badges in four corners. The icon underneath is trimmed around the badge geometrically, so the result is a plain icon that passes the lint, in every weight.

CLI

npx glyphfox search arrow
npx glyphfox show file+check --variant solid
npx glyphfox copy heart --format jsx --size 32
npx glyphfox fuse cloud lock --layout overlap --out cloud-lock.svg
npx glyphfox morph menu x --trigger hover --out menu.svg
npx glyphfox build home search file+check --type sprite --out public/icons
npx glyphfox build --from icons.txt --type package --name @acme/icons
npx glyphfox lint my-icon.svg
npx glyphfox foxify any.svg --out fox.svg
npx glyphfox export android home search --out app/src/main/res

copy prints the snippet and puts it on the clipboard (formats: svg, jsx, vue, svelte, angular, html, tailwind, cdn, datauri). build makes a sprite, a CSS file with mask classes or a small package from a list. Every command takes the shared props as flags, such as --weight 1.5 --corners sharp.

Collections

Two signature collections ship with the package next to the base set: display, 60 icons drawn on a 48 grid for empty states, onboarding and large tiles, and isometric, 30 icons in isometric projection on the 24 grid. Write their names as display/NAME and isometric/NAME in toSvg, the web component, the CDN build and the Icon component. Their data comes from glyphfox/collections, and the React, Vue and Svelte components from glyphfox/react/collections, glyphfox/vue/collections and glyphfox/svelte/collections, so the default entries stay as small as before.

import { toSvg } from 'glyphfox';
import { DisplayCalendarClockIcon } from 'glyphfox/react/collections';

toSvg('display/calendar-clock', { size: 96, weight: 3 });
toSvg('isometric/cube', { variant: 'solid' });

<glyph-fox name="display/rocket-launch" size="64"></glyph-fox>

Size, color, weight, rotation, flips and the animation presets work on both. Display icons default to 48 px and measure weight in units of their 48 grid, so weight 2 keeps the drawn stroke. The solid and duotone styles, modifier badges, fusion and morphs are cut for the 24 grid: display icons stay outline, and a fusion or a modifier spec with one of them is an error. Isometric icons support every feature of the base set.

Icon rules

Original drawings only, on a 24 by 24 grid: viewBox 0 0 24 24, no fill, stroke currentColor, stroke width 2, round caps and joins, 2 px padding, no transforms, and no fills except one optional duotone layer with the class gf-secondary. Sources live in icons/NAME.svg with a NAME.json sidecar for categories and tags, and tools/icons/lint.mjs checks them.

Social icons

The social category holds brand icons for the networks people link to most, from Instagram, WhatsApp, Facebook, X, TikTok and YouTube to GitHub, Discord, Spotify and Steam. Each one is named brand-NAME, drawn as an outline of the logo on the same grid and stroke as the rest of the set, and tagged with the network name, its old names, social, logo and brand.

import { BrandInstagramIcon } from 'glyphfox/react';

<a href="https://www.instagram.com/yourname" aria-label="Instagram">
  <BrandInstagramIcon size={20} />
</a>

Brand icons are trademarks of their owners and must be used under each brand's guidelines.