CLI

The package ships one executable, icons. It reads the same metadata.json and embeddings.json that come inside the package, so there is nothing to sync and nothing to sign in to.

# Without installing anything
npx @devigner-ui/icons search "upload progress"

# Or install it globally
npm install -g @devigner-ui/icons
icons search "upload progress"

Inside a project that already depends on the package, your package runner will find it: pnpm icons list, npx icons list.

Commands

Global options

-h, --help          Show help
-v, --version       Show the package version
    --format <fmt>  table (default), json or names
    --json          Shorthand for --format=json

Notes and warnings are written to stderr, so --json output stays pipeable.

search

Ranks all 2,146 icons against a plain description. One vector per icon, not one per drawing.

icons search <query> [options]

icons search "upload progress"
icons search "user profile sidebar" --limit=5 --threshold=0.2
icons search "map pin" --category=location-maps

Name                Score  Category
------------------  -----  ----------------------
UploadTrack         49%    media-playback
UploadSquare        49%    arrows-direction
UploadTwiceSquare   46%    arrows-direction
UploadTrack2        46%    media-playback
CloudUpload         46%    connectivity-network

How ranking works

Every icon's name, category, keywords and intended use were embedded as one 384-dimension vector, and those vectors ship in the package as embeddings.json. Ranking is the cosine between your query's vector and each of them, the same file and the same arithmetic the website's search runs in your browser.

Embedding the query is the one part the shipped file cannot do for itself, and it needs the model that produced the vectors:

npm install @xenova/transformers

That is not a dependency of this package; installing icons does not pull a machine-learning runtime into your project. Without it, search ranks by keyword instead and says so on stderr. --keyword asks for that path directly, which is also the fast one: no model to load.

list

icons list [options]

icons list --category=shopping-ecommerce --limit=4
icons list --style=bulk --format=names
icons list --format=json

Name  Category            Styles
----  ------------------  ----------------------------
Bag   shopping-ecommerce  outline, twotone, bold, bulk
Bag2  shopping-ecommerce  outline, twotone, bold, bulk
Bag3  shopping-ecommerce  outline, twotone, bold, bulk
Bag4  shopping-ecommerce  outline, twotone, bold, bulk

There is no --free-only or --pro-only. Every style of every icon is free, so one would return the whole set and the other nothing.

copy

icons copy <name> [options]

A name containing * is treated as a glob.

icons copy ShoppingCart
icons copy ShoppingCart --style=bold
icons copy ShoppingCart --format=svg
icons copy "Arrow*" --format=svg --out=./arrows

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

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

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

svg renders the component you installed rather than reading from a second copy of the artwork, so what you get is exactly what the component draws. That means it needs react and react-dom, both already peer dependencies of this package, so it works in any project that installed it, and only fails under a bare npx with nothing else around.

Every style is available on every icon, so --style always gives you the one you asked for. bulk used to fall back to outline on gated icons; it does not any more, because nothing is gated.

info

icons info ShoppingCart

Icon: ShoppingCart
Display name: Shopping Cart
Category: shopping-ecommerce
Keywords: shopping, cart, path, curved, smooth, arc, curve
Paths: 12
Styles:
  outline: free
  twotone: free
  bold: free
  bulk: free
Usage: cart, checkout, storefront, orders

categories

icons categories

media-playback (189)
arrows-direction (167)
system-ui (136)
design-layout (123)
reactions-emojis (90)
...

Exit codes