Přejít na obsah
CS
v3300 ikon · žádné závislosti · MIT→

Ikony, které ožijí.

Animované ikony zdarma pro React, shadcn/ui a Lottie

300 ručně vytvořených mikroanimací s vestavěnými mikrointerakcemi na hover, kliknutí i ve smyčce. Použijte je jako React komponentu, přidejte je přes shadcn nebo si stáhněte SVG a Lottie JSON. Licence MIT.

Procházet ikony

Přejeďte ukazatelem přes pole ikon.

animovaných ikon
300
animovaných ikon
vestavěných interakcí
6
vestavěných interakcí
přehrávač (gzip)
8 kB
přehrávač (gzip)
závislostí
0
závislostí

Vestavěné interakce

Každá ikona ví, jak se pohybovat.

Každá ikona má interakci, pro kterou byla navržena. Stačí ji vložit a funguje — nebo jedním propem zvolte jinou. Vyzkoušejte si je:

Knihovna

300 animovaných ikon zdarma

Najetím myší nebo kliknutím ikonu přehrajete. Po otevření najdete její kód a soubory ke stažení — Lottie JSON, SVG a ZIP.

300 ikon

Upozornění

Notifikace

Navigace

Akce

Obsah

Formuláře

Média

Úpravy textu

Komunikace

Zařízení

Počasí

Mapy a poloha

E-commerce

Grafy

Vývoj

Design a layout

Tvary a matematika

Načítání

Sociální sítě

Ostatní

Použijte je po svém

Nainstalovat, importovat, hotovo.

React komponenta bez závislostí, registr shadcn, soubory ke stažení se stálými URL a katalog, který přečtou i AI agenti.

Přečíst dokumentaci →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Malé, přístupné a stylované po vašem.

Přebírají vaše barvy

Ikony používají currentColor: samy převezmou barvu textu, hover stavy i tmavý režim. Změnit ji můžete propem, třídou nebo obyčejným CSS.

Malé už z principu

8 kB

Vestavěný přehrávač, žádné závislosti. Každá ikona je samostatný modul o velikosti 2 kB.

Přístupné bez dalšího nastavování

Respektují omezený pohyb, hover animace přehrají i při fokusu z klávesnice a čtečky obrazovky je ignorují, dokud jim nedáte popisek.

Připravené na vykreslování na serveru

Klientská komponenta, která se bezpečně vykreslí v Next.js, Remixu i Astru. Ikony jsou obyčejná data, která můžete importovat kdekoli.

Pro AI agenty

Typovaný katalog s klíčovými slovy ke každé ikoně, icons.json, llms.txt a dokumentace v Markdownu.

Najděte tu správnou mikroanimaci.

Otázky

Co jsou mikroanimace a animované ikony?

Mikroanimace jsou krátké pohyby s jediným účelem, které odpovídají na akci uživatele: ikona menu, která se změní v tlačítko pro zavření, srdce, které se vyplní, když dáte příspěvku lajk, nebo zvonek, který zazvoní při nové notifikaci. Animované ikony jsou jejich nejběžnějším druhem. Rozhraní díky nim působí pohotově a změny stavu jsou patrné i bez dalšího textu.

Jaký je rozdíl mezi soubory Lottie a SVG?

Soubor Lottie JSON obsahuje celou animaci a přehraje ho jakýkoli Lottie přehrávač, včetně toho, který je vestavěný v react-useanimations. Soubory SVG jsou statické obrázky ikony v klidu, jeden pro každý stav (například eye a eye-off), pro místa, kde se nic hýbat nemá: e-maily, dokumenty, grafické nástroje nebo záloha pro prohlížeče bez JavaScriptu.

Funguje to s Next.js a vykreslováním na serveru?

Ano. Komponenta je označená 'use client' a animaci kreslí až v prohlížeči, takže ji vykreslíte ze server komponent i v SSR frameworcích jako Next.js, Remix a Astro bez dynamických importů. Moduly ikon jsou obyčejná data, která server komponenty mohou importovat a předávat jako props. Next.js a vykreslování na serveru →

Můžu ikony použít v komerčních projektech?

Ano. Ikony i balíček react-useanimations jsou pod licencí MIT: můžete je používat, upravovat a dále šířit v osobních i komerčních projektech. Uvedení autora oceníme, ale není povinné. Licence a podmínky →

Můžu ikony použít bez Reactu?

Ano. Každá ikona je standardní Lottie JSON soubor, takže ji přehraje lottie-web v čistém JavaScriptu, ve Vue, Svelte, Angularu nebo v CMS a také Lottie přehrávače pro iOS, Android a Flutter. Na stránce Lottie ikony najdete URL souborů a hotové ukázky pro lottie-web ke každé interakci. Lottie ikony →

Kolik ikony přidají do bundlu?

Přehrávač v react-useanimations 3.1.1 má po gzipu asi 8 kB a nemá žádné závislosti. Každá ikona je samostatný modul o velikosti 1 až 15 kB (medián 2 kB), takže bundle obsahuje jen ikony, které naimportujete.

Vdechněte rozhraní život.

Zdarma a pod licencí MIT, pro osobní i komerční projekty.

Začít