Home Docs Collection Embed

Collection Embed

The easiest way to use the Iconfyra icon font in your project. Create a collection in your dashboard, pick the icons you need, and paste a single link tag - no downloads, no build step.

Iconfyra does not provide a public CDN. Embed URLs are generated per user through Collections - create a free account to get started.

How It Works #

  1. Go to Dashboard → Collections and create a new collection
  2. Add the icons you want to include
  3. Copy the embed link from the collection detail page
  4. Paste it as a <link> tag in your HTML

Add the Embed Link #

Add the <link> tag from your collection inside the <head> of your HTML:

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

    <!-- Your Iconfyra Collection -->
    <link rel="stylesheet"
          href="https://cdn.iconfyra.com/collections/YOUR_COLLECTION_CODE.css">

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

Your collection code is unique to your account and is shown in the dashboard on the collection detail page.

JavaScript Embed #

Prefer JavaScript? Use the .js embed instead - it injects the icon stylesheet automatically:

<script src="https://cdn.iconfyra.com/collections/YOUR_COLLECTION_CODE.js" defer></script>

Example Usage #

Once your embed link 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>

Performance Tips #

  • Only add icons you use - collections only include the icons you select, keeping the file size small
  • Use preconnect - add a preconnect hint before the embed link for faster loading
<!-- Faster loading with preconnect -->
<link rel="preconnect" href="https://cdn.iconfyra.com">
<link rel="stylesheet" href="https://cdn.iconfyra.com/collections/YOUR_COLLECTION_CODE.css">

Alternatives #

Collections are the quickest option. If you need more control:

  • Self-hosting - download the font files and host them yourself
  • API - fetch individual SVGs on demand via the REST API