@prastavna/icons

Framework agnostic

Every icon returns a plain SVG string, so the library works in React, Vue, Svelte, web components, and plain DOM code.

Built for score notation

Covers notes, rests, clefs, accidentals, time signatures, dynamics, articulations, repeats, and more, alongside broader UI, media, and app icon sets.

Small callable API

Icons accept size, width, height, color, viewBox, strokeWidth, class, and arbitrary SVG attributes.

Quick Start

bash

vp add @prastavna/icons

import { noteQuarter } from "@prastavna/icons";

const svg = noteQuarter({ size: 28, color: "#7c3aed" });
element.innerHTML = svg;

Guide

Install the package, choose root or subpath imports, and wire SVG output into your UI.

Read the guide

API

See the icon function shape, supported options, metadata, and rendering behavior.

Open the API reference

Gallery

Browse every export by category, search by name, and copy icon names directly from each card.

Open the gallery

Integrations

See TypeScript examples for plain DOM usage plus React, Vue, Svelte, and Astro integrations.

Open integration examples

Included Categories

Notes, rests, clefs, accidentals, time signatures, dynamics, articulations, ornaments, repeats, barlines, beams, ties, slurs, pedals, bows, miscellaneous notation symbols, notation extended, instruments, player controls, arrows, navigation, actions, files, communication, UI, shapes, media, data, time, weather, maps, social, dev, and commerce.

Why this library

The output is raw SVG, not framework-specific components.

Root exports use category-prefixed names like noteQuarter and clefTreble.

Category subpaths use shorter names like quarter and treble.

Both outline and filled variants are available for every icon.

The default viewBox is 0 0 24 24, but it can be overridden per call.

The docs include framework-specific TypeScript examples for React, Vue, Svelte, Astro, and plain browser code.

@prastavna/iconsMusic notation icons as raw SVG strings