Animating Icons

by SoraLabsOSS

Animating Icons is a Frontend skill for Claude Code, published by SoraLabsOSS in skills.

26 stars2 forkson SoraLabsOSS/skillsAdded 2026/08/11Repository updated 2026/08/05

View source on GitHub Download repo ZIP

animationclaude-codeclaude-skilldesign-engineeringiconsmotion-designsvg

Install in seconds

Install Animating Icons

Copy Animating Icons into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/SoraLabsOSS/skills/tree/main/skills/animating-icons ~/.claude/skills/animating-icons

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/SoraLabsOSS/skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/animating-icons/SKILL.md in SoraLabsOSS/skills
Installs to: ~/.claude/skills/animating-icons
Collection: One of 2 skills cataloged from this repository
Category: Frontend — 567 skills

What Animating Icons does

Author, review, or batch-produce SVG icon hover gestures and morphs for Hugeicons, Lucide, and Phosphor icon sets. Use for per-icon animations like icon morphs, draw-on effects, and hover gestures.

Animating Icons is cataloged under Frontend on DirSkills. Animating Icons comes from a repository tagged animation, claude-code, claude-skill, design-engineering and icons.

Documentation

README

Excerpt

Animating Icons

An icon is not a picture you move. It is an object that does something, and the animation is that thing happening once.

Core principle: the gesture is the icon's meaning acting on itself. A bell rings, a plug disconnects, a package lands. The motion has to be something only that object could do. Whole-<svg> shakes that would look identical on any glyph are decoration — delete them.

Frequently asked about Animating Icons

What else does SoraLabsOSS publish alongside Animating Icons?
Animating Icons is one of 2 skills that DirSkills catalogs from SoraLabsOSS/skills, the repository it ships in. Its siblings there include Motion Meaning. Each one is a separate skill with its own page in this directory, installs the same way Animating Icons does, and is maintained by SoraLabsOSS in that same repository. The rest of the collection is listed on the SoraLabsOSS/skills page.
How does Animating Icons compare to other Frontend skills?
Animating Icons ranks #547 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Animating Icons against them. Open each page to compare what they document and how they install.