Getting Started
Welcome to Iconfyra. Add 2,000+ beautifully crafted icons to your project in under a minute. No build tools required -- just include a stylesheet and start using icon classes.
Quick Start with CDN #
The fastest way to get started is with our CDN. Add this single line to your HTML <head>:
<link rel="stylesheet"
href="https://cdn.iconfyra.com/1.0.0/css/all.min.css">
Then use any icon in your HTML:
<!-- Solid style (default) -->
<i class="icf-solid icf-house"></i>
<!-- Regular style -->
<i class="icf-regular icf-envelope"></i>
<!-- With sizing -->
<i class="icf-solid icf-star icf-2x"></i>
That's it! A style class (like icf-solid) and the icon name class gives you a pixel-perfect icon.
Choose Your Method #
There are three ways to use Iconfyra in your project. Choose the one that fits best:
CDN Setup
Fastest option. Include one link tag and start using icons immediately.
Self-Hosting
Download and host the files yourself. Full control over delivery.
API Access
Search and serve icons programmatically via our RESTful API.
Download Package #
If you prefer to self-host, you can download the complete icon package:
- Free Package — includes Solid and Regular weights (2,000+ icons)
- Pro Package — includes all 5 weights: Solid, Regular, Light, Thin, and Duotone
Visit the Downloads page to get the latest package, or follow the Self-Hosting guide for step-by-step instructions.
Get an API Key #
To use the Iconfyra API for searching icons, retrieving SVGs, or building custom integrations, you need an API key.
- Create a free account (or log in)
- Go to your Dashboard → API Keys
- Click Generate New Key
- Copy the key and include it in your API requests
// Include your API key in the Authorization header
const response = await fetch('https://api.iconfyra.com/v1/icons?q=house', {
headers: {
'Authorization': 'Bearer icf_live_your_api_key_here'
}
});
Free accounts get 10,000 API calls per month. Need more? Upgrade to Pro for 1,000,000 calls/month.
Available Icon Styles #
Every icon in Iconfyra is available in up to 5 weights. The style you choose affects the visual thickness and fill of the icon.
| Style | Class | Description | Plan |
|---|---|---|---|
| Solid | icf-solid |
Filled icons, great for primary actions | Free |
| Regular | icf-regular |
Outlined icons, perfect for UI elements | Free |
| Light | icf-light |
Thinner outlines for a delicate look | PRO |
| Thin | icf-thin |
Ultra-thin lines for minimalist designs | PRO |
| Duotone | icf-duotone |
Two-layer icons with primary and secondary colors | PRO |