Home Docs CDN Setup

CDN Setup

The quickest way to add Iconfyra to your project. Our CDN is globally distributed, cached, and free to use. One link tag is all you need.

Add the CSS Link Tag #

Add the following <link> tag inside the <head> of your HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Iconfyra Icons -->
    <link rel="stylesheet"
          href="https://cdn.iconfyra.com/1.0.0/css/all.min.css">

    <title>My Page</title>
</head>
<body>
    <!-- Now you can use icons -->
    <i class="icf-solid icf-house"></i>
</body>
</html>

Version Pinning #

The CDN URL includes the version number, so your project always uses the exact version you specify. This prevents unexpected changes when we release new versions.

<!-- Pin to a specific version (recommended) -->
<link rel="stylesheet" href="https://cdn.iconfyra.com/1.0.0/css/all.min.css">

<!-- Always use the latest version (not recommended for production) -->
<link rel="stylesheet" href="https://cdn.iconfyra.com/latest/css/all.min.css">

For production use, always pin to a specific version. Using latest means your icons could change without notice when we push updates.

Available CSS Files #

You can load all icon styles at once, or include only the styles you need to reduce file size:

File Contents Size (gzip) Plan
all.min.css All styles and icons ~48 KB All
solid.min.css Solid weight only ~12 KB Free
regular.min.css Regular weight only ~12 KB Free
light.min.css Light weight only ~12 KB PRO
thin.min.css Thin weight only ~11 KB PRO
duotone.min.css Duotone weight only ~15 KB PRO

Loading Specific Styles

To only load Solid and Regular styles (smaller download):

<!-- Load only what you need -->
<link rel="stylesheet" href="https://cdn.iconfyra.com/1.0.0/css/solid.min.css">
<link rel="stylesheet" href="https://cdn.iconfyra.com/1.0.0/css/regular.min.css">

Example Usage #

Once the stylesheet is loaded, use icons by combining a style class with the icon name:

<!-- Basic icons -->
<i class="icf-solid icf-house"></i>
<i class="icf-regular icf-envelope"></i>
<i class="icf-solid icf-bell"></i>

<!-- With sizing -->
<i class="icf-solid icf-heart icf-2x"></i>

<!-- In a button -->
<button>
    <i class="icf-solid icf-download"></i> Download
</button>

<!-- In a navigation link -->
<a href="/settings">
    <i class="icf-regular icf-gear"></i> Settings
</a>

Subresource Integrity (SRI) #

For additional security, you can use Subresource Integrity hashes to ensure the CDN file hasn't been tampered with. SRI hashes verify the file's contents match what you expect.

<link rel="stylesheet"
      href="https://cdn.iconfyra.com/1.0.0/css/all.min.css"
      integrity="sha384-AbCdEfGhIjKlMnOpQrStUvWxYz0123456789..."
      crossorigin="anonymous">

SRI hashes are generated for each release. You can find the correct hash on the Downloads page or in the release notes. The crossorigin="anonymous" attribute is required when using SRI with CDN resources.

Performance Tips #

  • Load only the styles you need — if you only use Solid icons, load solid.min.css instead of all.min.css
  • Use preconnect — add <link rel="preconnect" href="https://cdn.iconfyra.com"> before the stylesheet for faster loading
  • Pin your version — this allows browsers to cache the file indefinitely until you manually update
<!-- Optimal setup -->
<link rel="preconnect" href="https://cdn.iconfyra.com" crossorigin>
<link rel="stylesheet" href="https://cdn.iconfyra.com/1.0.0/css/solid.min.css">