Home Docs Self-Hosting

Self-Hosting

Host Iconfyra icon font 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:

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

<!-- 2. 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.