Unicon

Access over 20,000 icons without the bloat. Copy exactly what you need for your projects.

Unicon

Just the icons you need. Zero bloat.

Browse 20,000+ icons and copy exactly what you need. Like shadcn/ui, but for icons.

Try it now at unicon.sh

CI npm License: MIT

Unicon — browse 20,000+ icons and copy what you need

Why Unicon?

Most icon libraries force you to install thousands of icons just to use a handful. Unicon lets you browse everything in one place and copy only what you need.

  • Browse once, use anywhere — Search 9 icon libraries
  • Copy exactly what you need — React, SVG, or JSON
  • Bundle multiple icons — Export a set at once
  • Zero dependencies — Paste directly into your project

Icon Libraries

LibraryIconsStyle
Lucide1,500+Minimal, consistent stroke
Phosphor1,300+6 weights per icon
Huge Icons4,000+Modern, versatile
Heroicons300+By Tailwind CSS team
Tabler5,000+Clean, customizable
Feather280+Simple, elegant
Remix Icon2,800+Outlined & filled
Simple Icons3,300+Brand logos
Iconoir1,600+Regular & solid

Coming Soon

LibraryIconsLicenseFocus
Carbon2,000+Apache-2.0IBM's enterprise design system
Blueprint300+Apache-2.0Palantir's data-focused icons
Devicons200+MITProgramming languages & dev tools
Octicons600+MITGitHub's icon set
Cryptocurrency Icons400+CC0Coins and tokens

How to Use

1. Search for icons

Use natural language — search "happy face" to find smile icons, or "business" for briefcases and charts.

2. Copy what you need

Click any icon and choose your format:

React Component — Drop directly into your project:

export const ArrowRight = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path d="M13.22 19.03a.75.75 0 0 1 0-1.06L18.19 13H3.75a.75.75 0 0 1 0-1.5h14.44l-4.97-4.97a.75.75 0 0 1 1.06-1.06l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0Z"/>
  </svg>
)

Raw SVG — For HTML, design tools, or anywhere else:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M13.22 19.03..."/>
</svg>

3. Bundle multiple icons

Select multiple icons and export as:

  • Single file with all React components
  • Individual SVG files
  • JSON metadata

4. Open in v0

Send icons to v0.dev to prototype UI components.

CLI

Install icons directly from your terminal.

Installation

npm install -g @webrenew/unicon

# Or use npx (no install)
npx @webrenew/unicon search arrow

Quick Start

# Search for icons
unicon search "dashboard"

# Get icon as React component
unicon get home

# Copy to clipboard (macOS)
unicon get home | pbcopy

# Save to file
unicon get settings -o ./Settings.tsx

# Bundle icons by category
unicon bundle --category Dashboards

# Preview in terminal
unicon preview star

Output Formats

FormatDescription
reactReact/TS components (default)
vueVue 3 SFCs
svelteSvelte components
svgRaw SVG
jsonIcon metadata

Config-Driven Workflow

For larger projects, use a config file:

unicon init
unicon add dashboard --category Dashboards
unicon add nav --query "arrow chevron"
unicon sync

See CLI.md for full documentation.

AI Integration

Unicon works with AI coding assistants.

Skills for AI Assistants

Install rules that teach AI assistants to use Unicon:

unicon skill --ide claude
unicon skill --ide cursor
unicon skill --all

Supported: Claude Code, Cursor, Windsurf, Agent, Antigravity, OpenCode, Codex, Aider

Then ask your AI:

  • "Add a home icon to my project"
  • "Search for dashboard icons"

MCP Server

For deeper integration, use the MCP server.

Claude Desktop / Cursor:

{
  "mcpServers": {
    "unicon": {
      "command": "npx",
      "args": ["-y", "@webrenew/unicon-mcp-server"]
    }
  }
}

Cloud IDEs (v0, Bolt, Lovable):

https://unicon.sh/api/mcp

Tools: search_icons, get_icon, get_multiple_icons, get_starter_pack

See MCP docs for details.

Self-Hosting

Want to run your own instance? See DEVELOPMENT.md for setup instructions.

Build Notes

  • The app build uses webpack (next build --webpack) for deterministic CI/local builds in restricted environments.
  • The home route (/) is intentionally dynamic to avoid build-time database fetches during prerender.

Deploy with Vercel

License

MIT License — see LICENSE for details.

Icons retain their original licenses. See THIRD_PARTY_LICENSES.md for full attribution.

  • MIT: Lucide, Phosphor, Huge Icons, Heroicons, Tabler, Feather, Iconoir, Devicons, Octicons
  • Apache-2.0: Remix Icon, Carbon, Blueprint
  • CC0: Simple Icons, Cryptocurrency Icons (logos are trademarks of their owners)

Built by WebRenew

unicon.sh · Issues