PIXEL-PERFECT ICONS FOR SHADCN/UI& REACT.
A unified ecosystem of 3,700+ free vector icons across three purpose-built collections: 1,000 Keyline grid icons, 2,242 Extended interface glyphs, and 467 interactive Motion icons. Zero runtime bloat, MIT licensed.
255 downloads on npm, 255 in the last week (opens in a new tab)Keyline Grid Vault
Flagship precision icon suite drawn on a strict 24×24 grid with a 2px keyline. 4 weights (stroke, two-tone, duotone, fill) × 2 corner treatments. 8,000 SVGs.
Extended UI Vault
Comprehensive interface system covering 28+ categories across 6 distinct visual styles: linear, bold, two-tone, bulk, broken, and outline. 13,450+ SVGs.
Animated Motion Vault
Drop-in interactive React icons powered by Framer Motion. Smooth micro-interactions with hover triggers, tap feedback, and continuous state pulses.
One Ecosystem. Three Specialized Collections.
Every style and dimension of modern UI icons, organized into three focused vaults with zero runtime bloat.
Keyline 24×24 Grid
8,000 SVGsPrecision stroke drawings, two-tone plates, duotone contrasts and solid fills with rounded and sharp corners.
Flux Extended
13,450+ SVGsMassive collection across 6 styles: Linear, Bold, Two-Tone, Bulk, Broken, and Outline with 28+ domains.
Flux Motion
Framer MotionLiving interactive React icons with hover physics, clicks, and micro-animations designed for modern web apps.
Stroke, two-tone, duotone and fill
Vault 1 deep dive: Stroke is the foundational drawing; the other three are derived from it, and every one of them is cut both rounded and sharp. A family stays recognisable whichever weight a surface calls for.
stroke
[1000 icons]The full set, and the drawing every other style is derived from. 2px keylines on a 24 grid.
two-tone
[1000 icons]The same keylines over a flat plate at reduced opacity, for surfaces that need weight without going solid.
duotone
[1000 icons]No outline: a grey body with the detail in black, so the part that matters reads first.
fill
[1000 icons]Solid, with the detail knocked back out of the shape rather than drawn on top of it.
Rounded and sharp corners
All 1,000 drawings are cut both ways, in every weight they carry, so this is a switch over the set rather than a second set beside it.
Rounded is the drawing as the set is built. Every corner takes a radius off one ladder and every stroke ends round, which is what stops a glyph reading as brittle at the size it ships at.
Sharp squares every one of them. Same drawing, same 24×24 box, same name on disk, so nothing in a layout moves when you swap one for the other.
Square & circle containers
117 of the 1,000 icons have containers that wrap the base drawing.
Request sent
Your ticket is logged. We will reply by email within a day.
check is the drawing with nothing around it, which is what lets it grow. At 56px on a confirmation screen it is the whole message, and at 16 it slips into a row of text without interrupting it.
square-check is that same tick inside a container, which gives it the weight to lead a row rather than end one. Nothing about the tick changes.
Preferences
Display name
Changes saved
Your settings are up to date.
circle-check is the third form. A circle reads softer than a square at the same size, which is why it is the one that ends up in confirmations.
Works in your stack
React components generated from the same files as the SVGs, plus Vue and Svelte through Iconify.
# Every icon, as React components
npm i @flux-icons/react
# Or copy one drawing in, with nothing left in your lockfile
npx @flux-icons/cli add bellimport { Bell, Check, Search } from "@flux-icons/react"
<Bell className="size-4" />
<Check size={16} />
<Search strokeWidth={1.5} />Or skip the install entirely: every icon in the browser copies as plain SVG that works in any framework, or none. Beyond the three above, the whole set is on Iconify as flux-icons, which covers Solid, Angular and plain web components. How to install.
Frequently Asked Questions
The questions asked before taking a set: what it covers, what it costs, and what it works with.
- What is Flux Icons?
- A complete open-source icon ecosystem: over 3,700+ vector glyphs and animated components across three dedicated collections: 1,000 Keyline icons (in stroke, two-tone, duotone and fill, rounded or sharp), 2,242 Extended icons in 6 architectural styles, and 467 Framer Motion animated icons. Built for shadcn/ui and React, released under the MIT License.
- How many icons are there, and what collections are available?
- Over 3,700 icons across three dedicated vaults: (1) Keyline Vault with 1,000 icons in 4 styles and 2 corner treatments (8,000 SVGs total); (2) Extended Vault with 2,242 icons in 6 cohesive styles (linear, bold, two-tone, bulk, broken, and outline); and (3) Motion Vault with 467 animated micro-interaction components built natively for React and Framer Motion.
- Are the icons free to use in commercial projects?
- Yes. The set is released under the MIT License, which covers commercial work, client work and products you sell, with no per-seat terms and no subscription. The LICENSE file in the repository is the actual grant and governs.
- Do these work with shadcn/ui?
- That is what they are drawn for. The set uses the same 24×24 box and the same 2px keyline that shadcn/ui's defaults assume, so an icon lands correctly at size-4 inside a Button with no adjustment to your components. This whole site is built with them, which is the same claim tested end to end rather than asserted.
- Do I have to install anything?
- Not to use one icon. Open any drawing in the browser and take it as SVG or JSX, at whatever size and stroke width you have set, then paste it into a component. For the whole set as React components there is @flux-icons/react, one component per icon generated from the same files, and the install page covers how to get it.
- Why do some icons come in square and circle versions?
- Because a container is a different icon, not a style of one: 56 of the 1,000 drawings come in a square- form and 61 in a circle-, wrapping the base glyph rather than replacing it. The container also gives a glyph the enclosed area a duotone or a fill needs, which is why a boxed variant can show a glyph solid that the bare drawing only outlines.
- What is the difference between the rounded and sharp icons?
- Only the corners and the stroke caps. All 1,000 drawings are cut both ways, in every weight they carry, so the two are one set with a switch on it rather than two sets: same names, same 24×24 grid, same coverage in stroke, two-tone, duotone and fill. Rounded takes a radius off one ladder at every corner and ends each stroke round; sharp takes every corner to a true point and squares every cap. The ink reaches exactly as far either way, so nothing in a layout moves when you swap one for the other.
- Is there a Figma file?
- The set is drawn in one Figma file, as a component set per icon with three variant properties on it: Container, Style and Corners. What is public today is the repository at github.com/codewithevilxd/flux-icons: raw/ holds the export of every variant straight out of Figma, under the name Figma gives it, and icons/ holds the normalised SVGs the site, the React components and the packages are all built from.
More on installing, importing and switching from another set: How to install.
Keep the set 100% free and open source forever: sponsorship is what pays for the hours the next hundred vector icons take to craft.
Sponsor on GitHub (opens in a new tab)[ COMMUNITY SUPPORTERS ]