Morphicons: иконки, которые перетекают одна в другую

Открыть morphicons.com →

Есть мелочь, по которой сразу видно, что сайт делали с душой: иконки не просто меняются, а перетекают. Нажал на «меню» — три полоски плавно сложились в крестик. Отправил форму — стрелка превратилась в галочку.

Morphicons делает ровно это. Берёт любую иконку из популярных наборов — Lucide, Tabler, Heroicons — и умеет плавно превратить её в любую другую. Внутри пружинная физика, снаружи одна команда.

Что внутри

• работает с React, Vue, Svelte, Astro и с обычным JavaScript
• весит около 6 килобайт, зависимостей нет
• открытый код, бесплатно
• на сайте есть песочница: выбираешь две иконки и сразу видишь переход

Как это использую я

Не пишу код анимации сам. Говорю помощнику: «иконки в меню и кнопках сделай через Morphicons, меню → крестик, отправить → галочка». Он ставит библиотеку одной строкой и подключает. Всё.

Что стоит знать

Это про мелочи, а не про первый экран. Если сайт в целом выглядит слабо, живые иконки его не спасут — сначала шрифт, цвет и первый экран, а иконки — последним штрихом.

И не переборщи: две-три перетекающие иконки — характер, десять — цирк.

Если не разобрался

Если застрял или хочешь, чтобы твой сайт перестал выглядеть «как у всех», — напиши мне в Telegram, оформим консультацию: покажу вживую, как я собираю первый экран, шрифты и цвет. Не хочешь разбираться сам — соберу под тебя.

Впервые вышло в канале @alex_aicontent.