Install the icons in React or shadcn/ui

Import glyphs directly by name from @flux-icons/react. All components accept standard SVG props, including className, size, and strokeWidth:

1import { Check, Plus, Settings } from "@flux-icons/react"23export function Example() {4  return (5    <div className="flex items-center gap-4 text-foreground">6      <Check className="size-4 text-emerald-500" />7      <Plus size={16} />8      <Settings strokeWidth={1.5} className="text-muted-foreground" />9    </div>10  )11}

The complete set is mirrored on Iconify (opens in a new tab) under the flux-icons prefix, covering all 8,000 drawings across Vue, Svelte, and non-React stacks.

1import { Icon } from "@iconify/vue"    // Vue named export2import Icon from "@iconify/svelte"     // Svelte default export34<Icon icon="flux-icons:bell" />5<Icon icon="flux-icons:bell-fill" width="16" />6<Icon icon="flux-icons:bell-sharp-two-tone" />

For plain HTML or projects without a build step, the official web component and Tailwind CSS mask plugin are available:

1# Web component2npm i iconify-icon3<iconify-icon icon="flux-icons:bell"></iconify-icon>45# Tailwind CSS v4 Plugin6npm i -D @iconify/tailwind47@plugin "@iconify/tailwind4";8<span class="icon-[flux-icons--bell] size-4"></span>

shadcn/ui primitives size their own icons automatically. Button applies the rule [&_svg:not([class*='size-'])]:size-4, which defaults any nested icon to 16px unless an explicit size-* class is applied.

1<Button>2  <Plus />                     {/* 16px: automatic default button sizing */}3  <Plus size={32} />           {/* 16px: width prop is overridden by variant CSS class */}4  <Plus className="size-6" />  {/* 24px: explicit size-* class takes precedence */}5</Button>

Interactive preview of icons nested inside shadcn button variants:

The library is authored on a strict 24×24 grid with a 2px keyline. At 16px, this matches standard UI text density without clogging apertures or blurring on high-DPI displays.

Because both icon suites share an identical 24×24 boundary box, 2px stroke weight, and currentColor fill/stroke logic, switching is a one-line import replacement:

1import { Check, Settings, Bell } from "lucide-react"23<Check className="size-4" />4<Settings size={16} />5<Bell strokeWidth={1.5} />

1import { Check, Settings, Bell } from "@flux-icons/react"23<Check className="size-4" />4<Settings size={16} />5<Bell strokeWidth={1.5} />

Names follow consistent semantic standards. Where compound names differ, the family base word leads: mail-check rather than check-mail.

Every icon is crafted in four distinct weights and two corner treatments (Regular rounded and Sharp square caps).

Each style is exported from its own entry point in the package, guaranteeing dead-code elimination:

1import { Bell } from "@flux-icons/react"                 // stroke,         1,0002import { Bell } from "@flux-icons/react/two-tone"        // two-tone,       1,0003import { Bell } from "@flux-icons/react/duotone"         // duotone,        1,0004import { Bell } from "@flux-icons/react/fill"            // fill,           1,0005import { Bell } from "@flux-icons/react/sharp"           // sharp stroke,   1,0006import { Bell } from "@flux-icons/react/sharp/two-tone"  // sharp two-tone, 1,0007import { Bell } from "@flux-icons/react/sharp/duotone"   // sharp duotone,  1,0008import { Bell } from "@flux-icons/react/sharp/fill"      // sharp fill,     1,000

Inspect the drawings directly in SVG format on the GitHub repository (opens in a new tab).

Component prop specifications for @flux-icons/react icons and the interactive ScrollProgress navigation pill:

Nest and compose components cleanly inside your application tree without runtime overhead:

FluxIconProvider (optional global defaults)
└── FluxIcon (stroke | two-tone | duotone | fill)
    └── SVG (24×24 keyline geometric canvas)
        ├── paths (currentColor stroke / plate)
        └── title / desc (accessible metadata)

ScrollProgress (fixed viewport root)
└── Surface (motion.div with squircle physics)
    ├── ProgressCircle (circular SVG path meter)
    │   ├── BackgroundRing
    │   └── ActivePath (pathLength linked to scroll progress)
    └── SectionMenu (motion.ul popout list)
        └── SectionItem (motion.li button)
            └── ActiveIndicator (layoutId="active")

Concise answers to common integration questions across React and shadcn stacks:

[ FAQ #01 ]

Do I need to install anything to use one icon?

No. The icon browser copies any drawing as SVG or JSX at the size and stroke width you set, and pasting that into a component is the whole install. Every drawing colours from currentColor, so it needs no fill or stroke attribute of your own.

[ FAQ #02 ]

Which package do I install for React?

@flux-icons/react, which generates one component per icon from the same SVGs, so the two cannot disagree. Each style is its own entry point, and the drawings are also in icons/ in the repository at github.com/codewithevilxd/flux-icons if you would rather copy them than install anything.

[ FAQ #03 ]

Why does each style have its own import path?

So an app ships only the styles it imports. Every name is in all four, and the import path picks the look: @flux-icons/react/two-tone for the outline over a plate, @flux-icons/react/duotone for the grey body with black detail. Code that imported /duotone before 1.0.0 and wants the old look changes the path to /two-tone.

[ FAQ #04 ]

How do I size an icon inside a shadcn/ui Button?

Button sizes nested SVGs itself, with [&_svg:not([class*='size-'])]:size-4, which reads: make any nested icon 16px unless it already carries a size- class. So a bare icon is 16px, a size prop is overridden by that class, and className="size-6" is what actually changes it. Sidebar and DropdownMenu use the same rule without the exception clause, so there your own class will not win.

[ FAQ #05 ]

What stroke width should I use?

Two, which is what the set is drawn and tested at on the 24 grid, including at 16px where the tighter drawings had to be opened up to survive. Lighter weights are for large decorative use; below 16px they break the drawings up rather than refine them, because the gaps between elements were measured against a 2-unit keyline.

[ FAQ #06 ]

How do I switch from lucide?

Change the import. Both sets are 24×24 with a 2px keyline and a currentColor stroke, so the markup stays as it is. One prop has no equivalent here: lucide's absoluteStrokeWidth. The stroke scales with the icon instead, which is what keeps an enlarged keyline looking drawn rather than hairline.

[ FAQ #07 ]

Can I use the set without React?

Yes, two ways. The set is on Iconify as flux-icons, so @iconify/vue, @iconify/svelte and the iconify-icon web component cover Vue, Svelte, Angular, Solid and plain HTML between them, none of them a package of ours. Or take the files: icons/<style>/<name>.svg in the repository are plain normalised SVGs with no wrapper, no ids and no classes to strip out. Treat those as build output: to change a drawing, change it in raw/ and rebuild.

[ FAQ #08 ]

Is the set free for commercial use?

Yes. It is released under the MIT License, which covers commercial and client work. The licence asks that its notice travels with copies of the set itself rather than with a product that happens to use an icon; the LICENSE file in the repository is the actual grant.