tiny-isprite — SVG color & motion lab
Recolor SVG artwork, animate its fills, and export the result for your own site. The browser editor is free to try without an account. Uploaded SVGs and saved editor drafts stay in your browser; they are not uploaded to an animation server.
Open the tools
Recolor an SVG
- Load a sample or use Add SVGs to select your own artwork.
- Choose Single icon for standalone artwork or Sprite for an icon collection.
- Choose Use currentColor, Keep original colors, or Generate CSS variables.
- With generated variables, enable Include multicolor fills and strokes to expose the editable fill/stroke palette. The Colors panel has light and dark palette controls. Preview themes are independent of the site's interface theme.
- Change the named color variables and preview the result. Line thickness and rotation controls are also available. Zoom and pan affect the preview only.
currentColor inherits the surrounding CSS color. Fixed SVG fills are not recolored by setting color; use generated variables for those paints.
Animate fills
- Select Fill animation and enable animation.
- Choose the fill effect and its origin. Configure each paint's start time, duration and final fill percentage.
- Use the timeline to inspect the transition. Its current time can help choose the start time of the next paint in a sequential animation.
- For detailed adjustments, enable Separate region origins. Select a region to open its popover and edit its origin and timing independently, even when several disconnected regions share a color. Tiny sampled regions usually need no individual adjustment.
- Use the editor's guided animation tour for an interactive walkthrough.
Export and integration
Use Downloads for the available output formats: standalone SVG, React component, CSS variables, sprite output and the animation ZIP. Animation export includes a portable Vanilla JavaScript player, prepared maps/timings and a React wrapper. The exported player does not run the editor's graph computations at playback time. Serve the ZIP's files over HTTP; ES modules do not run by double-clicking an HTML file from disk. The Orbit showcase is a working standalone example.
Light/dark palette changes in the exported player preserve animation progress. The player respects prefers-reduced-motion. Exported examples can run without loading the editor or using an external animation service.
Browser agent tools
Supporting browsers can discover the editor's WebMCP tools for SVG import, palette edits, animation timing/regions, preview and local export preparation. UI and agent edits share revision checks and Undo/Redo. The ordinary editor also works without WebMCP. Read the agent tool contract and workflow guide.
Package quick start and agent index
The documented npm release is tiny-isprite 2.2.0 (Node.js 18+; React 17/18/19). Read the complete CLI, React and browser API quick start and the agent documentation index.
Install the developer package
npm install tiny-isprite
The package provides a Node/CLI SVG sprite generator, a React Icon component, and the filesystem-free tiny-isprite/browser API. See the package documentation for current API signatures, content hashing and cache-safe sprite URLs. The interactive editor is a separate application.