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@2.0.0-beta.0

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.

Basic sprite usage:

<img src="@solar-icons/static/sprite.svg#heart-bold" />

Using a CDN

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

<!-- Load the sprite from unpkg -->
<img src="https://unpkg.com/@solar-icons/static/dist/sprite.svg#heart-bold" />

<!-- Load an individual SVG -->
<img src="https://unpkg.com/@solar-icons/static/dist/icons/bold/heart.svg" />

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):

// Specific icon style import
import heartIcon from '@solar-icons/static/dist/icons/bold/heart.svg'

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'

// You can also import specific styles for lighter resolution
import { HeartIcon } from '@solar-icons/static/bold'

Each icon export name is in PascalCase and includes the style suffix (e.g. BoldIcon, LinearIcon) when imported from the top level.

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