Introduction
PulsoIcon is an open source set of animated icons. Every icon has its own motion, an outline and a solid drawing, and the same props on every platform.
A bell rings. A calendar lifts its rings. A trash can opens its lid. At rest each icon is a clean 24×24 icon; it plays when someone hovers or focuses the button, link or tab it sits in, or when your code asks it to.
Packages
| Platform | Package | Guide |
|---|---|---|
| React 18+ | pulsoicon-react |
React |
| Vue 3.5+ | pulsoicon-vue |
Vue |
| Svelte 5 | pulsoicon-svelte |
Svelte |
| Android (Jetpack Compose) | com.citypulso:pulsoicon-compose |
Jetpack Compose |
| iOS / macOS (SwiftUI) | PulsoIcon (Swift Package Manager) |
SwiftUI |
Every package draws the same icons with the same motion, from one source, and takes the same props with the same defaults. One version number covers them all.
The ideas
- Every icon moves its own way. The motion is part of the icon, not an effect you add.
- Outline and solid.
soliddraws the filled version. See Solid icons. - You decide when it plays. Hover and focus by default; a ref, a
playprop or a handle when your app decides;animated={false}for a still icon. See Animation. - Only what you import. Each icon is its own module, so bundlers keep the icons you use.
- Calm by default. Nothing moves when the system asks for reduced motion.
Next
Start with Installation, or browse the icons.