```
### Theme Toggle with Style Switch
A simple dark mode toggle using different icons:
```vue copy
```
### Navigation Bar with Style Switch
A navigation bar that uses different icon styles to indicate the active state:
```vue copy
```
# Angular
The `@hugeicons/angular` package is freely available on the public npm registry. To use HugeIcons in your Angular project, you'll need to install both the Angular component package and at least one icon package of your choice. This modular approach allows you to keep your bundle size minimal by including only the icons you plan to use.
## Installation
1. Install the Angular component package:
```sh npm2yarn
npm install @hugeicons/angular
```
2. Install your preferred icon package(s):
```sh npm2yarn
npm install @hugeicons-pro/core-{variant}-{style}
```
**Available styles:**
HugeIcons Pro offers 40,000+ icons across 9 unique styles:
```bash copy
# Stroke Styles (Line icons with different corner styles)
@hugeicons-pro/core-stroke-rounded
@hugeicons-pro/core-stroke-sharp
@hugeicons-pro/core-stroke-standard
# Solid Styles (Filled icons with different corner styles)
@hugeicons-pro/core-solid-rounded
@hugeicons-pro/core-solid-sharp
@hugeicons-pro/core-solid-standard
# Special Styles (Unique visual treatments)
@hugeicons-pro/core-bulk-rounded # Chunky style with depth
@hugeicons-pro/core-duotone-rounded # Two-color design with primary/secondary emphasis
@hugeicons-pro/core-twotone-rounded # Alternative two-color treatment
```
For more detailed information about our core packages and available styles, please visit our [Core Packages](/core-packages) page.
## Module Setup
Import the HugeIcons module in your app.module.ts:
```typescript copy
import { NgModule } from '@angular/core'
import { HugeiconsModule } from '@hugeicons/angular'
@NgModule({
imports: [HugeiconsModule],
})
export class AppModule {}
```
## Basic Usage
```typescript copy
// your.component.ts
import { Component } from '@angular/core'
import { Notification03Icon } from '@hugeicons/core-free-icons'
@Component({
selector: 'app-example',
template: ` `,
})
export class ExampleComponent {
notification03Icon = Notification03Icon
}
```
## Props
| Prop | Type | Default | Description |
| ----------- | ------------- | ------------ | --------------------------------------------------------------------------------------- |
| icon | IconSvgObject | Required | The main icon component imported from an icon package |
| altIcon | IconSvgObject | - | Alternative icon component from an icon package for states, interactions, or animations |
| showAlt | boolean | false | When true, displays the altIcon instead of the main icon |
| size | number | 24 | Icon size in pixels |
| color | string | currentColor | Icon color (CSS color value) |
| strokeWidth | number | 1.5 | Width of the icon strokes (works with stroke-style icons) |
| class | string | - | Additional CSS classes |
## Icon Naming
Each icon in our packages can be imported using either its main name or its style-specific alias:
```typescript copy
// Both imports refer to the same icon
import { SearchIcon } from '@hugeicons/core-free-icons'
import { SearchStrokeRounded } from '@hugeicons/core-free-icons'
```
We recommend using the shorter main name (e.g., `SearchIcon`) for better readability. The style-specific aliases are useful when importing the same icon from different style packages to avoid naming conflicts.
## Examples of Dynamic Icon Interactions
### Search Bar with Clear Button
A search input that shows a clear button when text is entered:
```typescript copy
// search.component.ts
import { Component } from '@angular/core'
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons'
@Component({
selector: 'app-search',
template: `
`,
})
export class SearchComponent {
searchIcon = SearchIcon
closeIcon = CloseCircleIcon
searchValue = ''
}
```
### Theme Toggle with Style Switch
A simple dark mode toggle using different icons:
```typescript copy
// theme-toggle.component.ts
import { Component } from '@angular/core'
import { SunIcon, Moon02Icon } from '@hugeicons/core-free-icons'
@Component({
selector: 'app-theme-toggle',
template: `
`,
})
export class ThemeToggleComponent {
sunIcon = SunIcon
moonIcon = Moon02Icon
isDark = false
}
```
### Navigation Bar with Style Switch
A navigation bar that uses different icon styles to indicate the active state:
```typescript copy
// nav.component.ts
import { Component } from '@angular/core'
import { HomeIcon, SearchIcon, Notification03Icon, UserIcon } from '@hugeicons/core-free-icons'
import {
HomeIcon as HomeDuotone,
SearchIcon as SearchDuotone,
Notification03Icon as NotificationDuotone,
UserIcon as UserDuotone,
} from '@hugeicons-pro/core-duotone-rounded'
@Component({
selector: 'app-nav',
template: `
`,
})
export class NavComponent {
activeTab = 'home'
navItems = [
{ id: 'home', solidIcon: HomeIcon, duotoneIcon: HomeDuotone },
{ id: 'search', solidIcon: SearchIcon, duotoneIcon: SearchDuotone },
{ id: 'notifications', solidIcon: Notification03Icon, duotoneIcon: NotificationDuotone },
{ id: 'profile', solidIcon: UserIcon, duotoneIcon: UserDuotone },
]
}
```
import { Callout } from 'nextra/components'
**A new update** of the HugeIcons Flutter package will be available soon with additional features and improvements.
# Pro Package Installation
To install the HugeIcons Pro package, you will find the installation instructions at your [HugeIcons account](https://hugeicons.com/account).
## Installation
You can install the HugeIcons package by adding it to your `pubspec.yaml` file:
```yaml copy
dependencies:
hugeicons: ^0.0.1
```
After adding the package to your `pubspec.yaml` file, run the following command to install the package:
```bash copy
flutter pub get
```
or
```bash copy
dart pub get
```
## Basic Usage
Import the package into your Flutter project:
```dart copy
import 'package:hugeicons/hugeicons.dart';
```
Here's an example of how to use HugeIcons in a Flutter application:
```dart copy
import 'package:flutter/material.dart';
import 'package:hugeicons/hugeicons.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to HugeIcons'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
HugeIcon(
icon: HugeIcons.bulk_rounded_abacus,
color: Colors.red,
size: 100.0,
),
HugeIcon(
icon: HugeIcons.duotone_rounded_home_02,
color: Colors.blue,
size: 100.0,
),
HugeIcon(
icon: HugeIcons.stroke_sharp_home_01,
color: Colors.green,
size: 100.0,
),
],
),
),
),
);
}
}
```
In the example above, the `HugeIcon` widget is included in a Flutter application with custom size and color.
## Customizing Icons
You can customize icons further by using the `color`, `size`, `variant`, and `type` properties:
```dart copy
HugeIcon(
icon: HugeIcons.bulk_rounded_abacus,
color: Colors.red,
size: 100.0,
),
``` # Svelte
The `@hugeicons/svelte` package is freely available on the public npm registry. To use HugeIcons in your Svelte project, you'll need to install both the Svelte component package and at least one icon package of your choice. This modular approach allows you to keep your bundle size minimal by including only the icons you plan to use.
## Installation
1. Install the Svelte component package:
```sh npm2yarn
npm install @hugeicons/svelte
```
2. Install your preferred icon package(s):
```sh npm2yarn
npm install @hugeicons-pro/core-{variant}-{style}
```
**Available styles:**
HugeIcons Pro offers 40,000+ icons across 9 unique styles:
```bash copy
# Stroke Styles (Line icons with different corner styles)
@hugeicons-pro/core-stroke-rounded
@hugeicons-pro/core-stroke-sharp
@hugeicons-pro/core-stroke-standard
# Solid Styles (Filled icons with different corner styles)
@hugeicons-pro/core-solid-rounded
@hugeicons-pro/core-solid-sharp
@hugeicons-pro/core-solid-standard
# Special Styles (Unique visual treatments)
@hugeicons-pro/core-bulk-rounded # Chunky style with depth
@hugeicons-pro/core-duotone-rounded # Two-color design with primary/secondary emphasis
@hugeicons-pro/core-twotone-rounded # Alternative two-color treatment
```
For more detailed information about our core packages and available styles, please visit our [Core Packages](/core-packages) page.
## Basic Usage
```svelte copy
```
## Props
| Prop | Type | Default | Description |
| ----------- | ------------- | ------------ | --------------------------------------------------------------------------------------- |
| icon | IconSvgObject | Required | The main icon component imported from an icon package |
| altIcon | IconSvgObject | - | Alternative icon component from an icon package for states, interactions, or animations |
| showAlt | boolean | false | When true, displays the altIcon instead of the main icon |
| size | number | 24 | Icon size in pixels |
| color | string | currentColor | Icon color (CSS color value) |
| strokeWidth | number | 1.5 | Width of the icon strokes (works with stroke-style icons) |
| class | string | - | Additional CSS classes |
## Icon Naming
Each icon in our packages can be imported using either its main name or its style-specific alias:
```svelte copy
// Both imports refer to the same icon
import { SearchIcon } from '@hugeicons/core-free-icons'
import { SearchStrokeRounded } from '@hugeicons/core-free-icons'
```
We recommend using the shorter main name (e.g., `SearchIcon`) for better readability. The style-specific aliases are useful when importing the same icon from different style packages to avoid naming conflicts.
## Examples of Dynamic Icon Interactions
### Search Bar with Clear Button
A search input that shows a clear button when text is entered:
```svelte copy
```
### Theme Toggle with Style Switch
A simple dark mode toggle using different icons:
```svelte copy
```
### Navigation Bar with Style Switch
A navigation bar that uses different icon styles to indicate the active state:
```svelte copy
```
# React
> When using Hugeicons Pro with React, we recommend installing the @hugeicons/react package along with at least one icon package of your choice. This modular approach keeps your bundle size minimal by including only the icons you need.
The `@hugeicons/react` package is freely available on the public npm registry. To use HugeIcons in your React project, you'll need to install both the React component package and at least one icon package of your choice.
## Installation
1. Install the React component package:
```sh npm2yarn
npm install @hugeicons/react
```
2. Install your preferred icon package(s):
```sh npm2yarn
npm install @hugeicons-pro/core-{variant}-{style}
```
**Available styles:**
HugeIcons Pro offers 40,000+ icons across 9 unique styles:
```bash copy
# Stroke Styles (Line icons with different corner styles)
@hugeicons-pro/core-stroke-rounded
@hugeicons-pro/core-stroke-sharp
@hugeicons-pro/core-stroke-standard
# Solid Styles (Filled icons with different corner styles)
@hugeicons-pro/core-solid-rounded
@hugeicons-pro/core-solid-sharp
@hugeicons-pro/core-solid-standard
# Special Styles (Unique visual treatments)
@hugeicons-pro/core-bulk-rounded # Chunky style with depth
@hugeicons-pro/core-duotone-rounded # Two-color design with primary/secondary emphasis
@hugeicons-pro/core-twotone-rounded # Alternative two-color treatment
```
For more detailed information about our core packages and available styles, please visit our [Core Packages](/core-packages) page.
## Basic Usage
```jsx copy
import { HugeiconsIcon } from '@hugeicons/react'
import { Notification03Icon } from '@hugeicons/core-free-icons'
function App() {
return
}
```
## Props
| Prop | Type | Default | Description |
| ----------- | ------------- | ------------ | --------------------------------------------------------------------------------------- |
| icon | IconSvgObject | Required | The main icon component imported from an icon package |
| altIcon | IconSvgObject | - | Alternative icon component from an icon package for states, interactions, or animations |
| showAlt | boolean | false | When true, displays the altIcon instead of the main icon |
| size | number | 24 | Icon size in pixels |
| color | string | currentColor | Icon color (CSS color value) |
| strokeWidth | number | 1.5 | Width of the icon strokes (works with stroke-style icons) |
| className | string | - | Additional CSS classes |
## Icon Naming
Each icon in our packages can be imported using either its main name or its style-specific alias:
```jsx copy
// Both imports refer to the same icon
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded'
import { SearchStrokeRounded } from '@hugeicons-pro/core-stroke-rounded'
```
We recommend using the shorter main name (e.g., `SearchIcon`) for better readability. The style-specific aliases are useful when importing the same icon from different style packages to avoid naming conflicts.
## Examples of Dynamic Icon Interactions
### Search Bar with Clear Button
A search input that shows a clear button when text is entered:
```jsx copy
import { useState } from 'react'
import { HugeiconsIcon } from '@hugeicons/react'
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons'
function SearchBar() {
const [value, setValue] = useState('')
return (
)
}
```
### Theme Toggle with Style Switch
A simple dark mode toggle using different icons:
```jsx copy
import { useState } from 'react'
import { HugeiconsIcon } from '@hugeicons/react'
import { SunIcon, Moon02Icon } from '@hugeicons/core-free-icons'
function ThemeToggle() {
const [isDark, setIsDark] = useState(false)
return (
)
}
```
### Navigation Bar with Style Switch
A navigation bar that uses different icon styles to indicate the active state:
```jsx copy
import { useState } from 'react'
import { HugeiconsIcon } from '@hugeicons/react'
import { HomeIcon, SearchIcon, Notification03Icon, UserIcon } from '@hugeicons/core-free-icons'
import {
HomeIcon as HomeDuotone,
SearchIcon as SearchDuotone,
Notification03Icon as NotificationDuotone,
UserIcon as UserDuotone,
} from '@hugeicons-pro/core-duotone-rounded'
function NavigationBar() {
const [activeTab, setActiveTab] = useState('home')
const NavItem = ({ id, SolidIcon, DuotoneIcon }) => (
)
return (
)
}
```
# WordPress
> Hugeicons plugin provides a seamless way to use Hugeicons in your WordPress site. This plugin is designed to make icon management and implementation as simple as possible, with access to 4,300+ free icons and up to 40,000+ premium icons.
>
> 👉 [Get the Hugeicons WordPress Plugin](https://wordpress.org/plugins/hugeicons/)
## Installation
1. Install the Hugeicons WordPress Plugin:
```bash
# Option 1: From WordPress Plugin Directory
1. Go to WordPress Dashboard > Plugins > Add New
2. Search for "Hugeicons"
3. Click "Install Now" and then "Activate"
# Option 2: Manual Installation
1. Upload the plugin files to the `/wp-content/plugins/hugeicons` directory
2. Go to WordPress Dashboard > Plugins
3. Activate the plugin through the 'Plugins' screen
4. Use the Settings->Hugeicons screen to configure the plugin
```
## Features
### Free Version
- **Icon Library**: Access to 4,300+ free icons
- **Block Editor Integration**: Icon picker interface for block editors
- **Shortcode Support**: Easy implementation with shortcodes
- **Modern Interface**: Responsive admin interface
- **WordPress Compatibility**: Works with WordPress 5.0 or higher
### Pro Version
- **Extended Library**: Access to 40,000+ premium icons
- **Multiple Styles**:
- Solid
- Duotone
- Twotone
- Stroke
- Bulk
- **Regular Updates**: Continuous additions to the icon library
- **Priority Support**: Premium support access
## Basic Usage
### Using the Icon Picker
1. Click the Hugeicons button in your editor
2. Search and select your desired icon
3. Insert it into your content
### Using Shortcodes
```php
[hugeicons icon="icon-name" size="32" color="#333333"]
```
## System Requirements
- WordPress 5.0 or higher
- PHP 7.4 or higher
## External Services
The plugin connects to Hugeicons' servers for the following purpose:
**Icons API Service**
- **Endpoint**: `https://hugeicons.com/api`
- **Purpose**: Fetches icon metadata and updates
- **When**: Only during icon picker usage in the WordPress editor
- **Data**: Only technical requests for icon data; no personal information is transmitted
## Screenshots
Here are the key interfaces and features of the Hugeicons WordPress plugin:
### Rich Text Controls
Add icons directly through the WordPress rich text editor interface.
### Icon Selection Modal
Search and filter through the extensive icon library using our intuitive icon picker modal.
### Implementation Example
See how icons are implemented in your WordPress content.
### Frontend View
Preview of how icons appear on your live WordPress site.
# Quick Start with Hugeicons Free Icon Font
Get started quickly with Hugeicons Free Icon Font - a collection of 4,000+ high-quality stroke-rounded icons perfect for your web projects. This guide will help you set up and use our icon font in minutes.
## Installation
The fastest way to get started is by using our CDN. Simply add this line to the `` section of your HTML:
```html
```
This gives you instant access to our complete collection of 4,000+ free stroke-rounded icons, hosted on Google Cloud CDN for reliable performance.
## Usage
Using icons is straightforward:
1. Add the CDN link to your HTML head section
2. Insert icons using the `` tag with the appropriate class name
3. Browse our icon collection to find the perfect icons for your project
### Usage Example
Here's a complete example showing how to implement multiple icons:
```html
Hugeicons Example
abacus
absolute
acceleration
access
```
Each icon is implemented using the `hgi-stroke` class combined with the specific icon class (e.g., `hgi-abacus`, `hgi-absolute`, etc.).
## Features
- **4,000+ Free Icons**: Access our complete collection of stroke-rounded icons
- **Multiple Formats**: Available in TTF, WOFF, WOFF2, EOT, and SVG formats for maximum compatibility
- **No Attribution Required**: Free for both personal and commercial use
- **Google Cloud CDN**: Fast and reliable delivery worldwide
- **Cross-Browser Support**: Works seamlessly across all modern browsers
## Available Formats
Hugeicons Free Icon Font supports multiple formats to ensure compatibility across different platforms and browsers:
- WOFF2 (Primary format for modern browsers)
- WOFF (Broad browser support)
- TTF (TrueType Font)
- EOT (For legacy IE support)
- SVG (Vector format)
## Looking for More?
While our free version offers 4,000+ high-quality icons, you can unlock even more possibilities with Hugeicons Pro:
- Access to 40,000+ icons in 9 different styles
- Cloudflare CDN for enhanced performance
- Regular updates with new icons
- Exclusive features and early access to new releases
# 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)
5. Once created, you'll get a unique embed code for your set.
## Installation
Add the following code to the `` section of your HTML:
```html
```
## Usage
To use an icon from your set, use the following HTML structure:
```html
```
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
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# Icon Selection
Selecting the right icons for your application is crucial for creating an intuitive and aesthetically pleasing user interface. Icons serve as visual cues that help users navigate your application and understand its features quickly. This guide provides best practices for icon selection to enhance your application's design and usability.
## Understand Your Audience
Before choosing icons, it's essential to understand your target audience. Consider the cultural context, age group, and technical proficiency of your users. Icons that are intuitive for one group may not be for another. Tailoring your icon selection to your audience ensures that your application is user-friendly and accessible.
## Consistency is Key
Maintain consistency in style, size, and color across all icons within your application. Consistency helps to create a cohesive look and feel, making your application appear more professional and easier to use. Whether you choose outlined, filled, or colored icons, ensure that the same style is applied throughout.
## Clarity and Simplicity
Choose icons that are simple and easily recognizable. Complex icons can be confusing and may not convey their intended meaning at a glance. Icons should be straightforward, with a clear connection to their function or the content they represent.
## Size and Readability
Ensure that icons are appropriately sized for their context. Icons should be large enough to be easily identifiable without overwhelming the surrounding content. Consider the different devices and screen sizes your application will be used on and adjust icon sizes accordingly.
## Test for Comprehension
Test your icons with a segment of your target audience to ensure they are easily understood. What may seem obvious to you might not be to others. Gathering feedback early in the design process can save time and effort by identifying icons that may need to be replaced or modified.
## Use Text Labels When Necessary
While icons can significantly reduce text clutter and make your application more visually appealing, some functions may require additional clarification. In cases where an icon's purpose isn't immediately apparent, consider using a text label to eliminate ambiguity.
## Accessibility Considerations
Ensure your icons are accessible to all users, including those with visual impairments. Use alt text for icons to provide a text alternative. Additionally, consider color contrasts and the use of symbols that are universally recognized to accommodate users with color vision deficiencies.
## Keep Up with Trends
Icon styles can evolve over time. Stay informed about current design trends to keep your application looking modern. However, always prioritize clarity and functionality over aesthetic trends.
## Conclusion
Choosing the right icons is a delicate balance between design, functionality, and user experience. By following these best practices, you can select icons that enhance your application's usability and aesthetic appeal. Remember, the goal is to create an intuitive and engaging environment for your users, where icons play a pivotal role in navigation and interaction.
# Application Integration Best Practices
Integrating icons into your application is not just about choosing the right visuals; it's also about ensuring they enhance usability, maintain consistency, and align with your brand. This guide provides best practices for incorporating HugeIcons into your application effectively.
## Consistency is Key
Ensure consistent use of icons throughout your application. Consistency in icon style (e.g., outline, filled), size, and color enhances the user experience and reinforces your brand identity.
- **Style Consistency:** Stick to a single variant (e.g., stroke, solid) across all icons to maintain a cohesive look.
- **Size Consistency:** Use consistent icon sizes for similar elements across your application. For example, all icons in your navigation bar should be the same size.
- **Color Consistency:** Use your brand colors for icons when appropriate, but ensure they are legible against their background.
## Enhance Usability
Icons should make your application more intuitive and accessible to users. Follow these guidelines to enhance usability:
- **Descriptive Icons:** Choose icons that clearly communicate their function or meaning to avoid confusion.
- **Labels:** Accompany icons with text labels for critical actions, especially if the icon's meaning might not be immediately obvious to all users.
- **Accessible Design:** Ensure icons are accessible to users with disabilities.
## Keep Your Icon Library Updated
HugeIcons regularly updates its library with new icons and features. Stay up-to-date with these releases to take advantage of the latest designs and improvements.
- **Regular Updates:** Check for updates to the HugeIcons library and incorporate them into your application to keep your icon set fresh and relevant.
Each icon is implemented using the `hgi-stroke` class combined with the specific icon class (e.g., `hgi-abacus`, `hgi-absolute`, etc.).
## Features
- **4,000+ Free Icons**: Access our complete collection of stroke-rounded icons
- **Multiple Formats**: Available in TTF, WOFF, WOFF2, EOT, and SVG formats for maximum compatibility
- **No Attribution Required**: Free for both personal and commercial use
- **Google Cloud CDN**: Fast and reliable delivery worldwide
- **Cross-Browser Support**: Works seamlessly across all modern browsers
## Available Formats
Hugeicons Free Icon Font supports multiple formats to ensure compatibility across different platforms and browsers:
- WOFF2 (Primary format for modern browsers)
- WOFF (Broad browser support)
- TTF (TrueType Font)
- EOT (For legacy IE support)
- SVG (Vector format)
## Looking for More?
While our free version offers 4,000+ high-quality icons, you can unlock even more possibilities with Hugeicons Pro:
- Access to 40,000+ icons in 9 different styles
- Cloudflare CDN for enhanced performance
- Regular updates with new icons
- Exclusive features and early access to new releases
# 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)
5. Once created, you'll get a unique embed code for your set.
## Installation
Add the following code to the `` section of your HTML:
```html
```
## Usage
To use an icon from your set, use the following HTML structure:
```html
```
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
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# Icon Selection
Selecting the right icons for your application is crucial for creating an intuitive and aesthetically pleasing user interface. Icons serve as visual cues that help users navigate your application and understand its features quickly. This guide provides best practices for icon selection to enhance your application's design and usability.
## Understand Your Audience
Before choosing icons, it's essential to understand your target audience. Consider the cultural context, age group, and technical proficiency of your users. Icons that are intuitive for one group may not be for another. Tailoring your icon selection to your audience ensures that your application is user-friendly and accessible.
## Consistency is Key
Maintain consistency in style, size, and color across all icons within your application. Consistency helps to create a cohesive look and feel, making your application appear more professional and easier to use. Whether you choose outlined, filled, or colored icons, ensure that the same style is applied throughout.
## Clarity and Simplicity
Choose icons that are simple and easily recognizable. Complex icons can be confusing and may not convey their intended meaning at a glance. Icons should be straightforward, with a clear connection to their function or the content they represent.
## Size and Readability
Ensure that icons are appropriately sized for their context. Icons should be large enough to be easily identifiable without overwhelming the surrounding content. Consider the different devices and screen sizes your application will be used on and adjust icon sizes accordingly.
## Test for Comprehension
Test your icons with a segment of your target audience to ensure they are easily understood. What may seem obvious to you might not be to others. Gathering feedback early in the design process can save time and effort by identifying icons that may need to be replaced or modified.
## Use Text Labels When Necessary
While icons can significantly reduce text clutter and make your application more visually appealing, some functions may require additional clarification. In cases where an icon's purpose isn't immediately apparent, consider using a text label to eliminate ambiguity.
## Accessibility Considerations
Ensure your icons are accessible to all users, including those with visual impairments. Use alt text for icons to provide a text alternative. Additionally, consider color contrasts and the use of symbols that are universally recognized to accommodate users with color vision deficiencies.
## Keep Up with Trends
Icon styles can evolve over time. Stay informed about current design trends to keep your application looking modern. However, always prioritize clarity and functionality over aesthetic trends.
## Conclusion
Choosing the right icons is a delicate balance between design, functionality, and user experience. By following these best practices, you can select icons that enhance your application's usability and aesthetic appeal. Remember, the goal is to create an intuitive and engaging environment for your users, where icons play a pivotal role in navigation and interaction.
# Application Integration Best Practices
Integrating icons into your application is not just about choosing the right visuals; it's also about ensuring they enhance usability, maintain consistency, and align with your brand. This guide provides best practices for incorporating HugeIcons into your application effectively.
## Consistency is Key
Ensure consistent use of icons throughout your application. Consistency in icon style (e.g., outline, filled), size, and color enhances the user experience and reinforces your brand identity.
- **Style Consistency:** Stick to a single variant (e.g., stroke, solid) across all icons to maintain a cohesive look.
- **Size Consistency:** Use consistent icon sizes for similar elements across your application. For example, all icons in your navigation bar should be the same size.
- **Color Consistency:** Use your brand colors for icons when appropriate, but ensure they are legible against their background.
## Enhance Usability
Icons should make your application more intuitive and accessible to users. Follow these guidelines to enhance usability:
- **Descriptive Icons:** Choose icons that clearly communicate their function or meaning to avoid confusion.
- **Labels:** Accompany icons with text labels for critical actions, especially if the icon's meaning might not be immediately obvious to all users.
- **Accessible Design:** Ensure icons are accessible to users with disabilities.
## Keep Your Icon Library Updated
HugeIcons regularly updates its library with new icons and features. Stay up-to-date with these releases to take advantage of the latest designs and improvements.
- **Regular Updates:** Check for updates to the HugeIcons library and incorporate them into your application to keep your icon set fresh and relevant.