Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Icons Pack
Material Symbols Outlined variable icon font. Context-aware weight and optical size. Attractor animations via data-vb-attract.
| Type | Full (theme + effects + JS) |
|---|---|
| Theme CSS | packs/icons.theme.css |
| Effects CSS | packs/icons.effects.css |
| Effects JS | packs/icons.effects.js |
| Full bundle | packs/icons.full.css + packs/icons.full.js |
| Font weight | ~3.8MB (full set) — subset for production |
Coexistence with icon-wc
This pack coexists with the existing <icon-wc> SVG icon system. Use whichever fits your needs:
<icon-wc name="menu">— SVG icons (lucide etc.), unchanged<span class="vb-icon">menu</span>— Material Symbols font icons (when pack loaded)
Loading
Full pack
<link rel="stylesheet" href="/cdn/packs/icons.full.css"><script type="module" src="/cdn/packs/icons.full.js"></script>Theme only (no animations)
<!-- Icons without attractor animations --><link rel="stylesheet" href="/cdn/packs/icons.theme.css">Basic Usage
Basic usage
<!-- Inline with text --><p>Upload your files <span class="vb-icon">upload</span> to get started.</p> <!-- Button with fill-on-hover --><button data-vb-icon-fill="hover"> <span class="vb-icon">favorite</span> Save</button> <!-- Standalone large icon --><span class="vb-icon" data-size="xl">notifications</span> <!-- Always filled --><span class="vb-icon filled">star</span>Context-Aware Sizing
Icons automatically adjust weight and optical size based on their context:
| Context | Weight | Optical Size |
|---|---|---|
h1, h2 | 600 | 48 |
h3, h4 | 500 | 40 |
button | Inherits text weight | 24 |
small, caption | 400 | 20 |
Icon Axes (Custom Properties)
| Property | Range | Default | Effect |
|---|---|---|---|
--vb-icon-fill | 0–1 | 0 | Outline to filled |
--vb-icon-weight | 100–700 | 400 | Stroke weight |
--vb-icon-grad | −50–200 | 0 | Grade (weight without spacing shift) |
--vb-icon-opsz | 20–48 | 24 | Optical size |
Attractor Animations
Add data-vb-attract to animate an icon. Animations respect prefers-reduced-motion.
Attractor patterns
<!-- Pulse: fill breathes 0 → 1 → 0 --><span class="vb-icon" data-vb-attract="pulse">notifications</span> <!-- Beat: weight surges like a heartbeat --><span class="vb-icon" data-vb-attract="beat">favorite</span> <!-- Bounce: vertical nudge, 3 times --><span class="vb-icon" data-vb-attract="bounce">arrow_downward</span> <!-- Wiggle: rotation shake, suggests error --><span class="vb-icon" data-vb-attract="wiggle">warning</span> <!-- Breathe: slow continuous fill oscillation --><span class="vb-icon" data-vb-attract="breathe">mic</span>| Type | Meaning | Iterations |
|---|---|---|
pulse | Something happened here | 3 |
beat | New/unread content | 3 |
bounce | Call to action | 3 |
wiggle | Error/warning | 3 |
breathe | Active/live signal | Infinite |
Declarative Triggers
Use data-vb-attract-on for event-driven attractors without JS:
Declarative triggers
<!-- Animate when scrolled into view --><span class="vb-icon" data-vb-attract="pulse" data-vb-attract-on="visible">star</span> <!-- Animate on hover --><span class="vb-icon" data-vb-attract="beat" data-vb-attract-on="hover">favorite</span>JS API
JS API
import { attract, attractRandom, enableWhimsy } from 'vanilla-breeze/icons-js'; // Trigger a specific attractorattract(document.querySelector('.vb-icon'), 'pulse'); // Random weighted attractorattractRandom(iconElement); // Idle whimsy mode (opt-in)const { stop } = enableWhimsy(45000);Whimsy can also be enabled declaratively: <body data-vb-whimsy>