Docs / CDN
HTML embedReactVueCDN

CDN — kit.js

One <script> tag, then plain <i> tags anywhere in your HTML — no package, no build step, no framework. The script finds them, swaps each one for the real inline SVG, and keeps watching for any added later, so it works in a static page or a client-rendered app equally well.

This is a live embed. The heart above is rendered by kit.js, loaded on this page the same way the snippet below loads it anywhere else — including the purple, which is plain CSS color, not baked into the asset.

1. Add the script once

Anywhere on the page — <head> or the end of <body>, either works.

html
<script src="https://icons.sketchish.com/kit.js"></script>

2. Drop icons in

data-os-icon is the icon's slug. The os-{type}-{style}class picks which variant — leave it out and you get the icon's own default, the same Classic/Line-first priority getDefaultVariant() uses everywhere else on the site:

html
<i class="os os-classic-line" data-os-icon="heart"></i>
html
<!-- omit the type/style class to get the icon's own default -->
<i class="os" data-os-icon="heart"></i>

Theming via CSS color

style, class, and any other attribute on the tag carry over onto the swapped-in <svg>. Icons whose source has exactly one literal color get it replaced with currentColor at fetch time, so color actually works:

html
<i class="os os-classic-line" data-os-icon="heart"
   style="color: rgb(217, 119, 87)"></i>

Icons with two or more literal colors — every Duo-style icon, plus a number of nominally single-tone icons that use two very close near-black shades — keep their literal colors as-is and aren't themeable this way. Same rule, same limitation, as the React/Vue packages.

Type + style classes

9 valid combinations — one per type + style that actually has icons:

Dynamic content

The script re-scans automatically whenever new elements are added to the page — a client-side route change, a modal, anything rendered after the initial load — so <i data-os-icon> tags inserted later still get swapped without re-running anything yourself.

Free, non-Brands & Logos icons only

kit.jsis generated from the same Free, non-Brands-&-Logos icon set as the npm packages — those are third-party trademarks (Adobe, Apple, Amazon, and so on), not original artwork the kit can redistribute. A data-os-iconslug that isn't in that set — Paid or Brands & Logos — renders nothing: no broken image, no console error, just an empty <i> left in place.