Static

Static assets and utilities for Solar Icons that work without JavaScript frameworks. This package provides individual SVG files, an SVG sprite, and Node.js utilities for server-side string templating.

npm install @solar-icons/static

What you can accomplish:

Embed raw SVGs or an SVG sprite directly in HTML
Import SVG strings in Node.js applications and server-side rendering
Build static websites and applications without JavaScript framework dependencies

This package includes the following implementations of Solar Icons:

Individual SVG files
SVG sprite
A JavaScript library exporting SVG strings
JSON Metadata

SVG Sprite

The package includes a pre-built sprite containing all the icons. Symbols are named {kebab-name}-{style} (e.g. heart-bold). The sprite is an external symbol file: inline it on the page, then reference symbols with <use>.

Basic sprite usage:

<!-- Inline the sprite somewhere in the page, then reference symbols -->
<div id="sprite" style="display: none;"></div>

<svg class="solar-icon solar-heart-bold" aria-hidden="true">
    <use href="#heart-bold" />
</svg>

<script>
    const res = await fetch('https://cdn.jsdelivr.net/npm/@solar-icons/static/dist/sprite.svg')
    document.getElementById('sprite').innerHTML = await res.text()
</script>

Using a CDN

Since @solar-icons/static is published on npm, you can load individual SVGs or the sprite directly from a CDN like jsDelivr or unpkg:

<!-- Load an individual SVG in an <img> -->
<img
    src="https://cdn.jsdelivr.net/npm/@solar-icons/static/dist/icons/bold/heart.svg"
    alt="Heart"
    width="24"
    height="24" />

<!-- Load an individual SVG in a <figure> -->
<figure>
    <img
        src="https://cdn.jsdelivr.net/npm/@solar-icons/static/dist/icons/bold/heart.svg"
        alt="Heart" />
    <figcaption>Solar heart icon</figcaption>
</figure>

<img> cannot navigate to a symbol inside an external sprite. Use the inline <svg><use> pattern above for symbols.

Inline with CSS helper class

If you'd prefer, you can use CSS to hold your base SVG properties. Unlike standard SVG properties, Solar Icons rely on specific CSS variables to control their rendering, especially for duotone styles.

.solar-icon {
    /* Default variables */
    --solar-color: currentColor;
    --solar-size: 24px;

    /* For Linear, Broken and LineDuotone */
    --solar-stroke-width: 1.5;

    /* For duotone styles */
    --solar-secondary-color: currentColor;
    --solar-secondary-opacity: 0.5;

    width: var(--solar-size);
    height: var(--solar-size);
}

SVG file as string

To import an SVG as a string (e.g., for templating). Works in Node.js and in bundlers like Vite and Webpack:

// Per-icon import: style is in the path, the export keeps the style suffix
import { HeartBoldIcon } from '@solar-icons/static/bold/heart'

// Top-level import: same export name
import { HeartBoldIcon } from '@solar-icons/static'

The raw .svg files themselves are not importable from the package (only the exported subpaths resolve). To embed an SVG file directly, use the CDN URL in an <img> as shown above.

Node.js

You can import Solar Icons as SVG strings directly in Node.js projects. @solar-icons/static is an ESM-only package.

import { HeartBoldIcon } from '@solar-icons/static'

// Per-icon import for lighter resolution
import { HeartBoldIcon } from '@solar-icons/static/bold/heart'

Every icon export name is PascalCase and includes the style suffix (e.g. HeartBoldIcon, HeartLinearIcon), whether imported from the top level or from a style subpath.

Example with Node.js

import http from 'http'
import { HeartBoldDuotoneIcon } from '@solar-icons/static'

const server = http.createServer((req, res) => {
    res.statusCode = 200
    res.setHeader('Content-Type', 'text/html')

    res.end(`
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          .solar-icon {
            --solar-color: #ef4444;
            --solar-size: 64px;
            --solar-secondary-color: #fca5a5;
            --solar-secondary-opacity: 0.8;
          }
        </style>
      </head>
      <body>
        <h1>Solar Icons</h1>
        <p>This is a Solar icon:</p>
        <div class="solar-icon">
          ${HeartBoldDuotoneIcon}
        </div>
      </body>
    </html>
  `)
})

const hostname = '127.0.0.1'
const port = 3000

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`)
})

Metadata & Collections

If you are building an icon picker or need a searchable list, you can import the metadata JSON files.

// Complete metadata with tags and categories
import metadata from '@solar-icons/static/metadata.json' with { type: 'json' }

// Just the list of icon names and styles
import icons from '@solar-icons/static/icons.json' with { type: 'json' }

On this page