Icônes: a local icon search app for Vue and Vite projects

What Icônes actually solves for frontend developers

Picking an icon usually means opening a dozen vendor sites, comparing visual weight, then copying SVG markup by hand. Icônes collapses that into one search box. The README describes it as an "Icon Explorer with Instant searching, powered by Iconify", and the key phrase is that all searching "are done locally, no web queries". That matters when you are hunting through thousands of glyphs: keystrokes filter the list in the browser instead of round-tripping to a server.

The audience is narrow and specific. It is a tool for people who already ship a frontend and need to move icons from a catalogue into a codebase. The README lists the Bag, which lets you "select your icons and pack them into a ready-to-use icon font", plus copying usage scripts and direct SVG downloads. A designer who only wants a PNG for a slide deck is not the target user, even though the app will happily render icons on screen.

It is also a reference implementation. The README points to Vitesse as an opinionated starter template derived from the same codebase, and notes that svg-packer "was born from this" Bag feature. So the project doubles as a worked example of a Vite plus Vue 3 app, which is part of why it is worth reading even if you never deploy it.

How the search index and the Bag work under the hood

The data flow starts at install time. The package.json declares a postinstall script, tsx scripts/prepare.ts, which runs automatically after dependencies are installed. The @iconify/json package is a devDependency, and the repository also carries a scripts/ directory, so the icon metadata is prepared locally by that script rather than fetched from an API at runtime. That is the mechanism behind the "no web queries" claim: the collections are already on disk in the built app.

Search itself uses fzf, listed as a runtime dependency. Fzf is a fuzzy matcher, so typing scattered characters still surfaces plausible icon names. The UI layer is Vue 3 with vue-router and floating-vue for popovers, styled with UnoCSS, and the whole thing is bundled by Vite. Persistence for things like collection bookmarks and the Bag uses Dexie, an IndexedDB wrapper, which is why selections survive a page reload without an account.

Export is client-side too. file-saver and client-zip are dependencies, and svg-packer is a devDependency. Packing a font therefore happens in the browser: the selected SVG paths are collected, converted, and handed to the browser as a download. There is no server component in the dependency list, which is consistent with the app being deployable as static files. Netlify is represented by netlify.toml at the repository root, and vite-plugin-pwa plus a dev-pwa script indicate the app can also be installed as a progressive web app.

Running Icônes locally with pnpm

The repository is a pnpm workspace. The package.json pins packageManager to [email protected], so the expected entry point is pnpm rather than npm or yarn. Clone the repository, then install dependencies. The postinstall hook fires here, and it is the step that prepares icon data, so do not skip it with a flag that disables scripts.

pnpm install

After install, the dev script starts Vite on port 3333 and opens a browser window. The port is fixed in the script rather than left to Vite's default, so if something else already holds 3333 the command will fail rather than silently pick another port.

pnpm dev

You should see the Icônes interface load at localhost:3333 with a search field. Typing filters the icon grid locally. Selecting an icon opens the panel with the copy actions and download options described in the README. If you want to check the PWA service worker path instead, the dev-pwa script sets SW_DEV=true and starts Vite on the same port without opening a browser. For a production bundle, the build script sets NODE_ENV=production before running vite build, and typecheck runs vue-tsc --noEmit if you want to confirm the TypeScript surface before shipping anything.

Where Icônes gets in your way

The biggest limitation is not technical, it is editorial. Icônes is a viewer for Iconify collections. It does not own the icons, and the README says nothing about per-collection licences, attribution requirements, or which sets permit commercial use. If you pull an SVG out of the app and ship it, verifying the licence is your job, and the app gives you no in-product signal to do it. For a team with legal review on assets, that is a real gap.

Second, this is an application, not a library. There is no published package to import, no API surface documented in the README, and no releases listed for the repository. The package.json version is 0.0.0 and the package is marked private, which is the normal shape for an app but means you cannot pin a version of Icônes the way you would pin a dependency. If you fork it to customise the UI, you own the merge cost against a moving main branch.

The third constraint is bundle size. Bundling icon data locally is the reason search is instant, and it is also why the build is heavy. If your goal is a small icon picker embedded in your own product, copying this architecture means copying that weight. For a single project that needs twelve icons, downloading them once from the hosted app at icones.js.org is the cheaper path, and the README's "Go to App" link points exactly there.

Finally, the README does not document rollback, migration, or data export for the Bag beyond the packing feature itself. If you build a workflow around saved collections in IndexedDB, that state lives in one browser profile.

Icônes versus Iconify's own tooling

The honest comparison is with Iconify itself, which Icônes is built on rather than against. Iconify publishes the icon data and a set of runtime components that render icons by name in a framework, fetching from a CDN on demand. That approach keeps your bundle small: you reference an icon name and the data arrives when needed.

Icônes inverts that trade-off. It ships the data with the app so that search and preview are instant and offline-capable, and it focuses on the moment of selection rather than the moment of rendering. The Bag and the SVG download exist because the output is a file you take away, not a component you call at runtime. If your problem is "render an icon in a React component without bundling all of Material Design Icons", Iconify's runtime components are the better fit. If your problem is "find the right icon across many sets and export it", Icônes is the tool, and the README's own framing of local search is the reason.

A second alternative is your editor. The README links a community VS Code extension, vscode-icones by @afzalsayed96, which brings icon browsing into the editor. That removes the context switch but ties the workflow to one editor and to whatever that extension supports. Icônes stays editor-agnostic at the cost of a browser tab.

Maintenance, licence and what to check before adopting

The repository is not archived, and the last push was on 2026-08-24. That is recent enough that the codebase reflects current tooling: Vite 8, Vue 3.5, TypeScript 6, ESLint 10, and UnoCSS 66 all appear in package.json. The dependency set is aggressive about staying on current majors, which is good for security patches and awkward if you fork and want to hold a version back.

There are no releases listed for the repository, so there is no changelog to read and no tagged version to diff against. Upgrading a fork means tracking commits on main. The devDependency on @iconify/json is a caret range, so a fresh install can pull a newer icon dataset than the last person's install, which means the icon set you see is not fully reproducible from the lockfile alone unless you commit pnpm-lock.yaml, which the repository does.

Licensing is straightforward at the project level: the LICENSE file is MIT, and package.json declares "license": "MIT", with the README crediting Anthony Fu, 2020. MIT covers the Icônes source. It does not cover the icons, which come from Iconify collections under their own terms. Nothing in the README addresses that distinction, so treat icon licensing as a separate question you resolve upstream. This is a description of what the files say, not legal advice.

Editorial conclusion

Adopt Icônes if you want a browser-based icon search that runs entirely on the client and exports SVGs or a packed font without a backend. Skip it if you need an authoritative catalogue of free icons with licence metadata per set, or a guaranteed stable dependency, since the repository has no releases and the README documents no versioning. Before relying on it, check whether the specific Iconify collection you need is bundled by @iconify/json, and confirm the icon licence with the upstream set rather than with Icônes itself.

Frequently asked questions

Official sources

1. antfu-collective/icones on GitHub
2. Issues
3. License: MIT
4. Project website
5. README