Copy-paste

Getting one icon's code out of the set without wiring the package into a build: for a prototype, a plain HTML page, or a framework that is not React.

There are two ways: the website, and the CLI that ships inside the package.

From the website

1. Browse icons.devigner.cc
2. Click an icon to open it
3. Copy the React, SVG or CSS snippet, or download the SVG

The playground edits the SVG string it shows you, so what you copy is what you were looking at, size, colour and stroke width included.

From the CLI

# Print the React snippet
npx @devigner-ui/icons copy ShoppingCart

# Pick a style
npx @devigner-ui/icons copy ShoppingCart --style=bold

# Print the SVG instead
npx @devigner-ui/icons copy ShoppingCart --format=svg

# Write a whole family to a directory
npx @devigner-ui/icons copy "Arrow*" --format=svg --out=./nav-icons

Options are in the CLI reference. The short version:

-s, --style <style>   outline (default), twotone, bold or bulk
-f, --format <fmt>    tsx (default) or svg
-o, --out <dir>       write files there instead of printing
    --clipboard       also put the output on the clipboard

What each format gives you

tsx is the import line and the element, with the props that style needs:

import { IconShoppingCart } from "@devigner-ui/icons";

<IconShoppingCart variant="Bold" className="size-6" />

There is no size prop. A style is one variant string ("Outline", "TwoTone", "Bold" or "Bulk") and size is whatever your className sets. Outline is the default, so its snippet carries no variant at all. copy writes the right one for you.

svg renders that same component and prints the markup:

$ npx @devigner-ui/icons copy ShoppingCart --format=svg
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" ...

Because it renders the component rather than reading a second copy of the artwork kept somewhere for the purpose, the two can never disagree. It does mean --format=svg needs react and react-dom; they are peer dependencies of this package, so any project that installed it already has them. Under a bare npx with nothing else around, use --format=tsx, or copy the SVG from the website.

Outside React

The SVG output is plain markup with no React in it. Paste it into HTML, a Vue template, a Svelte component, or anywhere else that takes an element:

npx @devigner-ui/icons copy ShoppingCart --format=svg --out=./public/icons

<img src="/icons/ShoppingCart.svg" width="24" height="24" alt="Shopping cart" />

The strokes are currentColor, so colour comes from CSS when the SVG is inline and is fixed at whatever it inherited when it is loaded through <img>.

There are no Vue, Svelte or Solid components to import. @devigner-ui/icons publishes React components and nothing else.

Licensing

All 8,584 icons are free and MIT. --style always gives you the style you asked for; there is nothing to unlock and no fallback.

See the licensing guide for the attribution the artwork asks for.

Batch export

# One family
npx @devigner-ui/icons copy "Arrow*" --format=svg --out=./nav-icons

# A category, by name, into the CLI
npx @devigner-ui/icons list --category=arrows-direction --format=names

In CI, run it as a normal step. Pin the version so a redraw upstream cannot change your committed assets without a diff:

# .github/workflows/sync-icons.yml
name: Sync icons
on:
  schedule: [cron: "0 0 * * 0"]
jobs:
  export:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npx @devigner-ui/icons@3.1.0 copy "Arrow*" --format=svg --out=./public/icons
      - uses: actions/upload-artifact@v4
        with:
          name: icons
          path: ./public/icons