@hugeicons/vue

Beautiful, consistent, pixel-perfect icons for every framework you build with.

60,000+ icons · 10 styles · 6,000+ free · crafted on a 24×24 grid and trusted by 700,000+ developers.

Browse icons → · Documentation → · Figma →

Why Hugeicons

Every icon is hand-crafted for consistency, clarity, and balance, so your interface looks sharp at any size, in any style. One design language, available natively wherever you work.

• 10 styles: Stroke, Solid, Bulk, Duotone and Twotone across rounded, sharp, and standard families
• Pixel-perfect: built on a 24×24 grid for crisp rendering at any scale
• Tree-shakeable: ship only the icons you use
• Native everywhere: first-class libraries for React, Vue, Svelte, SolidJS, Angular, React Native and Flutter
• 6,000+ free icons: for unlimited personal and commercial use
• Always growing: new icons added regularly

Packages

Pick your framework and install:

Framework	Package	Latest	Install
React	@hugeicons/react		npm i @hugeicons/react @hugeicons/core-free-icons
Vue	@hugeicons/vue		npm i @hugeicons/vue @hugeicons/core-free-icons
Svelte	@hugeicons/svelte		npm i @hugeicons/svelte @hugeicons/core-free-icons
SolidJS	@hugeicons/solid-js		npm i @hugeicons/solid-js @hugeicons/core-free-icons
Angular	@hugeicons/angular		npm i @hugeicons/angular @hugeicons/core-free-icons
React Native	@hugeicons/react-native		npm i @hugeicons/react-native @hugeicons/core-free-icons react-native-svg
Flutter	hugeicons		flutter pub add hugeicons

Plugins

Use Hugeicons across your favorite tools and platforms:

Tools

Agent skill

skills/hugeicons is an agent skill that gives coding agents like Claude Code, Codex, and other AI coding agents accurate, first-party guidance on using Hugeicons — so they stop guessing icon names and props from stale training data.

One skill covers every framework. The agent detects which one a project uses and applies the right component, props, and icon names:

• Detect → install → render → props for React, Vue, Svelte, SolidJS, Angular, React Native, and Flutter
• Icon names resolved against the live catalog through the Hugeicons MCP server — so names are looked up, never invented. No icon list is bundled: the catalog changes with every release, and a copy frozen at install time goes stale. Without the MCP, the skill falls back to grepping the project's own installed package, which always matches the version it builds against
• Free vs Pro guidance, plus minimal-code conventions (only pass props that override a default)

Install it with the skills CLI from your project root — your agent picks it up on the next session:

npx skills add hugeicons/hugeicons

Migrating to Hugeicons

skills/hugeicons-migrate is a second skill for switching an existing project to Hugeicons in bulk — it needs the hugeicons skill installed alongside it. It covers:

• The deprecated hugeicons-react, @hugeicons/react-pro, hugeicons-react-native and @hugeicons/react-native-pro packages → the current renderer + icon packages, including the variant/type → Pro package mapping and every renamed icon
• @hugeicons/core-free-icons upgrades where exports were renamed or removed between releases
• lucide-react, @heroicons/react and react-icons → Hugeicons, with prop translation and verified name maps for the common icons

npx skills add hugeicons/hugeicons-migrate

Both skills resolve icon names the same way — through the MCP server, or the installed package — so neither needs regenerating after an icon release.

Claude Code plugin

plugins/claude bundles both skills together with the MCP server, so one install wires up everything:

claude plugin marketplace add hugeicons/hugeicons
claude plugin install hugeicons@hugeicons

ChatGPT and Codex

The Hugeicons plugin is in the OpenAI plugin directory. The package that builds it lives in plugins/openai.

Cursor and other agents

plugins/cursor is a Cursor rule carrying the same decision rules in condensed form. Copy it into your project:

mkdir -p .cursor/rules
curl -o .cursor/rules/hugeicons.mdc \
  https://raw.githubusercontent.com/hugeicons/hugeicons/main/plugins/cursor/hugeicons.mdc

Any other MCP client connects to the server directly at https://mcp.hugeicons.com/mcp — see tools/mcp-server.

Quick start

Here's React. Every other framework follows the same shape (see each package's README for details):

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons/core-free-icons';

function App() {
  return (
    <HugeiconsIcon
      icon={SearchIcon}
      size={24}
      color="currentColor"
      strokeWidth={1.5}
    />
  );
}

The framework libraries are renderers. The icons themselves come from:

• Free: @hugeicons/core-free-icons (6,000+ icons)
• Pro: @hugeicons-pro/core-* (60,000+ icons across 10 styles)

Free & Pro

Upgrade any time. Explore Pro.

Community & contributing

• Browse and search every icon at hugeicons.com/icons
• Read the full docs at hugeicons.com/docs
• Found a bug or have a request? Open an issue
• Questions and ideas are always welcome

License

The free icons (@hugeicons/core-free-icons) and all source code in this repository are released under the MIT License. Use, modify and redistribute them in personal and commercial projects.

Pro icon packs (@hugeicons-pro/*) are a separate product and require a valid Hugeicons Pro license. Pro icons may be used in unlimited end products but may not be redistributed in downloadable templates, kits or open-source code.