SVG icons · web component · MIT

Soft Frosted Icons

136 frosted glass icons in two finishes. Outline is glass tubing; duo-tone is filled glass with an accent core. Every icon sits on one 48 px grid with one stroke weight, and the whole set follows a single colour.

Browse icons GitHub

136icons 2finishes 0dependencies 5themes

Finish

Size 44px

Colour

Surface

Glint

01 · Use cases

Made for real interfaces

The same icons in the places you would actually put them: navigation, toolbars, status messages, dark mobile UI, dashboards and running text.

App navigation

Outline for resting items, duo-tone for the active one. Same shape, so the switch never shifts the layout.

Upload Export Share

Toolbars and buttons

At 18–20 px the outline finish stays crisp. On a filled button, set --sfi-color to white and the glass turns with it.

Payment received$1,240.00 from Northwind

Storage almost full92% of 50 GB used

Sync failedRetrying in 30 seconds

Status and feedback

One color per state. Every gradient, edge and core follows it, so success, warning and error need no extra assets.

Now playing
Frosted Hours · 2:41

Home Search Saved Alerts You

Dark mobile UI

Wrap the screen in data-sfi-theme="dusk". The frost darkens, glyphs stay light, nothing else changes.

$48.2kRevenue

2,914Active users

318Orders

+12.4%Growth

Dashboards

At 32–48 px duo-tone carries a tile on its own. Give each metric its own colour without redrawing anything.

Brand assets24 files

Q3 report.pdf2.1 MB

Hero shot.png840 KB

Launch cut.mp496 MB

Files and lists

Colour by type for quick scanning. Each row is one element, no sprite sheet and no icon font.

Press to find anything, to save it, and to send it on.

Inline with text

size takes any CSS length, so size="1.1em" scales with the surrounding type.

Plain SVG files

Every icon ships as a file in svg/outline and svg/duo. Use them as <img>, inline them, or drop them into Figma.

You're all caught up New messages land here. Check again

Empty states

At 64–96 px the duo-tone finish has room to show its glass, so one icon can carry an empty screen or onboarding step.

02 · Finishes

One drawing, two finishes

Each icon is drawn once on the grid. Both finishes come from that single drawing, so outline and duo-tone always line up.

Outline

Every stroke is a glass tube: frost face, accent core, specular rim and a soft shadow.
Layers are drawn across all strokes at once, so crossings fuse like one piece of glass.
Best for resting states, toolbars and dense UI.

Duo-tone

Filled glass. Bodies get a frost face, accent edge, glass rim and an inset accent core.
Glyphs such as !, text lines and dots are inlaid into the core as light glass tubes, tinted by the same colour.
Secondary parts like handles and trays are clear frost glass, which is the second tone.

03 · Colour and themes

One colour drives the whole set

Icons paint from currentColor. Set color on an icon, or --sfi-color on any ancestor, and every gradient follows. For dark UIs, the themes in tokens.css also retune the frost.

04 · Sizes

Sharp from 16 to 96 pixels

The grid is 48 units, so 24 px renders on an exact half grid. One stroke weight and 6 units of clear space between parallel strokes keep the glass from welding at small sizes.

05 · Icons

All 136 icons

Click any icon to open it full screen. Change its size, finish, colour and background there, step through the set with the arrow keys, and copy it as HTML, React or SVG.

06 · Get started

Install, register, use

No dependencies and no build step. Pick the entry that fits your stack.

1. Install

npm i soft-frosted-icons

Or load it straight from a CDN with no build at all:

<script type="module" src="https://cdn.jsdelivr.net/npm/soft-frosted-icons/src/define.js"></script>

2. Web component (any framework)

import "soft-frosted-icons/define";
import "soft-frosted-icons/tokens.css"; // optional themes

<frosted-icon name="bell"></frosted-icon>
<frosted-icon name="bell" finish="duo" size="32"
  color="#e11d48" label="Notifications"></frosted-icon>

3. React

import { FrostedIcon } from "soft-frosted-icons/react";

<FrostedIcon name="bell" finish="duo" size={24} />

React is an optional peer dependency, and only this entry imports it.

4. SVG strings (SSR, Vue, Svelte, Node)

import { iconSVG } from "soft-frosted-icons";

iconSVG("bell", { finish: "duo", size: 24 });
// → '<svg …>' — runs in Node, no DOM

Attribute / option	Values	Default
`name`	Any of the 136 icon names (typed in TypeScript)	—
`finish`	`outline` · `duo`	`outline`
`size`	A px number or any CSS length (`1.2em`, `2rem`)	`24`
`color`	Any CSS colour. Or set `--sfi-color` / CSS `color`	Soft Glass blue
`label`	Accessible name. Without it the icon is decorative (`aria-hidden`)	—
`animate`	Present = idle specular glint (respects reduced motion)	off
`data-sfi-theme`	On any ancestor: `soft-glass` `crystal` `aurora` `dusk` `midnight`	`soft-glass`