Open Symbols documentation
Open Symbols turns 2,000 icons into animated, semantically tagged layers. One pure-math engine powers React, React Native, framework-free SVG and Lottie exports.
Version 0.2.0 is available on npm. The packages share one version and support monochrome rendering. APIs may change on a minor release before 1.0; see the versioning policy.
Choose your integration
| Package | Use it for |
|---|---|
@open-symbols/core | The engine, TypeScript types and 2,000 per-icon modules. |
@open-symbols/react | Animated SVG in React, including server rendering. |
@open-symbols/react-native | Native SVG in React Native and Expo apps. |
@open-symbols/dom | Animated SVG without a framework. |
@open-symbols/wc | The <open-symbol> custom element. |
@open-symbols/icons | Icon JSON, meanings, search data, index and JSON Schema. |
@open-symbols/lottie | Lottie JSON and dotLottie exports through a CLI or function API. |
The library also offers static SVG and resolved JSON downloads without installing a package.
The engine has 13 public presets; Lottie exports 12 time-based presets, with progress available
as fixed-value variants. See Presets and the Lottie guide.
Where to go next
- Getting started — React, DOM, Web Components and the core engine.
- React Native — native SVG setup and Expo installation.
- Lottie and native apps — export animations for your player.
- Accessibility and Reduced motion.
- Support matrix, Versioning policy, Attribution.
- API reference — generated from the TypeScript types.
How the motion works
Each icon carries geometry and semantic roles. Presets use those roles, layer hierarchy and composition to choose motion: signal bars scale from their baseline, Wi-Fi arcs bloom from a focal point, and a badge can move more than its shell. The engine computes each frame without a DOM or clock dependency, so rendering and scrubbing share the same math across adapters.