Home Docs Self-Hosting

Self-Hosting

Host Iconfyra files on your own server for complete control over delivery, caching, and availability. This is ideal for production environments where you want zero external dependencies.

Self-hosting downloads require a Basic plan or above. Free plan users can use the CDN instead. View plans

Step 1: Download the Package #

Download the Iconfyra package from your Dashboard → Downloads page. Two download types are available:

  • Full Icon Pack — All icons in every weight and theme your plan includes
  • Collection Pack — Only the icons in a specific collection (smaller file size)

The download is a .zip file that includes everything you need: CSS, JavaScript, web fonts, SVG sprites, individual SVGs, and a self-contained README.html guide.

Step 2: Directory Structure #

After extracting the ZIP, you will see the following file structure:

iconfyra-icons/
├── css/
│   ├── iconfyra.css                    # Base styles & utilities (required)
│   ├── iconfyra.min.css                # Minified base
│   ├── iconfyra-classic-solid.css      # Classic Solid weight
│   ├── iconfyra-classic-regular.css    # Classic Regular weight
│   ├── iconfyra-classic-light.css      # Classic Light weight (Pro)
│   ├── iconfyra-classic-thin.css       # Classic Thin weight (Pro)
│   ├── iconfyra-duotone-solid.css      # Duotone Solid weight (Pro)
│   ├── iconfyra-duotone-regular.css    # Duotone Regular weight (Pro)
│   ├── all.css                         # All weights combined
│   └── all.min.css                     # Minified all
├── js/
│   ├── iconfyra.js                     # Base SVG container (required for JS approach)
│   ├── iconfyra-classic-solid.js       # SVG symbols for Classic Solid
│   ├── iconfyra-classic-regular.js     # SVG symbols for Classic Regular
│   ├── all.js                          # All symbols combined
│   └── ...
├── webfonts/
│   ├── iconfyra-solid.woff2
│   ├── iconfyra-solid.woff
│   ├── iconfyra-solid.ttf
│   ├── iconfyra-regular.woff2
│   └── ...                             # .woff2, .woff, .ttf per weight
├── sprites/
│   ├── iconfyra-classic-solid.svg      # SVG sprite sheet
│   ├── iconfyra-classic-regular.svg
│   └── ...
├── svgs/
│   ├── classic/
│   │   ├── solid/                      # Individual SVG files
│   │   ├── regular/
│   │   └── ...
│   └── duotone/
│       └── ...
├── README.html                         # Self-contained setup guide
└── LICENSE.txt

The ZIP includes a README.html file with a complete self-contained guide. Open it in your browser for quick reference — no internet needed.

Step 3: Copy Files to Your Project #

Copy the directories you need into your project. The CSS files reference the webfonts/ directory using a relative path (../webfonts/), so the directory structure must be preserved:

your-project/
├── assets/
│   ├── css/
│   │   ├── iconfyra.css               # Base (required)
│   │   ├── iconfyra-classic-solid.css  # Weight(s) you need
│   │   └── iconfyra-classic-regular.css
│   └── webfonts/
│       ├── iconfyra-solid.woff2
│       ├── iconfyra-solid.woff
│       ├── iconfyra-solid.ttf
│       ├── iconfyra-regular.woff2
│       └── ...
├── index.html
└── ...

The CSS expects ../webfonts/ relative to the CSS file. If you place the CSS and fonts in different locations, update the @font-face paths in the CSS file.

Option A: CSS + Web Fonts (Recommended) #

The CSS approach uses web fonts to render icons. This is the recommended method for most projects.

<head>
    <!-- 1. Always include the base stylesheet -->
    <link rel="stylesheet" href="/assets/css/iconfyra.css">

    <!-- 2. Include the weights you need -->
    <link rel="stylesheet" href="/assets/css/iconfyra-classic-solid.css">
    <link rel="stylesheet" href="/assets/css/iconfyra-classic-regular.css">

    <!-- Or load all weights at once -->
    <link rel="stylesheet" href="/assets/css/all.css">
