Hover or focus to animate
defaultPoint at a button, or press Tab to focus one.
<button>
<Bell /> Notifications
</button>
<a href="/inbox">
<Mail /> Inbox
</a>Open source · 9,955 icons · 5 platforms
Icons that come alive.
9,955 carefully drawn icons, each with its own motion. Built for React, Vue, Svelte, Android and SwiftUI.
npm install pulsoicon-reactv6.0.2One icon, four forms
Animated or still, outline or solid.
The same component, two props. Pick an icon and copy the line you need.
<Heart /><Heart solid /><Heart animated={false} /><Heart solid animated={false} />Hover a card to play it. The static ones stay still on purpose: animated={false} turns every trigger off.
Control
Animation, on your terms.
Icons play on hover and focus out of the box. Turn that off with autoAnimated={false} and play them from a ref or aplay prop, or switch every trigger off with animated={false}.
Click to play once
autoAnimated={false} + refNot saved yet
const check = useRef<IconHandle>(null);
async function save() {
await saveDocument(); // your own code
await check.current?.startAnimation();
}
<CircleCheck ref={check} autoAnimated={false} />State-driven
play<Bell autoAnimated={false} play={hasUnread} />Download complete
playSimulated in the page
<Download autoAnimated={false} play={progress === 100} />Programmatic trigger
startAnimation() / stopAnimation()const rocket = useRef<IconHandle>(null);
<Rocket ref={rocket} autoAnimated={false} />
<button onClick={() => rocket.current?.startAnimation()}>Play</button>
<button onClick={() => rocket.current?.stopAnimation()}>Stop</button>Completely static
animated={false}The ref and play do nothing either.
<Lock animated={false} />Frameworks
One icon library. Every platform.
The props have the same names, defaults and meaning everywhere. One version number covers every package.
React
pulsoicon-reactimport { Bell } from "pulsoicon-react";
<button>
<Bell size={20} /> Notifications
</button>Vue
pulsoicon-vue<script setup lang="ts">
import { Bell } from "pulsoicon-vue";
</script>
<template>
<Bell :size="20" />
</template>Svelte
pulsoicon-svelte<script lang="ts">
import { Bell } from "pulsoicon-svelte";
</script>
<Bell size={20} />Jetpack Compose
com.citypulso:pulsoicon-composePulsoIcon(
PulsoIcons.Bell,
contentDescription = "Notifications",
interactionSource = interactions,
)SwiftUI
PulsoIcon (Swift Package)PulsoIconView(.bell, size: 20, play: hasNewMessage)Why PulsoIcon
Made for interfaces that feel alive.
A motion for every icon
All 9,955 icons have their own motion, written for that icon: a bell rings, a trash can opens its lid.
Outline and solid
Every icon also has a filled drawing. Motions that draw a stroke pop in instead on filled shapes.
Played from your code
Hover and focus by default; a ref, a play prop or a handle when your app decides.
Five platforms, one source
React, Vue, Svelte, Jetpack Compose and SwiftUI draw the same icons with the same motion and props.
Only what you import
Each icon is its own module and the packages are side-effect free, so bundlers drop the icons you don't use.
Accessible and calm
Icons are hidden from screen readers unless you label them, and nothing moves when the system asks for reduced motion.
Open source
ISC licensed. Built on open icon sets, credited in the license, and maintained by CityPulso.
Quick install
Start in one line.
Then import an icon by name. Each platform's guide has every prop and how to play icons from code.
npm install pulsoicon-react