skills.rest
raphaelsalaja
raphaelsalajaCOMMUNITY
Explore all skills by this author →
Website𝕏@raphaelsalajaGitHub

morphing-icons

Create morphing SVG icons from three lines with rotation groups.

869|42|Updated Sep 24, 2025
Search Tags:#ui#animation#icons#svg#design-systems#morphing#morphing-icons
One-click install
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill morphing-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: morphing-icons
Source: https://github.com/raphaelsalaja/userinterface-wiki/tree/main/skills/morphing-icons
Command: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill morphing-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Morphing icons enable smooth, shape-changing indicators by transforming three-line icons into new forms without crossfades, improving visual continuity in UI.

Core Features & Use Cases

  • Exactly three lines per icon with collapsed placeholders for fewer lines.
  • Rotation groups allow smooth transitions between variants like plus-cross or arrow directions.
  • Consistent viewBox and simple, reusable icon definitions suitable for design systems.
  • Use Case: implement dynamic toolbar icons that morph to indicate states without layout shifts.

Quick Start

Define three lines for each icon (with collapsed lines for fewer than three), assign a rotation group when needed, and render with an animated morph between variants.

Frequently Asked Questions about morphing-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create morphing icons with SVG line transforms?▼

Morphing icons transform between shapes using exactly three SVG lines, with collapsed placeholders for fewer lines, enforcing a shared viewBox for smooth, scalable transitions without crossfades.

How do SVG rotation groups work for morphing UI icons?▼

SVG rotation groups use spring-based rotation to enable smooth transitions between variants like plus-cross toggles or arrow direction changes, rendering an animated morph between variants.

Can I use morphing SVG icons in an existing design system?▼

Yes, morphing SVG icons suit design systems by providing consistent viewBox and reusable icon definitions, implementing dynamic toolbar icons that morph to indicate states without layout shifts.

Do morphing SVG icons support reduced-motion safety requirements?▼

Yes, morphing SVG icons provide reduced-motion safety for accessibility compliance, relying on spring-based rotation and collapsed lines while maintaining a shared viewBox for visual continuity.

What is the limitation of using three SVG lines for icon morphing?▼

The limitation of three SVG lines for icon morphing is that each icon must use exactly three lines, requiring collapsed placeholders for shapes with fewer lines to ensure consistent transitions.

What is the best way to transition UI icons without layout shifts?▼

The best way to transition UI icons without layout shifts is using morphing SVG line transforms, which directly morph three-line icons into new forms to improve visual continuity by avoiding crossfades.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

icon-system

Standardize icon delivery with SVG sprites and inline components.

Community
Basic
mohamed-g-shoaibmohamed-g-shoaib
2

svg-morphing

Morph SVG icons by transforming three-line geometry between states.

Community
Advanced
aryanraj2713aryanraj2713
10

ui-animation

Provide guidelines for implementing UI motion with CSS transitions, keyframes, and framer-motion.

Community
Intermediate
nicolaiprodromovnicolaiprodromov
20

animate

Design CSS transitions for Puree UI components using animatable properties and timing functions.

Community
Intermediate