</head>
<body>
    <!-- Use icons -->
    <i class="icf-solid icf-house"></i>
    <i class="icf-regular icf-heart"></i>
    <i class="icf-light icf-star"></i>
    <i class="icf-thin icf-bell"></i>

    <!-- Duotone icons (Pro) -->
    <i class="icf-duotone icf-solid icf-house"></i>
</body>

Option B: SVG + JavaScript #

The JS approach replaces <i> elements with inline SVGs automatically. This gives you sharper rendering and the ability to style individual paths.

<!-- 1. Always include the base script -->
<script src="/assets/js/iconfyra.js"></script>

<!-- 2. Include the weights you need -->
<script src="/assets/js/iconfyra-classic-solid.js"></script>
<script src="/assets/js/iconfyra-classic-regular.js"></script>

<!-- Or load all at once -->
<script src="/assets/js/all.js"></script>

Use the same HTML markup as the CSS approach. The JavaScript will automatically find and replace icons with inline SVGs.

Option C: SVG Sprites #

SVG sprites let you use icons without any CSS or JS framework. Reference icons via the sprite sheet:

<svg width="24" height="24">
    <use href="/assets/sprites/iconfyra-classic-solid.svg#icf-house"></use>
</svg>

Duotone Icons #

Duotone icons use two layers with independent colors. Include a duotone CSS file and use the icf-duotone class prefix:

<!-- Include duotone weight -->
<link rel="stylesheet" href="/assets/css/iconfyra-duotone-solid.css">

<!-- Use duotone icons -->
<i class="icf-duotone icf-solid icf-house"></i>

Customize duotone colors using CSS custom properties:

.icf-duotone {
    --icf-primary-color: #2563eb;
    --icf-primary-opacity: 1;
    --icf-secondary-color: #60a5fa;
    --icf-secondary-opacity: 0.4;
}

Font File Paths #

The CSS files use @font-face declarations that reference fonts at ../webfonts/:

@font-face {
    font-family: 'Iconfyra Solid';
    src: url('../webfonts/iconfyra-solid.woff2') format('woff2'),
         url('../webfonts/iconfyra-solid.woff') format('woff'),
         url('../webfonts/iconfyra-solid.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

If your directory structure differs, update the paths. For example, if CSS and fonts are in the same directory:

src: url('./iconfyra-solid.woff2') format('woff2');

Server MIME Types #

Ensure your web server serves font files with the correct MIME types:

Extension MIME Type
.woff2 font/woff2
.woff font/woff
.ttf font/ttf

Apache (.htaccess)

# Add font MIME types
AddType font/woff2 .woff2
AddType font/woff .woff
AddType font/ttf .ttf

Nginx

# In your nginx.conf or site config
types {
    font/woff2  woff2;
    font/woff   woff;
    font/ttf    ttf;
}

CORS Headers #

If you serve fonts from a different domain or subdomain, add CORS headers:

# Apache
<FilesMatch "\.(woff2?|ttf|css)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# Nginx
location ~* \.(woff2?|ttf|css)$ {
    add_header Access-Control-Allow-Origin *;
}

Caching #

Since the download is versioned, you can set aggressive cache headers for optimal performance:

# Apache — long cache for fonts, shorter for CSS
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType font/woff "access plus 1 year"
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
</IfModule>

# Nginx
location ~* \.(woff2?|ttf)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}
location ~* \.css$ {
    expires 30d;
}

Loading Strategy Tips #

  • Load only what you need — Use individual weight files (iconfyra-classic-solid.css) instead of all.css to reduce file size.
  • Use font-display: block — Already set in the CSS. This prevents invisible icons during font load.
  • Preload critical fonts — Add a <link rel="preload"> for your most-used weight:
<link rel="preload" href="/assets/webfonts/iconfyra-solid.woff2"
      as="font" type="font/woff2" crossorigin>
  • Collection packs — For projects that only use a few icons, create a Collection and download just that subset for a much smaller file.

Self-hosting gives you full control over caching, compression, and CDN configuration. The ZIP also includes individual SVG files in svgs/ for use in design tools, build pipelines, or frameworks that support SVG imports.