Image: PulsoIcon
Why it mattersA static icon tells a user what will happen. A tiny motion when they hover tells them the button is listening.
Every icon has its own motion. A bell rings. A calendar lifts its rings. A trash can opens its lid. That is the pitch of PulsoIcon, an open-source icon library from the CityPulso organization. The repository was created on 4 November. It reached 201 stars on GitHub by 8 November. The licence is ISC.
What is in the box
PulsoIcon lists 9,955 icons. About 3,700 are drawn new for this set. That includes around 2,770 line-art brand logos such as GitHub, Slack, Spotify, OpenAI, Claude, TikTok, VS Code and Google Drive. The rest build on the shapes of other open icon sets. All 2,020 Lucide icons are in, from release 1.68. Tabler Icons at 3.50 and Iconoir at 7.12 add their shapes too. The project credits each source icon in its own file.
Three thousand and forty-two of the icons are brand logos, drawn after the logos collected by Simple Icons. About 1,700 icons also come with a filled version. The rest fill their closed outline shapes and cut the inner lines out, so the details stay visible.
How it fits into a React project
PulsoIcon-react uses the same component names as lucide-react: Calendar, CalendarIcon, aliases such as AlertCircle. The props are the same too, so usually you only change the import. Three icons add about 12 kB to a bundle before minification. Every icon is its own module. The package is side-effect free, so bundlers drop the icons you do not import.
Each icon plays when the pointer enters the closest button, a or label around it. Focus works the same way. The trigger also covers summary and ARIA roles for button, link, tab and menu item. Any other element can be the trigger with data-icon-trigger. Nothing moves when the system asks for reduced motion.
The same icons on five platforms
PulsoIcon is also packaged for Vue 3.5+, Svelte 5, Jetpack Compose on Android, and SwiftUI on iOS and macOS. Every package takes the same props with the same defaults. Each icon has a kebab-case name, the same on every platform, for storing on your data. One version number covers every package.
The animations are written for this set, not stamped across all icons. Motion recipes live in packages/core/src/recipes.ts. The Kotlin and Swift versions of each recipe are written by hand. The project's own tests check that an icon moves the same way in React, Vue, Svelte, Compose and SwiftUI.
What it costs
PulsoIcon is free and open-source under the ISC licence. You may use it in a commercial and closed-source product. The ISC licence and the MIT licences of the icons it builds on set one condition. You must include PulsoIcon's LICENSE file with your product's third-party notices. That file already carries the notices of Lucide, Tabler Icons, Iconoir, Hugeicons and Phosphor.
A static icon tells a user what a button will do. A small motion when they hover tells them the button is listening for the click. PulsoIcon is one line of code away for teams already on lucide-react.
Source
CityPulso/PulsoIcon on GitHub, and the gallery at pulsoicon.com with every icon and a playground.
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.
