Перейти к содержимому
RU

10 иконок · лицензия MIT

Анимированные иконки дизайна и макетов

Сетки, колонки, слои, кадрирование, перо и курсор для редакторов и конструкторов. Подходят для панелей инструментов, где пользователь расставляет контент, переключается между сеткой и таблицей или выбирает инструмент рисования.

Из 10 иконок 3 проигрываются заново при каждом клике и 7 проигрываются один раз при наведении. Каждая доступна в виде React-компонента, компонента shadcn/ui, анимации Lottie JSON и статичных SVG. Всё бесплатно, в том числе для коммерческих проектов, по лицензии MIT.

Все иконки категории «Дизайн и макеты»

Где их использовать

  • Переключатели вида: сетка, список, таблица
  • Панели слоёв в графических редакторах и редакторах презентаций
  • Инструменты кадрирования и обрезки в фоторедакторах
  • Конструкторы страниц и выбор макета
  • Ручки для перетаскивания

По взаимодействию

  • Иконки с анимацией по клику · 3

    Проигрывается заново с начала при каждом клике, если не включено уменьшение движения. Crop, Mouse Pointer, Scissors.

  • Иконки с разовой анимацией при наведении · 7

    Проигрывается один раз на mouseenter, если не включено уменьшение движения. Уход курсора анимацию не останавливает, а повторное наведение во время проигрывания не запускает её заново. Columns, Grid, Layers, Layout, Move, Pen Tool, Table.

Добавьте иконку в приложение

В React установите react-useanimations и импортируйте иконку: она сама проигрывает своё взаимодействие («Повтор при наведении»). Все иконки этой категории подключаются так же — замените layers на имя со страницы нужной иконки.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import layers from 'react-useanimations/lib/layers';

<UseAnimations animation={layers} size={32} />

С shadcn/ui готовый компонент добавляется через CLI:

npx shadcn@latest add https://useanimations.com/r/layers.json
import { AnimatedLayers } from '@/components/animations/layers';

<AnimatedLayers size={24} />

Не используете React? Каждая иконка — это файл Lottie JSON по адресу /icons/<id>.json; плееры для веба, iOS, Android и Flutter описаны на странице Lottie-иконки.

Частые вопросы

Какие анимированные иконки дизайна и макетов есть в наборе?

10 иконок: Columns, Crop, Grid, Layers, Layout, Mouse Pointer, Move, Pen Tool, Scissors и Table. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

Как использовать эти анимированные иконки дизайна и макетов в React?

Установите react-useanimations, добавьте import layers from 'react-useanimations/lib/layers' и отрендерите <UseAnimations animation={layers} size={32} />. Иконка проигрывает своё взаимодействие («Повтор при наведении») и берёт цвет текста. Если у вас shadcn/ui, вместо этого выполните npx shadcn@latest add https://useanimations.com/r/layers.json.

Можно ли использовать эти анимированные иконки дизайна и макетов без React?

Да. Каждая иконка — это файл Lottie JSON по адресу https://useanimations.com/icons/<id>.json (например, https://useanimations.com/icons/layers.json), который воспроизводят lottie-web, lottie-ios, lottie-android и пакет lottie для Flutter; статичные SVG лежат на странице каждой иконки (страницы иконок — на английском). Ни одна иконка этой категории не использует выражения, так что достаточно облегчённой сборки lottie-web.