Using Fairdox Icons

Every export below (HTML, inline SVG, React, or the JS widget) comes from the same place: pick your look on the site first, then copy the code for it. Nothing needs to be hand-edited afterward unless you want to.

1. Use the search bar on the homepage to find an icon by name, or open a category from the sidebar.
2. The toolbar above the grid sets stroke width and size for every icon on the page at once, live, so you can see the whole set at your target weight before picking one.
3. Click an icon to open its own panel. There you can fine-tune just that icon — a flat color, or an from / to gradient with an angle — and grab the CDN link, SVG code, React component, or a direct SVG/PNG download.
4. Picking “Auto” in the color swatch instead of a fixed hex makes the icon follow your site’s current text color (currentColor) instead of baking one in — only available for the inline SVG/React exports, an <img>-loaded CDN link always needs a real color since it can’t inherit page styles.

Whatever you land on maps directly onto the color/stroke/size/from/to/angle query params documented under HTML below, so you can also skip the UI entirely and build a link by hand once you know an icon’s category and slug.

The simplest option: a plain <img> tag pointed at an endpoint that renders the icon as an SVG on request, with your chosen color, stroke width, size and (optionally) gradient baked in as query parameters. No build step, no package to add, works in any HTML page, static site, or CMS field that accepts a raw URL.

https://icons.fairdox.in//api/icon/{category}/{slug}?color=hex&stroke=2&size=24

For example, the check icon at 48px, stroke 0.5, in near-black:

https://icons.fairdox.in//api/icon/ui/check?color=141414&stroke=0.5&size=48

<img src="https://icons.fairdox.in//api/icon/ui/check?color=141414&stroke=0.5&size=48" width="48" height="48" alt="Check icon" />

Responses are served with a long-lived, immutable Cache-Control header and an open Access-Control-Allow-Origin: *, so the same link works from any origin and CDN/browser caches it aggressively.

The “SVG code” tab in the customize panel gives you a complete, self-contained <svg> element you can paste directly into HTML or JSX. It works fully offline (no request to this site at runtime), and if you leave the color on its default and swap the stroke attribute back to currentColor, it inherits whatever text color surrounds it.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
  fill="none" stroke="#141414" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m5 12 4 4L19 6" />
</svg>

The “React” tab generates a small function component with your chosen stroke/size/color (or gradient) already applied, and it spreads {...props} onto the underlying <svg>, so you can still override width, height, className, or any other SVG attribute per usage.

function CheckIcon(props) {
  return (
    <svg viewBox="0 0 24 24" width={24} height={24} fill="none" stroke="#141414"
      strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="m5 12 4 4L19 6" />
    </svg>
  );
}

One script tag, then reference icons by class name, no per-icon copy/paste. Get your key from the API key tab on your account page (free to create).

<script
  src="https://icons.fairdox.in//fairicons.min.js"
  data-api-key="fi_live_xxxxxxxxx">
</script>

<i class="fi-check"></i>
<i class="fi-search"></i>

The script reads its own data-api-key, scans the page for fi-* classes, and replaces each match with the real inline <svg>, fetched only for the icons actually on the page. Nothing to install, no CSS/webfont file, and the 20,000+ icon set is never bundled into the script itself, it stays a few KB no matter how large the library gets. Works the same way inside React/Next.js: useEffect(() => window.fairicons?.refresh(), []) re-scans after client-side renders.

If a class name like fi-bell matches an icon in more than one category, the console logs a warning, use fi:category:slug (e.g. fi:social:bell) to pick one.

Attributes on the <i> element itself override that icon’s render, no matter which class form you used - the full set below is the same customization the site’s own live preview and CDN link give you, nothing is missing here.

Flat color and a fixed size:

<i class="fi-check" data-size="24" data-color="#141414" data-stroke-width="1.5"></i>

Gradient instead of a flat color:

<i class="fi-check" data-gradient-from="#6d5ef5" data-gradient-to="#f558a0" data-gradient-angle="45"></i>

Your API key is a publishable identifier, not a secret, it ships in plain text on every page that loads it. Restrict it to your own domain(s) and watch usage from the API key tab; the key alone can’t protect anything on its own.

The JS widget is just a thin wrapper around this endpoint, call it directly if you want the raw SVG markup yourself instead — batch-fetching icons for a build step, a design tool, or a backend that renders its own HTML.

GET https://icons.fairdox.in//api/v1/icons?key=fi_live_...&names=check,search,fi:social:bell

Response, keyed by exactly what you passed in names:

{
  "icons": { "check": "<svg ...>...</svg>", "search": "<svg ...>...</svg>" },
  "missing": [],
  "ambiguous": { "bell": ["social", "communication"] }
}

missing lists names that matched no icon; ambiguous lists bare slugs that matched more than one category (with the category list), retry those with the qualified category:slug form. Every returned SVG uses stroke="currentColor", so it inherits text color from wherever you place it. Requests are CORS-open (Access-Control-Allow-Origin: *) and uncached (Cache-Control: no-store), since a key’s quota has to be checked and consumed on every call.

Need the full catalog to search or filter yourself first? GET https://icons.fairdox.in//api/icons returns every icon’s category and slug as JSON, no key required, it’s the same manifest the homepage itself reads.