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.
100+ syntax patterns, basic shapes, path commands, viewBox, CSS styling, React JSX & accessibility snippets.
Glossary44+ core terms: userSpaceOnUse, objectBoundingBox, viewBox, preserveAspectRatio meet vs slice, and DOMMatrix.
Ranked ListStrict 16/24px grids, high data density, React components — top 12 icon libraries ranked for enterprise admin panels.
Ranked ListSelf-drawing strokes, micro-loaders, and Motion physics — 12 open-source animated sets ranked.
Glossary42+ core terms: defs, symbol, use, g, path, foreignObject, clipPath, mask, linearGradient, and document nodes.
Glossary38+ core terms: stroke-width, vector-effect: non-scaling-stroke, paint-order, stroke-dasharray, and marker caps.
Glossary35+ core terms: clipPath, clip-rule, maskUnits, alpha vs luminance masks, and blend modes.
Glossary32+ core terms: text-anchor, dominant-baseline, textPath, OpenType-SVG, WOFF2 subsetting, and vector glyph rendering.
Glossary45+ 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 linear & radial gradients, coordinate units, multi-stop fills, CSS variables, and React useId() collision fixes.
Geometry & PathsMaster M, L, H, V, C, S, Q, T, A, Z commands, Bézier curve handles, arc flags, and fill-rule nonzero vs evenodd.
Migration & SpeedEliminate FOIT/FOUT, extract raw glyphs with opentype.js, SVGO normalization, and build 100% tree-shakable components.
CSS & ShadersMaster patternUnits, patternTransform affine rotations, CSS Data URIs, feTurbulence noise shaders, and subpixel seam fixes.
CSS & ShadersMaster filter drop-shadow, SVG feDropShadow, multi-pass glow shaders, and fix clipping bugs with zero DOM bloat.
Performance & Next.jsEliminate barrel file bloat, master dynamic import() and React.lazy, viewport observers, and Next.js 15 RSC.
Google DesignMaster 3,300+ glyphs, 4 variable font axes (wght, opsz, FILL, GRAD), raw SVG extraction, and React tree-shaking.
Mobile & WebMaster 1,300+ icons, Outline, Filled & Sharp styles, Web Components, and Angular addIcons registry pattern.
Solar IconsMaster 7,410+ vectors, squircle curves, Linear to Bold Duotone states, @solar-icons/react, and SolarProvider.
HugeiconsMaster 5,115+ free MIT vectors, decoupled architecture, altIcon state toggling, and Next.js 15 RSC.
GitHub PrimerMaster 920+ developer icons, dual 16px & 24px optical grids, @primer/octicons-react setup, and tree-shaking.
Minimal OutlineMaster 2,000+ open-source icons, 24px grid, 1.5px stroke, iconoir-react & Vue setup, and CSS mask icons.
Microsoft FluentMaster 20,000+ icons, Regular vs Filled dual states, optical scale tiers (16–48px), @fluentui/react-icons, and Next.js RSC.
IBM CarbonMaster 2,600+ enterprise icons, 16/20/24/32px scale grids, @carbon/icons-react setup, Angular & Vue packages, and tree-shaking.
Brand & Tech StackMaster 3,100+ brand & tech SVG logos, official hex colors, React & Vue setup, dark mode theming, and legal trademark rules.
UI Systems & ShadcnMaster 15x15 micro-grid architecture, @radix-ui/react-icons setup, Tailwind CSS styling, Shadcn UI integration, and tree-shaking.
Library SpotlightMaster 2,800+ icons, Outlined vs Filled states, React & Vue setup, zero-bloat tree-shaking, and benchmarks vs Lucide.
Animation & CSSMaster circumference math, stroke-dasharray arcs, Material spinners, pulse rings, React components, and WCAG accessibility.
Vite & ToolingMaster URL imports, raw SVGs, vite-plugin-svgr, unplugin-icons, and eliminate TypeScript module errors.
CSS Micro-InteractionsCraft tactile hover transitions, stroke-dashoffset drawing, elastic scale bounces, and WCAG-compliant effects.
Architecture & SpritesEliminate DOM bloat with SVG symbol sprites, overcome Shadow DOM CSS barriers, and automate build pipelines.
CSS & TypographyEliminate the 2px misalignment bug with mathematical baseline offsets, Flexbox, CSS Grid, and modern 1cap units.
Tailwind CSSMaster inline SVG utilities, currentColor theming, zero-JS CSS mask-image stencils, and variant-driven icon components.
Library SpotlightMaster continuous stroke customization, React & Vue packages, Next.js tree-shaking, and 500+ filled icon variants.
Responsive SVGMaster 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.
2,000+ MIT icons vs $99/yr Pro paywalls, web font FOIT, 16px grid alignment, and bundle benchmarks.
BenchmarkIconStash, 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.