Morphicons

Overview

Morphicons is a creative vector icon animation library that seamlessly morphs SVG stroke paths between different icon states (such as Play to Pause, Menu to Close, or Search to Clear).

Key Features

• Smooth Path Morphing: Beautiful vector interpolation between two distinct icon states.
• Framework Agnostic: Works out of the box with React, Vue, Svelte, and vanilla JavaScript.
• Lightweight SVG Output: Zero heavy raster assets, delivering scalable resolution-independent icons.
• Configurable Speed & Triggers: Trigger morph animations on click, hover, or external state changes.

Installation & Quick Start

npm install morphicons

import { MorphIcon } from 'morphicons/react';

export default function App() {
  return <MorphIcon name="menu-to-close" size={24} duration={0.3} />;
}

Why Choose Morphicons?

• Best for: Micro-interactions, interactive button toggles, media players, and delight-focused UI design.
• Not suitable for: Static dashboards needing thousands of standard inert icons.