explaingit

antfu-collective/icones

7,342VueAudience · designerComplexity · 1/5LicenseSetup · easy

TLDR

A browser-based icon search and export tool that lets you instantly find, preview, and download icons from many design systems, or package multiple icons into a font file for your project.

Mindmap

mindmap
  root((icones))
    What it does
      Icon browser
      Icon search
      Font export
    Tech Stack
      Vue 3
      Vite
      Iconify
    Features
      Offline search
      Icon Bag
      SVG download
      Dark mode
    Audience
      Designers
      Frontend developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Search thousands of icons from multiple design systems in one place and copy the usage code or SVG directly into your project.

USE CASE 2

Select a set of icons and export them as a single icon font file ready to drop into a web project.

USE CASE 3

Browse icons offline in the browser after the page has loaded, with no server requests needed for searching.

Tech stack

VueJavaScriptVite

Getting it running

Difficulty · easy Time to first run · 5min

Runs entirely in the browser at icones.js.org, no install needed.

Open source under the MIT License, use freely for any purpose, including commercial projects.

In plain English

Icones is a web app for browsing and searching icons. It pulls from a large collection of icon sets through a library called Iconify, which aggregates icons from many different design systems into one place. The app is available at icones.js.org and runs entirely in the browser. Searching is instant and fuzzy, meaning you can type part of a word and results appear immediately without any server requests. All searching happens locally in the browser, so it works without an internet connection once the page has loaded. You can filter by category and bookmark collections you use frequently. A feature called the Bag lets you select multiple icons and package them into an icon font file ready to drop into a project. This came out of a separate library the author created called svg-packer. You can also copy the usage code for an icon or download the SVG file directly. The app has dark mode and works on mobile browsers. It was built with Vite, a build tool, and Vue 3, a JavaScript framework for building web interfaces. A community-made VS Code extension brings the same icon search experience into the code editor. The README is brief and the project is straightforward in scope: it is a practical utility for designers and developers who need to find and export icons quickly. It is open source under the MIT license and was created by Anthony Fu.

Copy-paste prompts

Prompt 1
I'm building a web app and need a consistent set of icons. Use icones.js.org to find icons for navigation: home, settings, user profile, and notifications. What icon sets are available and how do I copy the SVG?
Prompt 2
I want to export 10 specific icons from icones as a single icon font file. Walk me through using the Bag feature to select them and download the font.
Prompt 3
How do I use the icones VS Code extension to search for and insert an icon directly into my HTML or CSS file without opening a browser tab?
Open on GitHub → Explain another repo

← antfu-collective on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.