Guides
Install glyphfox in your stack, learn the props that matter there and skip the problems other people already ran into. Every example works with the current packages.
Frameworks
One guide per framework, from the install to server rendering.
- React iconsUse glyphfox icons in React: install, tree shakable SVG components, every prop, icons by name, modifiers, Fusion, morphing, refs and TypeScript types.
- Icons in Next.jsUse glyphfox in Next.js: a client boundary for the App Router, zero JavaScript SVG in Server Components, the Pages Router and icons by name on the server.
- Icons in Vue 3Use glyphfox icons in Vue 3: install, import tree shakable components, set props in templates, morph with useMorph, fuse icons and avoid empty icons.
- Icons in NuxtServer render glyphfox icons in Nuxt: import components, register names in a plugin, wrap icons for auto import, keep morphs in sync and avoid empty icons.
- Icons in AngularAdd glyphfox icons to Angular with the standalone gf-icon component: provideGlyphFox, inputs, fusion, modifiers, lazy route icons, SSR and zoneless apps.
- Icons in Svelte 5Use glyphfox icons in Svelte 5: install, import components, pass props with runes, morph with MorphIcon and morphStore, fuse icons and keep bundles small.
- Icons in SvelteKitServer render and prerender glyphfox icons in SvelteKit: setup, a root layout for icon names, SVG endpoints, adapter-static, hydration and common pitfalls.
- Icons in SolidJSTwo ways to use glyphfox icons in SolidJS and SolidStart today: the glyph-fox element with attr: bindings, or a small tree shakable component on the core.
- Icons in PreactUse glyphfox icons in Preact: the React components through preact/compat with Vite, webpack, esbuild and TypeScript, or the glyph-fox element without compat.
- Icons in QwikRender glyphfox icons in Qwik on the server so they ship no JavaScript and need no resuming, and add the glyph-fox element only where an icon has to react.
- Icons in AstroRender glyphfox icons in Astro at build time with no client JavaScript, wrap them in an Icon.astro component, and add islands or the element for motion.
- Icons in React NativeRender glyphfox icons in React Native with react-native-svg: SvgXml, small per icon imports for Metro, color, weight, fusions, morph frames and accessibility.
- Icons in Lit and web componentsUse the glyph-fox custom element in Lit and plain web components: register every icon or a subset, bind attributes, style it and keep it accessible.
- Icons in plain HTML from a CDNAdd glyphfox to any HTML page with one script tag: the glyph-fox element, data-glyph placeholders, the global API, version pinning and when to build a subset.
Topics
Guides that apply to every framework.
- Tailwind CSS iconsUse glyphfox icons as Tailwind CSS v3 and v4 classes: setup, the gf class syntax, styles and weights after the slash, badges, fusions, animations and options.
- Animated iconsAnimate glyphfox icons: draw, pop, spin and shake presets, hover, click and state triggers, morphs between icons, CSS only morphs and reduced motion.
- Accessible iconsMake glyphfox icons accessible: decorative by default, titles and labels, icon only buttons, status icons, contrast, reduced motion and right to left layouts.
- Tree shaking iconsHow glyphfox icons tree shake in Vite, webpack, Rollup and esbuild: measured bundle sizes, what defeats tree shaking, icons loaded by name and fixed subsets.
- SVG spritesUse glyphfox icons from an SVG sprite: symbol ids, use references, the same origin rule, inline sprites, CLI subsets, styling limits and caching.
- Server renderingRender glyphfox icons on the server: what each package outputs, registering icons used by name, toSvg strings, hydration, motion and the web component.