Icons for Web
Use a Set

Use a Set

Hugeicons Icon Sets are here to make your projects faster, simpler, and more efficient. With a reliable CDN, flexible styles, and thousands of icons at your fingertips, it's the all-in-one solution you've been looking for.

What is an Icon Set?

Hugeicons Sets make it easy to keep your projects fast and efficient. Choose a single icon style that fits your design and load only the icons you need—no extra files or slow load times. With our private CDN, your icons will load instantly, keeping your website smooth and optimized

Fast and CDN Hosted:

Hugeicons Icon Font is hosted on a fast and reliable CDN, ensuring that your icons load instantly for better performance.

Lightweight:

Only load the styles you need to keep your projects fast and optimized.

Easy to Use:

Get started quickly with just a single line of code—no complex setup required.

Customizable:

Easily adjust the size, color, and effects of your icons to match your design perfectly.

Available Icon Styles

Hugeicons offers multiple icon styles to match your design needs:

Stroke Styles

  • Rounded: Soft, modern edges for a friendly interface
  • Sharp: Clean, crisp corners for precise designs
  • Standard: Classic stroke style for versatile use

Solid Styles

  • Rounded: Filled icons with smooth corners
  • Sharp: Solid icons with defined edges
  • Standard: Traditional solid style icons

Special Styles

  • Bulk: Bold, heavy-weight icons
  • Duotone: Two-tone design for depth
  • Twotone: Alternative two-color styling

How to Create a Set?

  1. Log in to your Hugeicons account.
  2. Navigate to the "Icon Sets" tab at the top.
  3. Click "Create new" to start building your set.
  4. Choose your preferred icon style and customize your set:
  • Set a name for your icon collection
  • Select your preferred style (Stroke, Solid, or Special)
  1. Once created, you'll get a unique embed code for your set.

Installation

Add the following code to the <head> section of your HTML:

<link rel="stylesheet" href="https://sets.hugeicons.com/YOUR-SET-ID.css" crossorigin="anonymous">

Usage

To use an icon from your set, use the following HTML structure:

<i class="hgi hgi-stroke hgi-user"></i>

The class names follow this pattern:

  • hgi: Base class for all Hugeicons
  • hgi-stroke: Style variant (can be stroke, solid, or special styles)
  • hgi-user: Specific icon name

Finding Icon

You can easily find the icon name and get the exact usage code from our website's icon preview sheet. Each icon comes with:

  • Icon preview
  • Available style variations
  • Framework-specific code snippets (Web, React, React Native, Vue, Svelte, Flutter, Angular)
  • Size and color customization options
  • Download options for SVG and PNG formats

Icon Preview Sheet

The preview sheet provides everything you need to implement icons in your project, including:

  • Icon name and class
  • Framework-specific code snippets
  • Size customization (e.g., 128px)
  • Color selection (#000000)
  • Download options for different formats
Quick StartReact