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.
45+ core terms: getBBox, getTotalLength, getScreenCTM, DOMMatrix, SVGElement, and geometry interfaces.
Glossary40+ core terms: animate, animateTransform, animateMotion, calcMode, keyTimes, keySplines, and WAAPI.
Glossary40+ core terms: linearGradient, radialGradient, pattern, gradientUnits, spreadMethod, and P3 color gamuts.
Glossary35+ core terms: feGaussianBlur, feColorMatrix, feDropShadow, feDisplacementMap, and lighting shaders.
Glossary40+ 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.
Master viewBox mechanics, preserveAspectRatio modes, CSS aspect-ratio, Flexbox fixes, and container queries.
React & Vue9,000+ icons across 6 weights: setup in React 19 RSC, Vue 3, IconContext theming, and duotone styling.
Ranked ListCurated two-tone vector sets with 20% opacity fills, MIT licenses, and CSS theming for modern web apps.
React & Next.jsMaster lucide-react setup, Next.js 15 RSC streaming, dynamic imports, bundle benchmarks, and Tailwind v4 utilities.
Tailwind CSS24px Outline/Solid vs 20px Mini vs 16px Micro grids, optical sizing, subpath imports, and RSC integration.
CSS & StandardsCDN web font vs SVG sprites vs inline SVG vs React, 98KB to 1.2KB payload tuning, and vertical alignment fixes.
Canvas & ExportClient-side HTML5 Canvas, Retina DPI scaling, CSS font embedding, OffscreenCanvas workers, and Node.js Sharp.
UI DesignRanked outline and stroke icon sets for modern UI: 1px-2px stroke weights, MIT/Apache licenses, and SVG code.
SVG StylingMaster 6 methods: fill, stroke, currentColor, CSS mask-image stencils, filter matrix, React props, and Tailwind v4.
CSS & BackgroundsUTF-8 Data URIs, percent-encoded %23 hex colors, responsive viewBox scaling, and seamless repeating patterns.
React & Next.jsRanked by production bundle footprint, Rollup tree-shaking efficiency, Next.js RSC readiness, and TypeScript types.
Google Design SystemsVariable font axes (FILL, wght, GRAD, opsz), 295KB to 1.7KB subsetting, CDN setup, React usage, and the 2022 freeze.
Icon Fonts & PerformanceFont Awesome 7 setup: CDN vs Kits vs npm, fa-solid classes, measured payloads, React SVG packages, and v7 breaking changes.
Social & Brand IconsCC0 SVG brand marks, official hex colors, X-rebrand-proof sets, HTML+CSS footer code, and licensing per set.
AstroZero-JS island architecture, native .astro icon components, dynamic glob imports, and symbol sprites.
Animation & MathCubic bezier normalization, vertex point balancing, native CSS d: path() transitions, and WAAPI acceleration.
CSS ArchitecturecurrentColor dynamic theming, URL-encoded UTF-8 Data URIs, 76% DOM node reduction, and Tailwind patterns.
Angular 19Standalone signal components, 100% tree-shakable icon registries, DomSanitizer security, and @defer hydration.
React Native & Exporeact-native-svg setup, Metro SVGR transformers, typed TypeScript icon components, and 60 FPS mobile performance.
Design SystemsAutomate SVGO normalization, compile multi-framework components with tsup, and configure subpaths for 100% tree-shaking.
Svelte 5 & SvelteKitSvelte 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.