CDN SDK
Getting Started
Auto-generated JavaScript SDK for easy icon loading
Overview
The CDN SDK is an auto-generated JavaScript file that loads your icons automatically. No build step, no configuration—just add one script tag and start using icons.
Key Features:
- Zero configuration
- Auto-loading with MutationObserver
- Smart in-memory caching
- Framework agnostic (React, Vue, Svelte, vanilla JS)
- ~5-7 KB gzipped for 100 icons
Getting Started
Add the SDK script
Add this to your HTML <head>:
<script src="https://cdn.icon.dev/id-{projectSlug}/sdk.min.js"></script>Replace {projectSlug} with your project slug from the dashboard.
Use icons in HTML
<i data-icon="home"></i>
<i data-icon="search"></i>
<i data-icon="user"></i>Icons load automatically. That's it!
The SDK uses MutationObserver to detect and load icons added dynamically.
How It Works
- Add the SDK script to your HTML
- Use
<i data-icon="name">elements - Icons load automatically when elements appear
- MutationObserver tracks dynamic content
- In-memory cache prevents duplicate requests
Basic Usage
Standard icon
<i data-icon="home"></i>With custom size and color
<i data-icon="home" data-icon-size="32" data-icon-color="#3b82f6"></i>With stroke color and classes
<i data-icon="home" data-icon-stroke="#333" data-icon-class="hover:scale-110 transition"></i>Available Attributes
| Attribute | Type | Description |
|---|---|---|
data-icon | string | Icon name (required) |
data-icon-size | number | Width and height in pixels |
data-icon-color | string | Fill color (hex, rgb, etc.) |
data-icon-stroke | string | Stroke color |
data-icon-class | string | Additional CSS classes |
Next Steps
- JavaScript API - Preload, cache control, and more
- Framework Integration - React, Vue, Svelte components
- Best Practices - Performance optimization tips