Custom Icons
Custom Icons allows you to create and manage your own icon collections within the Hugeicons platform. With this feature, you can upload your SVG icons, organize them into collections, and use them alongside Hugeicons' professional icon sets.
Note: Custom Icons feature is available exclusively for Lifetime license users.
Getting Started
Create a Collection
- Navigate to the Custom Icons tab in your dashboard.
- Click on the Add New Collection button.
- Enter a name for your collection and click Create Collection.
Upload Icons
You can upload SVG icons to your collection using these methods:
- Click the Upload Icons button on your collection.
- Drag and drop your SVG files into the upload area or click to select files from your device.
Icon Naming Requirements
When uploading icons, follow these naming conventions:
- Use kebab-case for icon names (e.g., "menu-hamburger", "arrow-right")
- Names must:
- Use only lowercase letters, numbers, and hyphens
- Start with a letter
- Not have consecutive hyphens
Using Your Custom Icons
Download Package
Once you've uploaded your icons, you can download them as a package to use in your projects:
- Click the Download Package button on your collection.
- Follow these steps to implement in your project:
1. Download and place the package
After downloading the package file, put it in a suitable place in your project.
2. Import the Hugeicons component
import { HugeiconsIcon } from "@hugeicons/react"3. Import the icons from the package
import { Logo } from "/path/to/hgi-test"4. Use the icons in your components
<HugeiconsIcon icon={Logo} />Managing Collections
You can manage your custom icon collections by:
- Adding more icons to existing collections
- Downloading the package with updated icons
- Deleting collections or individual icons when needed
The Custom Icons feature is designed to seamlessly integrate your own icons with the Hugeicons ecosystem, giving you more flexibility while maintaining a consistent implementation across your projects.