CityPulso/PulsoIcon
Developer ToolsAnimated icon library for React, Vue, Svelte, Jetpack Compose, and SwiftUI with per-icon hand-written motion.
Overview
PulsoIcon is an animated icon library whose roughly 9,955 icons each carry motion written specifically for that shape rather than one shared effect. About 3,700 icons are drawn for the set, including roughly 2,770 line-art brand logos; the remaining shapes build on Lucide, Tabler Icons, and Iconoir. Icons are static at rest and play on hover or focus of the surrounding control, and the library honors the system reduced-motion preference.
The same icon data drives React, Vue, Svelte, Jetpack Compose, and SwiftUI packages, so a project can use consistent icons and motion across platforms. It is aimed at UI developers who want more expressive icon feedback without manually authoring SVG animation.
Quick start
Install the package for your framework, then render an icon inside a button, link, label, or other recognized trigger.
For React 18+, install pulsoicon-react and import icons by name:
import { Bell, Trash2 } from "pulsoicon-react";
<button><Bell size={20} /> Notifications</button>
<button><Trash2 color="crimson" strokeWidth={1.5} /> Delete</button>
Hovering the button plays the icon's motion. The same pattern applies to Vue 3.5+, Svelte 5, Jetpack Compose, and SwiftUI; package names and framework-specific quick starts are listed in the React guide, Vue guide, Svelte guide, Compose guide, and SwiftUI guide. Use the playground to preview and copy icon code before installing.
Props and triggers
Every package exposes the same prop set: size, color, strokeWidth, absoluteStrokeWidth, solid, animated, autoAnimated, and play. animated={false} makes an icon fully static, while autoAnimated={false} disables the built-in hover/focus trigger but leaves programmatic playback through a ref or play available. Web icons play when the pointer enters or focus moves into the closest button, link, label, summary, or element with role button, link, tab, or menuitem. A custom element can be made a trigger with data-icon-trigger.
For filled icons, set solid and supply a color; about 1,700 icons have dedicated filled drawings from Tabler's or Phosphor's filled sets, while others fill their closed outlines. Web packages also export ICONS, ICON_NAMES, kebab-case icon names, and one icon per module from icons/<name>.
Constraints
React requires version 18+, Vue 3.5+, and Svelte 5. Icons render with aria-hidden="true" on the web, so the surrounding button or link must carry an accessible label. Package versions are synchronized across platforms, and the React package was renamed from pulsoicon to pulsoicon-react starting with 6.0.1.
The code is under the ISC license, and the icon shapes derived from other open sets carry their own notices. Shipping PulsoIcon in an app, site, template, or library requires including its LICENSE file, which aggregates the Lucide, Tabler, Iconoir, Hugeicons, and Phosphor notices. Brand icons are trademarks of their owners and do not imply endorsement.
HotRepo's take
On the 2026-11-08 new-project ranking, PulsoIcon recorded 165 stars and 4 forks, with 63 stars gained in a window that ran from 03:45 to 05:15 UTC. The collected star curve shows the count rising from 102 to 165 over roughly an hour and a half. That is a short observation window and does not show sustained adoption, but it does place the project among the speed-ranked newcomers for that snapshot. The multi-framework design, one-line React replacement of lucide-react, and per-icon motion are concrete differentiators that explain why developers might browse it, while no all-language daily rank was recorded.
Written by AI from the project's README, updated . The project's own docs are the source of truth.