Guides, comparisons, and deep dives on SVG icons, React components, icon systems, and web performance — plus open data on all 28 libraries we index.
Library selection, tree-shaking, SVG sprites, and scalable component patterns for shipping icons in React.
Open DataVerified counts, versions, and licenses for all 28 libraries — 134,701 icons. Free to cite (CC BY 4.0).
ListicleA ranked, tier-by-tier guide to the best free icon sets you can ship in 2026.
Ranked ListRanked by damage — from mixed stroke weights to missing ARIA — each with a concrete fix.
40+ core terms: M, L, C, S, Q, T, A, Z commands, Bézier control points, and arc math explained.
Glossary30+ core terms: viewBox, affine matrix, CTM, transform-origin, and getScreenCTM explained.
Ranked ListFrom float precision bloat to unmerged paths and paint thrashing — 10 vector antipatterns.
Glossary30+ core terms: aria-hidden, role="img", AccName computation, and forced colors explained.
Ranked ListFrom mystery-meat icons to dark mode contrast fails — 11 subtle flaws killing conversion.
Glossary30+ core terms: viewBox, currentColor, CLS, GPU rasterization, and subpixel hints explained.
Ranked ListOptical grids, stroke scaling, state tokens, RTL flipping, and touch target rules for design systems.
ReferenceThe definitive rundown of every major open-source icon set, with counts, styles, and licenses.
Glossary50+ icon and SVG terms — viewBox, sprite, stroke, tree-shaking — defined in plain English.
Glossary45+ attributes — viewBox, stroke-dasharray, vector-effect — explained with real code.
SVG, PNG, ICO, ICNS, WebP, Lottie — 28 formats defined, with a decision table for each use case.
Ranked ListKebab, meatball, bento, döner — the official names and origin stories of everyday interface icons.
LicensingWhat each license actually requires — backed by license data from all 134,701 icons we index.
BenchmarkBundle sizes, licensing, and performance of the top icon libraries, compared head-to-head.
Licensing134,701 icons safe for commercial projects under MIT & Apache 2.0 — no attribution needed.
GuideHow to find, optimize, and ship high-performance website icons without paywalls or bloat.
Svelte 5 Runes ($props), zero-runtime SVG components, unplugin-icons, and SSR streaming hydration safety.
CI/CD & AutomationFigma REST API automation, SVGO multi-pass optimization, TypeScript component generation, and GitHub Actions PRs.
Ranked BenchmarkLucide, Heroicons, Phosphor, Tabler, and Iconoir benchmarked by bundle size, stroke scaling, and Tailwind v3/v4 compatibility.
Vue & NuxtSFC icon components, unplugin-icons, vite-svg-loader, SSR hydration safety, and instant Vue export.
React & TSXSVGR CLI batch automation, Vite plugins, TypeScript props, and safe useId() gradient isolation.
Ranked BenchmarkLucide, Tabler, Phosphor, Heroicons, and Iconoir benchmarked by bundle size and tree shaking.
ComparisonLucide, Tabler, Phosphor, Heroicons, and Iconoir stress-tested across React, Vue, and plain HTML.
Figma & ReactPixel-perfect grid alignment, 1:1 component parity, and permissive commercial licenses.
React & Next.jsReact 19 Server Components, 0 KB client JS streaming, and Tailwind CSS currentColor styling.
BenchmarkRuntime bundle sizes, 120 FPS frame drops, memory consumption, and state machine interactivity.
CI/CDHardened configs, safe ID prefixing to avoid gradient collisions, and GitHub Actions PR workflows.
i18n & RTLWhen to flip vs keep universal: the 4-tier classification for Arabic, Hebrew, and Persian UX.
Math & GaugesElliptical arc math, large-arc-flag, sweep-flag, and zero-dependency dynamic circular gauges.
SSR & Next.jsNext.js 15 Server Components, React 19 useId() hydration fixes, and Astro zero-JS sprites.
Design Tokens3-tier token hierarchy, CSS custom property duotone slots, and runtime brand switching.
CompositingNon-destructive icon badges, objectBoundingBox coordinates, luminance masks, and GPU shaders.
TypographyAutomated WOFF2 subsetting, Unicode PUA mapping, variable font axes, and zero FOUC.
SecurityStored XSS prevention, DOMPurify SVG profile, CSP headers, and safe user uploads.
AnimationState transitions, pure CSS path morphing, and reduced-motion rules for interactive icons.
BenchmarkMemory, GPU pipelines, and DOM performance benchmarks for high-density dashboards.
PerformanceBundle sizes, HTTP caching, DOM nodes, and SSR hydration benchmarks across modern frameworks.
GuideSizes, formats, SVG favicons, dark mode switches, and manifest files for modern browsers.
ReactFrom one-off SVG files to an automated icon pipeline with TypeScript, props, and currentColor.
System DesignGrid standards, naming conventions, optimization pipelines, and handoff workflows for teams.
BasicsInline, <img>, background-image, or <use> — when to use each approach with code examples.
DesignGrid alignment, stroke weights, corner radius, visual balance, and metaphor selection.
Finally understand viewBox, the coordinate system, and how SVGs scale to any size.
PerformanceClean, shrink, and speed up your SVGs so icons never slow down your pages.
AnimationBring icons to life with hover, loading, and state transitions — no heavy libraries.
AnimationMaster stroke-drawing and line-animation techniques for signature icon reveals.
CraftGrids, alignment, and rendering tricks that keep icons crisp at every size.
AccessibilityARIA roles, labels, and patterns that make icons work for screen readers.
ThemingTheme icons cleanly with currentColor and CSS custom properties.
Why inline SVG beats icon fonts on performance, accessibility, and control.
IconStash, SVG Repo, Flaticon, Iconfinder, and Iconify compared on licensing and code export.
VersusIcon counts, 6-weight scaling, bundle sizes, and design system integration benchmarked.
VersusIcon count, maintenance, React support, and tree-shaking — and why Lucide wins in 2026.
VersusPricing, licensing, quality, and export formats compared for real projects.
VersusWhy SVG aggregation beats icon fonts — FOIT, layout shift, and bundle bloat.
VersusSearch UX, export formats, offline access, and developer workflow, side by side.
VersusSearch speed, export options, icon consistency, and licensing clarity.
VersusIcon count, search speed, export formats, and developer tooling compared.