Documentation

Solar Icons

A lightweight, zero-dependency JavaScript loader that dynamically renders Solar Icon Set SVGs using simple <i> tags — no build step, no framework required.

MIT License Zero Dependencies Vanilla JS CDN Ready

Quick Start

Add the script to your HTML — production or development build:

<!-- Production (recommended) -->
<script src="https://cdn.jsdelivr.net/gh/helloanaroul/icons@refs/heads/main/icons.min.js"></script>

<!-- Development (readable, with comments) -->
<script src="https://cdn.jsdelivr.net/gh/helloanaroul/icons@refs/heads/main/icons.js"></script>

Then use any icon with a single <i> tag:

<i name="home-bold"></i>

Usage

There are three ways to reference an icon:

Method 1 · Name attribute (simplest)

<i name="home-bold"></i>

Method 2 · Prefix + class

<i class="solar-home-bold"></i>

Method 3 · Exact icon key as class

<i class="home-bold"></i>

Styling

Icons inherit font-size and color from their parent — style them like text:

i {
    font-size: 24px;   /* controls icon size */
    color: #f97316;    /* controls icon color */
}

Or inline:

<i name="star-bold" style="font-size: 32px; color: gold;"></i>

Icon Styles

Solar icons follow the pattern {name}-{style}:

Style	Example
`bold`	`home-bold`
`linear`	`home-linear`
`outline`	`home-outline`
`broken`	`home-broken`
`duotone`	`home-duotone`
`bold-duotone`	`home-bold-duotone`

Performance

01 If no <i> tags are found on the page, icons.json is never fetched.

02 Only <i> tags with a name or class attribute are queried.

03 Pure vanilla JavaScript — no jQuery, no frameworks, no dependencies.

04 Icon aliases automatically resolve to their parent icon.

License

MIT — free to use, modify, and distribute.