HH

hugeicons/hugeicons

Developer tools
1.2천 stars 품질 35 트렌드 35

· · · crafted on a 24×24 grid and trusted by 500,000+ developers.

개요

· · · crafted on a 24×24 grid and trusted by 500,000+ developers.

README

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, Angular, React Native and Flutter
  • 5,400+ 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
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:

Plugin Get it
Figma Figma Community
Framer Framer Marketplace
Webflow Webflow Apps
WordPress WordPress.org
Elementor plugins/elementor

Tools

Tool Get it
MCP Server @hugeicons/mcp-server · source

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 catalog:

  • Detect → install → render → props for React, Vue, Svelte, Angular, React Native, and Flutter
  • The complete icon catalog — references/icon-list.md for the shared JS exports and references/icon-list-flutter.md for Flutter constants — so names are copied, never invented
  • 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

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 & Pro

Free Pro
Icons 5,400+ 54,000+
Styles Stroke Rounded 10 styles (Stroke, Solid, Bulk, Duotone, Twotone × variants)
Use Personal & commercial Personal & commercial
License MIT Pro License

Upgrade any time. Explore Pro.

Community & contributing

License

The free icons and all source code here are released under the MIT License. Pro icon packs require a valid Hugeicons Pro license.

View this README on GitHub

추천 도구

다른 키워드를 입력하거나 필터를 제거해 보세요.

설치

npx skillfish add hugeicons/hugeicons