{
"name": "useAnimations",
"description": "Free library of animated icons (24/32 px artboards) for React, with a built-in interaction each. Every icon also has direct SVG and Lottie JSON URLs.",
"homepage": "https://useanimations.com/",
"documentation": "https://useanimations.com/documentation.md",
"updated": "2026-10-11",
"license": {
"name": "MIT",
"url": "https://opensource.org/license/mit/",
"terms": "https://useanimations.com/licencing-and-terms",
"attribution": "Optional, not required. Appreciated example: Animated icons by useAnimations",
"restrictions": "None beyond standard MIT terms (provided as-is, without warranty)."
},
"player": {
"web": {
"npm": "lottie-web",
"cdn": "https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie_light.min.js",
"cdnFull": "https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js",
"note": "Use the light build unless requiresFullPlayer is true. Use renderer 'svg'; the icons are stroke-based, so CSS `svg path { stroke: ... }` recolors them."
},
"react": {
"npm": "react-useanimations",
"usage": "import UseAnimations from 'react-useanimations'; import github from 'react-useanimations/lib/github'; ",
"note": "Built-in player (no lottie-web), follows currentColor, respects prefers-reduced-motion. Several icons: import { github, heart } from react-useanimations/icons."
},
"shadcn": {
"registry": "https://useanimations.com/r/registry.json",
"usage": "npx shadcn@latest add https://useanimations.com/r/.json, then "
},
"ios": "https://github.com/airbnb/lottie-ios",
"android": "https://github.com/airbnb/lottie-android"
},
"interactions": {
"loop": "Plays continuously; stays on the static first frame when reduced motion is preferred.",
"click-toggle": "Toggles between two states on click, or switches immediately when reduced motion is preferred.",
"click-replay": "Replays once from the start on every click unless reduced motion is preferred.",
"hover": "Plays forward on mouseenter and backward on mouseleave.",
"hover-replay": "Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.",
"hover-loop": "Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred."
},
"fields": {
"lottie": "Lottie JSON URL, CORS-enabled. Use it as `path` in lottie.loadAnimation or download it into the project.",
"svg": "Static SVG(s) of the icon's states (e.g. bell and bell-off).",
"zip": "The same package a human gets from the Download button: .json and the SVGs.",
"shadcn": "shadcn CLI command that adds a ready-made React component (components/animations/.tsx, export Animated).",
"react": "react-useanimations import of the icon (`import`) and its name in react-useanimations/icons (`export`).",
"page": "The icon page on useanimations.com.",
"snippet": "Ready-to-use lottie-web code for the icon's intended interaction, for players outside React; `el` is the container element."
},
"count": 300,
"icons": [
{
"id": "alert-circle",
"title": "Alert circle",
"category": "Alerts",
"keywords": [
"alert",
"alert-circle",
"alerts",
"attention",
"circle",
"error",
"warning"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/alert-circle.json",
"svg": [
"https://useanimations.com/icons/alert-circle/alert-circle.svg"
],
"zip": "https://useanimations.com/icons/alert-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/alert-circle.json",
"react": {
"package": "react-useanimations",
"import": "import alertCircle from 'react-useanimations/lib/alertCircle';",
"export": "alertCircle"
},
"page": "https://useanimations.com/icons/alert-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 2490,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/alert-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "alert-octagon",
"title": "Alert octagon",
"category": "Alerts",
"keywords": [
"alert",
"alert-octagon",
"alerts",
"attention",
"error",
"octagon",
"warning"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/alert-octagon.json",
"svg": [
"https://useanimations.com/icons/alert-octagon/alert-octagon.svg"
],
"zip": "https://useanimations.com/icons/alert-octagon.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/alert-octagon.json",
"react": {
"package": "react-useanimations",
"import": "import alertOctagon from 'react-useanimations/lib/alertOctagon';",
"export": "alertOctagon"
},
"page": "https://useanimations.com/icons/alert-octagon",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 2647,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/alert-octagon.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "alert-triangle",
"title": "Alert triangle",
"category": "Alerts",
"keywords": [
"alert",
"alert-triangle",
"alerts",
"attention",
"error",
"triangle",
"warning"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/alert-triangle.json",
"svg": [
"https://useanimations.com/icons/alert-triangle/alert-triangle.svg"
],
"zip": "https://useanimations.com/icons/alert-triangle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/alert-triangle.json",
"react": {
"package": "react-useanimations",
"import": "import alertTriangle from 'react-useanimations/lib/alertTriangle';",
"export": "alertTriangle"
},
"page": "https://useanimations.com/icons/alert-triangle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 3325,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/alert-triangle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "error",
"title": "Error",
"category": "Alerts",
"keywords": [
"alerts",
"close",
"error",
"failure",
"x"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/error.json",
"svg": [
"https://useanimations.com/icons/error/error.svg"
],
"zip": "https://useanimations.com/icons/error.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/error.json",
"react": {
"package": "react-useanimations",
"import": "import error from 'react-useanimations/lib/error';",
"export": "error"
},
"page": "https://useanimations.com/icons/error",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 1134,
"requiresFullPlayer": true,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/error.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "x-octagon",
"title": "X Octagon",
"category": "Alerts",
"keywords": [
"alerts",
"octagon",
"x",
"x-octagon"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/x-octagon.json",
"svg": [
"https://useanimations.com/icons/x-octagon/x-octagon.svg"
],
"zip": "https://useanimations.com/icons/x-octagon.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/x-octagon.json",
"react": {
"package": "react-useanimations",
"import": "import xOctagon from 'react-useanimations/lib/xOctagon';",
"export": "xOctagon"
},
"page": "https://useanimations.com/icons/x-octagon",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2419,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/x-octagon.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "notification",
"title": "Notification",
"category": "Notifications",
"keywords": [
"alert",
"bell",
"bell-off",
"mute",
"notification",
"notifications"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/notification.json",
"svg": [
"https://useanimations.com/icons/notification/bell-off.svg",
"https://useanimations.com/icons/notification/bell.svg"
],
"zip": "https://useanimations.com/icons/notification.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/notification.json",
"react": {
"package": "react-useanimations",
"import": "import notification from 'react-useanimations/lib/notification';",
"export": "notification"
},
"page": "https://useanimations.com/icons/notification",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 2193,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/notification.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "notification-v2",
"title": "Notification V2",
"category": "Notifications",
"keywords": [
"alert",
"bell",
"bell-off",
"mute",
"notification",
"notifications"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/notification-v2.json",
"svg": [
"https://useanimations.com/icons/notification-v2/bell-off.svg",
"https://useanimations.com/icons/notification-v2/bell.svg"
],
"zip": "https://useanimations.com/icons/notification-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/notification-v2.json",
"react": {
"package": "react-useanimations",
"import": "import notification2 from 'react-useanimations/lib/notification2';",
"export": "notification2"
},
"page": "https://useanimations.com/icons/notification-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 3709,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/notification-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "notification-v3",
"title": "Notification V3",
"category": "Notifications",
"keywords": [
"alert",
"bell",
"mute",
"notification",
"notifications"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/notification-v3.json",
"svg": [
"https://useanimations.com/icons/notification-v3/bell.svg"
],
"zip": "https://useanimations.com/icons/notification-v3.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/notification-v3.json",
"react": {
"package": "react-useanimations",
"import": "import notification3 from 'react-useanimations/lib/notification3';",
"export": "notification3"
},
"page": "https://useanimations.com/icons/notification-v3",
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 2002,
"bytes": 3887,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/notification-v3.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "notification-v4",
"title": "Notification V4",
"category": "Notifications",
"keywords": [
"alert",
"bell",
"mute",
"notification",
"notifications"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/notification-v4.json",
"svg": [
"https://useanimations.com/icons/notification-v4/bell.svg"
],
"zip": "https://useanimations.com/icons/notification-v4.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/notification-v4.json",
"react": {
"package": "react-useanimations",
"import": "import notification4 from 'react-useanimations/lib/notification4';",
"export": "notification4"
},
"page": "https://useanimations.com/icons/notification-v4",
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 2002,
"bytes": 2522,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/notification-v4.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "arrow-down-circle",
"title": "Arrow down circle",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-down-circle",
"circle",
"direction",
"down",
"navigation"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/arrow-down-circle.json",
"svg": [
"https://useanimations.com/icons/arrow-down-circle/arrow-down-circle.svg"
],
"zip": "https://useanimations.com/icons/arrow-down-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-down-circle.json",
"react": {
"package": "react-useanimations",
"import": "import arrowDownCircle from 'react-useanimations/lib/arrowDownCircle';",
"export": "arrowDownCircle"
},
"page": "https://useanimations.com/icons/arrow-down-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 2547,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-down-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-down-left",
"title": "Arrow Down Left",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-down-left",
"direction",
"down",
"left",
"navigation"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/arrow-down-left.json",
"svg": [
"https://useanimations.com/icons/arrow-down-left/arrow-down-left.svg"
],
"zip": "https://useanimations.com/icons/arrow-down-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-down-left.json",
"react": {
"package": "react-useanimations",
"import": "import arrowDownLeft from 'react-useanimations/lib/arrowDownLeft';",
"export": "arrowDownLeft"
},
"page": "https://useanimations.com/icons/arrow-down-left",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1221,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-down-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-down-right",
"title": "Arrow Down Right",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-down-right",
"direction",
"down",
"navigation",
"right"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/arrow-down-right.json",
"svg": [
"https://useanimations.com/icons/arrow-down-right/arrow-down-right.svg"
],
"zip": "https://useanimations.com/icons/arrow-down-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-down-right.json",
"react": {
"package": "react-useanimations",
"import": "import arrowDownRight from 'react-useanimations/lib/arrowDownRight';",
"export": "arrowDownRight"
},
"page": "https://useanimations.com/icons/arrow-down-right",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1223,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-down-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-left",
"title": "Arrow Left",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-left",
"direction",
"left",
"navigation"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/arrow-left.json",
"svg": [
"https://useanimations.com/icons/arrow-left/arrow-left.svg"
],
"zip": "https://useanimations.com/icons/arrow-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-left.json",
"react": {
"package": "react-useanimations",
"import": "import arrowLeft from 'react-useanimations/lib/arrowLeft';",
"export": "arrowLeft"
},
"page": "https://useanimations.com/icons/arrow-left",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1212,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-left-circle",
"title": "Arrow left circle",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-left-circle",
"circle",
"direction",
"left",
"navigation"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/arrow-left-circle.json",
"svg": [
"https://useanimations.com/icons/arrow-left-circle/arrow-left-circle.svg"
],
"zip": "https://useanimations.com/icons/arrow-left-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-left-circle.json",
"react": {
"package": "react-useanimations",
"import": "import arrowLeftCircle from 'react-useanimations/lib/arrowLeftCircle';",
"export": "arrowLeftCircle"
},
"page": "https://useanimations.com/icons/arrow-left-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 2545,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-left-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-right",
"title": "Arrow Right",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-right",
"direction",
"navigation",
"right"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/arrow-right.json",
"svg": [
"https://useanimations.com/icons/arrow-right/arrow-right.svg"
],
"zip": "https://useanimations.com/icons/arrow-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-right.json",
"react": {
"package": "react-useanimations",
"import": "import arrowRight from 'react-useanimations/lib/arrowRight';",
"export": "arrowRight"
},
"page": "https://useanimations.com/icons/arrow-right",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1214,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-right-circle",
"title": "Arrow right circle",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-right-circle",
"circle",
"direction",
"navigation",
"right"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/arrow-right-circle.json",
"svg": [
"https://useanimations.com/icons/arrow-right-circle/arrow-right-circle.svg"
],
"zip": "https://useanimations.com/icons/arrow-right-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-right-circle.json",
"react": {
"package": "react-useanimations",
"import": "import arrowRightCircle from 'react-useanimations/lib/arrowRightCircle';",
"export": "arrowRightCircle"
},
"page": "https://useanimations.com/icons/arrow-right-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 2548,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-right-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-up-circle",
"title": "Arrow up circle",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-up-circle",
"circle",
"direction",
"navigation",
"up"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/arrow-up-circle.json",
"svg": [
"https://useanimations.com/icons/arrow-up-circle/arrow-up-circle.svg"
],
"zip": "https://useanimations.com/icons/arrow-up-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-up-circle.json",
"react": {
"package": "react-useanimations",
"import": "import arrowUpCircle from 'react-useanimations/lib/arrowUpCircle';",
"export": "arrowUpCircle"
},
"page": "https://useanimations.com/icons/arrow-up-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 2544,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-up-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-up-left",
"title": "Arrow Up Left",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-up-left",
"direction",
"left",
"navigation",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/arrow-up-left.json",
"svg": [
"https://useanimations.com/icons/arrow-up-left/arrow-up-left.svg"
],
"zip": "https://useanimations.com/icons/arrow-up-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-up-left.json",
"react": {
"package": "react-useanimations",
"import": "import arrowUpLeft from 'react-useanimations/lib/arrowUpLeft';",
"export": "arrowUpLeft"
},
"page": "https://useanimations.com/icons/arrow-up-left",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1218,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-up-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "arrow-up-right",
"title": "Arrow Up Right",
"category": "Navigation",
"keywords": [
"arrow",
"arrow-up-right",
"direction",
"navigation",
"right",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/arrow-up-right.json",
"svg": [
"https://useanimations.com/icons/arrow-up-right/arrow-up-right.svg"
],
"zip": "https://useanimations.com/icons/arrow-up-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-up-right.json",
"react": {
"package": "react-useanimations",
"import": "import arrowUpRight from 'react-useanimations/lib/arrowUpRight';",
"export": "arrowUpRight"
},
"page": "https://useanimations.com/icons/arrow-up-right",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1220,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-up-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "menu",
"title": "Burger Menu",
"category": "Navigation",
"keywords": [
"burger",
"close",
"hamburger",
"menu",
"navigation"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/menu.json",
"svg": [
"https://useanimations.com/icons/menu/menu.svg"
],
"zip": "https://useanimations.com/icons/menu.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/menu.json",
"react": {
"package": "react-useanimations",
"import": "import menu from 'react-useanimations/lib/menu';",
"export": "menu"
},
"page": "https://useanimations.com/icons/menu",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 2805,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "chevron-down",
"title": "Chevron Down",
"category": "Navigation",
"keywords": [
"arrow",
"back",
"chevron",
"chevron-down",
"down",
"navigation",
"next"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/chevron-down.json",
"svg": [
"https://useanimations.com/icons/chevron-down/chevron-down.svg"
],
"zip": "https://useanimations.com/icons/chevron-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevron-down.json",
"react": {
"package": "react-useanimations",
"import": "import chevronDown from 'react-useanimations/lib/chevronDown';",
"export": "chevronDown"
},
"page": "https://useanimations.com/icons/chevron-down",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1092,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevron-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "chevron-up",
"title": "Chevron Up",
"category": "Navigation",
"keywords": [
"arrow",
"back",
"chevron",
"chevron-up",
"navigation",
"next",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/chevron-up.json",
"svg": [
"https://useanimations.com/icons/chevron-up/chevron-up.svg"
],
"zip": "https://useanimations.com/icons/chevron-up.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevron-up.json",
"react": {
"package": "react-useanimations",
"import": "import chevronUp from 'react-useanimations/lib/chevronUp';",
"export": "chevronUp"
},
"page": "https://useanimations.com/icons/chevron-up",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1091,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevron-up.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "chevrons-down",
"title": "Chevrons Down",
"category": "Navigation",
"keywords": [
"arrow",
"back",
"chevrons",
"chevrons-down",
"down",
"navigation",
"next"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/chevrons-down.json",
"svg": [
"https://useanimations.com/icons/chevrons-down/chevrons-down.svg"
],
"zip": "https://useanimations.com/icons/chevrons-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevrons-down.json",
"react": {
"package": "react-useanimations",
"import": "import chevronsDown from 'react-useanimations/lib/chevronsDown';",
"export": "chevronsDown"
},
"page": "https://useanimations.com/icons/chevrons-down",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 2086,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevrons-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "chevrons-left",
"title": "Chevrons Left",
"category": "Navigation",
"keywords": [
"arrow",
"back",
"chevrons",
"chevrons-left",
"left",
"navigation",
"next"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/chevrons-left.json",
"svg": [
"https://useanimations.com/icons/chevrons-left/chevrons-left.svg"
],
"zip": "https://useanimations.com/icons/chevrons-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevrons-left.json",
"react": {
"package": "react-useanimations",
"import": "import chevronsLeft from 'react-useanimations/lib/chevronsLeft';",
"export": "chevronsLeft"
},
"page": "https://useanimations.com/icons/chevrons-left",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 2087,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevrons-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "chevrons-right",
"title": "Chevrons Right",
"category": "Navigation",
"keywords": [
"arrow",
"back",
"chevrons",
"chevrons-right",
"navigation",
"next",
"right"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/chevrons-right.json",
"svg": [
"https://useanimations.com/icons/chevrons-right/chevrons-right.svg"
],
"zip": "https://useanimations.com/icons/chevrons-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevrons-right.json",
"react": {
"package": "react-useanimations",
"import": "import chevronsRight from 'react-useanimations/lib/chevronsRight';",
"export": "chevronsRight"
},
"page": "https://useanimations.com/icons/chevrons-right",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 2087,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevrons-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "chevrons-up",
"title": "Chevrons Up",
"category": "Navigation",
"keywords": [
"arrow",
"back",
"chevrons",
"chevrons-up",
"navigation",
"next",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/chevrons-up.json",
"svg": [
"https://useanimations.com/icons/chevrons-up/chevrons-up.svg"
],
"zip": "https://useanimations.com/icons/chevrons-up.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevrons-up.json",
"react": {
"package": "react-useanimations",
"import": "import chevronsUp from 'react-useanimations/lib/chevronsUp';",
"export": "chevronsUp"
},
"page": "https://useanimations.com/icons/chevrons-up",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 2085,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevrons-up.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-down-left",
"title": "Corner Down Left",
"category": "Navigation",
"keywords": [
"corner",
"corner-down-left",
"down",
"left",
"navigation"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-down-left.json",
"svg": [
"https://useanimations.com/icons/corner-down-left/corner-down-left.svg"
],
"zip": "https://useanimations.com/icons/corner-down-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-down-left.json",
"react": {
"package": "react-useanimations",
"import": "import cornerDownLeft from 'react-useanimations/lib/cornerDownLeft';",
"export": "cornerDownLeft"
},
"page": "https://useanimations.com/icons/corner-down-left",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1243,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-down-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-down-right",
"title": "Corner Down Right",
"category": "Navigation",
"keywords": [
"corner",
"corner-down-right",
"down",
"navigation",
"right"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-down-right.json",
"svg": [
"https://useanimations.com/icons/corner-down-right/corner-down-right.svg"
],
"zip": "https://useanimations.com/icons/corner-down-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-down-right.json",
"react": {
"package": "react-useanimations",
"import": "import cornerDownRight from 'react-useanimations/lib/cornerDownRight';",
"export": "cornerDownRight"
},
"page": "https://useanimations.com/icons/corner-down-right",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1246,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-down-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-left-down",
"title": "Corner Left Down",
"category": "Navigation",
"keywords": [
"corner",
"corner-left-down",
"down",
"left",
"navigation"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-left-down.json",
"svg": [
"https://useanimations.com/icons/corner-left-down/corner-left-down.svg"
],
"zip": "https://useanimations.com/icons/corner-left-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-left-down.json",
"react": {
"package": "react-useanimations",
"import": "import cornerLeftDown from 'react-useanimations/lib/cornerLeftDown';",
"export": "cornerLeftDown"
},
"page": "https://useanimations.com/icons/corner-left-down",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1243,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-left-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-left-up",
"title": "Corner Left Up",
"category": "Navigation",
"keywords": [
"corner",
"corner-left-up",
"left",
"navigation",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-left-up.json",
"svg": [
"https://useanimations.com/icons/corner-left-up/corner-left-up.svg"
],
"zip": "https://useanimations.com/icons/corner-left-up.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-left-up.json",
"react": {
"package": "react-useanimations",
"import": "import cornerLeftUp from 'react-useanimations/lib/cornerLeftUp';",
"export": "cornerLeftUp"
},
"page": "https://useanimations.com/icons/corner-left-up",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1239,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-left-up.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-right-down",
"title": "Corner Right Down",
"category": "Navigation",
"keywords": [
"corner",
"corner-right-down",
"down",
"navigation",
"right"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-right-down.json",
"svg": [
"https://useanimations.com/icons/corner-right-down/corner-right-down.svg"
],
"zip": "https://useanimations.com/icons/corner-right-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-right-down.json",
"react": {
"package": "react-useanimations",
"import": "import cornerRightDown from 'react-useanimations/lib/cornerRightDown';",
"export": "cornerRightDown"
},
"page": "https://useanimations.com/icons/corner-right-down",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1246,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-right-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-right-up",
"title": "Corner Right Up",
"category": "Navigation",
"keywords": [
"corner",
"corner-right-up",
"navigation",
"right",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-right-up.json",
"svg": [
"https://useanimations.com/icons/corner-right-up/corner-right-up.svg"
],
"zip": "https://useanimations.com/icons/corner-right-up.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-right-up.json",
"react": {
"package": "react-useanimations",
"import": "import cornerRightUp from 'react-useanimations/lib/cornerRightUp';",
"export": "cornerRightUp"
},
"page": "https://useanimations.com/icons/corner-right-up",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1242,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-right-up.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-up-left",
"title": "Corner Up Left",
"category": "Navigation",
"keywords": [
"corner",
"corner-up-left",
"left",
"navigation",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-up-left.json",
"svg": [
"https://useanimations.com/icons/corner-up-left/corner-up-left.svg"
],
"zip": "https://useanimations.com/icons/corner-up-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-up-left.json",
"react": {
"package": "react-useanimations",
"import": "import cornerUpLeft from 'react-useanimations/lib/cornerUpLeft';",
"export": "cornerUpLeft"
},
"page": "https://useanimations.com/icons/corner-up-left",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1239,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-up-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "corner-up-right",
"title": "Corner Up Right",
"category": "Navigation",
"keywords": [
"corner",
"corner-up-right",
"navigation",
"right",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/corner-up-right.json",
"svg": [
"https://useanimations.com/icons/corner-up-right/corner-up-right.svg"
],
"zip": "https://useanimations.com/icons/corner-up-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/corner-up-right.json",
"react": {
"package": "react-useanimations",
"import": "import cornerUpRight from 'react-useanimations/lib/cornerUpRight';",
"export": "cornerUpRight"
},
"page": "https://useanimations.com/icons/corner-up-right",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1242,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/corner-up-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "external-link",
"title": "External Link",
"category": "Navigation",
"keywords": [
"external",
"external-link",
"link",
"navigation"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/external-link.json",
"svg": [
"https://useanimations.com/icons/external-link/external-link.svg"
],
"zip": "https://useanimations.com/icons/external-link.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/external-link.json",
"react": {
"package": "react-useanimations",
"import": "import externalLink from 'react-useanimations/lib/externalLink';",
"export": "externalLink"
},
"page": "https://useanimations.com/icons/external-link",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1905,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/external-link.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "log-in",
"title": "Log In",
"category": "Navigation",
"keywords": [
"in",
"log",
"log-in",
"navigation"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/log-in.json",
"svg": [
"https://useanimations.com/icons/log-in/log-in.svg"
],
"zip": "https://useanimations.com/icons/log-in.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/log-in.json",
"react": {
"package": "react-useanimations",
"import": "import logIn from 'react-useanimations/lib/logIn';",
"export": "logIn"
},
"page": "https://useanimations.com/icons/log-in",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1852,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/log-in.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "log-out",
"title": "Log Out",
"category": "Navigation",
"keywords": [
"log",
"log-out",
"navigation",
"out"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/log-out.json",
"svg": [
"https://useanimations.com/icons/log-out/log-out.svg"
],
"zip": "https://useanimations.com/icons/log-out.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/log-out.json",
"react": {
"package": "react-useanimations",
"import": "import logOut from 'react-useanimations/lib/logOut';",
"export": "logOut"
},
"page": "https://useanimations.com/icons/log-out",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1849,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/log-out.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "menu-v2",
"title": "Menu V2",
"category": "Navigation",
"keywords": [
"close",
"hamburger",
"menu",
"navigation"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/menu-v2.json",
"svg": [
"https://useanimations.com/icons/menu-v2/menu.svg"
],
"zip": "https://useanimations.com/icons/menu-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/menu-v2.json",
"react": {
"package": "react-useanimations",
"import": "import menu2 from 'react-useanimations/lib/menu2';",
"export": "menu2"
},
"page": "https://useanimations.com/icons/menu-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 2294,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "menu-v3",
"title": "Menu V3",
"category": "Navigation",
"keywords": [
"close",
"hamburger",
"menu",
"navigation"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/menu-v3.json",
"svg": [
"https://useanimations.com/icons/menu-v3/menu.svg"
],
"zip": "https://useanimations.com/icons/menu-v3.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/menu-v3.json",
"react": {
"package": "react-useanimations",
"import": "import menu3 from 'react-useanimations/lib/menu3';",
"export": "menu3"
},
"page": "https://useanimations.com/icons/menu-v3",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 2716,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu-v3.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "menu-v4",
"title": "Menu V4",
"category": "Navigation",
"keywords": [
"close",
"hamburger",
"menu",
"navigation"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/menu-v4.json",
"svg": [
"https://useanimations.com/icons/menu-v4/menu.svg"
],
"zip": "https://useanimations.com/icons/menu-v4.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/menu-v4.json",
"react": {
"package": "react-useanimations",
"import": "import menu4 from 'react-useanimations/lib/menu4';",
"export": "menu4"
},
"page": "https://useanimations.com/icons/menu-v4",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 700,
"bytes": 2391,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu-v4.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "more-horizontal",
"title": "More Horizontal",
"category": "Navigation",
"keywords": [
"horizontal",
"more",
"more-horizontal",
"navigation"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/more-horizontal.json",
"svg": [
"https://useanimations.com/icons/more-horizontal/more-horizontal.svg"
],
"zip": "https://useanimations.com/icons/more-horizontal.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/more-horizontal.json",
"react": {
"package": "react-useanimations",
"import": "import moreHorizontal from 'react-useanimations/lib/moreHorizontal';",
"export": "moreHorizontal"
},
"page": "https://useanimations.com/icons/more-horizontal",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2937,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/more-horizontal.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "more-vertical",
"title": "More Vertical",
"category": "Navigation",
"keywords": [
"more",
"more-vertical",
"navigation",
"vertical"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/more-vertical.json",
"svg": [
"https://useanimations.com/icons/more-vertical/more-vertical.svg"
],
"zip": "https://useanimations.com/icons/more-vertical.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/more-vertical.json",
"react": {
"package": "react-useanimations",
"import": "import moreVertical from 'react-useanimations/lib/moreVertical';",
"export": "moreVertical"
},
"page": "https://useanimations.com/icons/more-vertical",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2680,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/more-vertical.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "sidebar",
"title": "Sidebar",
"category": "Navigation",
"keywords": [
"navigation",
"sidebar"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/sidebar.json",
"svg": [
"https://useanimations.com/icons/sidebar/sidebar.svg"
],
"zip": "https://useanimations.com/icons/sidebar.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/sidebar.json",
"react": {
"package": "react-useanimations",
"import": "import sidebar from 'react-useanimations/lib/sidebar';",
"export": "sidebar"
},
"page": "https://useanimations.com/icons/sidebar",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1789,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/sidebar.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "award",
"title": "Award",
"category": "Action",
"keywords": [
"action",
"award"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/award.json",
"svg": [
"https://useanimations.com/icons/award/award.svg"
],
"zip": "https://useanimations.com/icons/award.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/award.json",
"react": {
"package": "react-useanimations",
"import": "import award from 'react-useanimations/lib/award';",
"export": "award"
},
"page": "https://useanimations.com/icons/award",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2743,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/award.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "bookmark",
"title": "Bookmark",
"category": "Action",
"keywords": [
"action",
"bookmark",
"save"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/bookmark.json",
"svg": [
"https://useanimations.com/icons/bookmark/bookmark.svg"
],
"zip": "https://useanimations.com/icons/bookmark.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/bookmark.json",
"react": {
"package": "react-useanimations",
"import": "import bookmark from 'react-useanimations/lib/bookmark';",
"export": "bookmark"
},
"page": "https://useanimations.com/icons/bookmark",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 1886,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/bookmark.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "calendar",
"title": "Calendar",
"category": "Action",
"keywords": [
"action",
"calendar",
"date",
"schedule"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/calendar.json",
"svg": [],
"zip": "https://useanimations.com/icons/calendar.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/calendar.json",
"react": {
"package": "react-useanimations",
"import": "import calendar from 'react-useanimations/lib/calendar';",
"export": "calendar"
},
"page": "https://useanimations.com/icons/calendar",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 3244,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/calendar.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "check",
"title": "Check",
"category": "Action",
"keywords": [
"action",
"check"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/check.json",
"svg": [
"https://useanimations.com/icons/check/check.svg"
],
"zip": "https://useanimations.com/icons/check.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/check.json",
"react": {
"package": "react-useanimations",
"import": "import check from 'react-useanimations/lib/check';",
"export": "check"
},
"page": "https://useanimations.com/icons/check",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1467,
"bytes": 2247,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/check.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "check-circle",
"title": "Check Circle",
"category": "Action",
"keywords": [
"action",
"check",
"check-circle",
"circle"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/check-circle.json",
"svg": [
"https://useanimations.com/icons/check-circle/check-circle.svg"
],
"zip": "https://useanimations.com/icons/check-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/check-circle.json",
"react": {
"package": "react-useanimations",
"import": "import checkCircle from 'react-useanimations/lib/checkCircle';",
"export": "checkCircle"
},
"page": "https://useanimations.com/icons/check-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2355,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/check-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "checkmark",
"title": "Checkmark",
"category": "Action",
"keywords": [
"action",
"check",
"checkmark",
"done",
"success",
"tick"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/checkmark.json",
"svg": [
"https://useanimations.com/icons/checkmark/checkmark.svg"
],
"zip": "https://useanimations.com/icons/checkmark.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/checkmark.json",
"react": {
"package": "react-useanimations",
"import": "import checkmark from 'react-useanimations/lib/checkmark';",
"export": "checkmark"
},
"page": "https://useanimations.com/icons/checkmark",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 981,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/checkmark.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "chevron-left",
"title": "Chevron left",
"category": "Action",
"keywords": [
"action",
"arrow",
"back",
"chevron",
"chevron-left",
"left",
"navigation",
"next"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/chevron-left.json",
"svg": [
"https://useanimations.com/icons/chevron-left/chevron-left.svg"
],
"zip": "https://useanimations.com/icons/chevron-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevron-left.json",
"react": {
"package": "react-useanimations",
"import": "import chevronLeft from 'react-useanimations/lib/chevronLeft';",
"export": "chevronLeft"
},
"page": "https://useanimations.com/icons/chevron-left",
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 2419,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevron-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "chevron-right",
"title": "Chevron right",
"category": "Action",
"keywords": [
"action",
"arrow",
"back",
"chevron",
"chevron-right",
"navigation",
"next",
"right"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/chevron-right.json",
"svg": [
"https://useanimations.com/icons/chevron-right/chevron-right.svg"
],
"zip": "https://useanimations.com/icons/chevron-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chevron-right.json",
"react": {
"package": "react-useanimations",
"import": "import chevronRight from 'react-useanimations/lib/chevronRight';",
"export": "chevronRight"
},
"page": "https://useanimations.com/icons/chevron-right",
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 2689,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevron-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "delete",
"title": "Delete",
"category": "Action",
"keywords": [
"action",
"delete"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/delete.json",
"svg": [
"https://useanimations.com/icons/delete/delete.svg"
],
"zip": "https://useanimations.com/icons/delete.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/delete.json",
"react": {
"package": "react-useanimations",
"import": "import deleteIcon from 'react-useanimations/lib/delete';",
"export": "deleteIcon"
},
"page": "https://useanimations.com/icons/delete",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2885,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/delete.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "download",
"title": "Download",
"category": "Action",
"keywords": [
"action",
"download",
"export",
"save"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/download.json",
"svg": [
"https://useanimations.com/icons/download/download.svg"
],
"zip": "https://useanimations.com/icons/download.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/download.json",
"react": {
"package": "react-useanimations",
"import": "import download from 'react-useanimations/lib/download';",
"export": "download"
},
"page": "https://useanimations.com/icons/download",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 4000,
"bytes": 6884,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/download.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "download-cloud",
"title": "Download Cloud",
"category": "Action",
"keywords": [
"action",
"cloud",
"download",
"download-cloud",
"export",
"save"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/download-cloud.json",
"svg": [
"https://useanimations.com/icons/download-cloud/download-cloud.svg"
],
"zip": "https://useanimations.com/icons/download-cloud.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/download-cloud.json",
"react": {
"package": "react-useanimations",
"import": "import downloadCloud from 'react-useanimations/lib/downloadCloud';",
"export": "downloadCloud"
},
"page": "https://useanimations.com/icons/download-cloud",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2202,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/download-cloud.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "download-v2",
"title": "Download V2",
"category": "Action",
"keywords": [
"action",
"download",
"download-v2",
"export",
"save"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/download-v2.json",
"svg": [
"https://useanimations.com/icons/download-v2/download-v2.svg"
],
"zip": "https://useanimations.com/icons/download-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/download-v2.json",
"react": {
"package": "react-useanimations",
"import": "import download2 from 'react-useanimations/lib/download2';",
"export": "download2"
},
"page": "https://useanimations.com/icons/download-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2070,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/download-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "edit",
"title": "Edit",
"category": "Action",
"keywords": [
"action",
"edit",
"edit-2",
"pencil",
"write"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/edit.json",
"svg": [
"https://useanimations.com/icons/edit/edit-2.svg",
"https://useanimations.com/icons/edit/edit.svg"
],
"zip": "https://useanimations.com/icons/edit.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/edit.json",
"react": {
"package": "react-useanimations",
"import": "import edit from 'react-useanimations/lib/edit';",
"export": "edit"
},
"page": "https://useanimations.com/icons/edit",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 2354,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/edit.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "edit-2",
"title": "Edit 2",
"category": "Action",
"keywords": [
"2",
"action",
"edit",
"edit-2",
"pencil",
"write"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/edit-2.json",
"svg": [
"https://useanimations.com/icons/edit-2/edit-2.svg"
],
"zip": "https://useanimations.com/icons/edit-2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/edit-2.json",
"react": {
"package": "react-useanimations",
"import": "import edit2 from 'react-useanimations/lib/edit2';",
"export": "edit2"
},
"page": "https://useanimations.com/icons/edit-2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1643,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/edit-2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "edit-3",
"title": "Edit 3",
"category": "Action",
"keywords": [
"3",
"action",
"edit",
"edit-3",
"pencil",
"write"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/edit-3.json",
"svg": [
"https://useanimations.com/icons/edit-3/edit-3.svg"
],
"zip": "https://useanimations.com/icons/edit-3.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/edit-3.json",
"react": {
"package": "react-useanimations",
"import": "import edit3 from 'react-useanimations/lib/edit3';",
"export": "edit3"
},
"page": "https://useanimations.com/icons/edit-3",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2629,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/edit-3.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "explore",
"title": "Explore",
"category": "Action",
"keywords": [
"action",
"compass",
"discover",
"explore"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/explore.json",
"svg": [
"https://useanimations.com/icons/explore/explore.svg"
],
"zip": "https://useanimations.com/icons/explore.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/explore.json",
"react": {
"package": "react-useanimations",
"import": "import explore from 'react-useanimations/lib/explore';",
"export": "explore"
},
"page": "https://useanimations.com/icons/explore",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1399,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/explore.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "filter",
"title": "Filter",
"category": "Action",
"keywords": [
"action",
"filter",
"funnel",
"sort"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/filter.json",
"svg": [
"https://useanimations.com/icons/filter/filter.svg"
],
"zip": "https://useanimations.com/icons/filter.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/filter.json",
"react": {
"package": "react-useanimations",
"import": "import filter from 'react-useanimations/lib/filter';",
"export": "filter"
},
"page": "https://useanimations.com/icons/filter",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 13875,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/filter.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "flag",
"title": "Flag",
"category": "Action",
"keywords": [
"action",
"flag"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/flag.json",
"svg": [
"https://useanimations.com/icons/flag/flag.svg"
],
"zip": "https://useanimations.com/icons/flag.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/flag.json",
"react": {
"package": "react-useanimations",
"import": "import flag from 'react-useanimations/lib/flag';",
"export": "flag"
},
"page": "https://useanimations.com/icons/flag",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2334,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/flag.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "folder",
"title": "Folder",
"category": "Action",
"keywords": [
"action",
"folder"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/folder.json",
"svg": [
"https://useanimations.com/icons/folder/folder.svg"
],
"zip": "https://useanimations.com/icons/folder.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/folder.json",
"react": {
"package": "react-useanimations",
"import": "import folder from 'react-useanimations/lib/folder';",
"export": "folder"
},
"page": "https://useanimations.com/icons/folder",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 2132,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/folder.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "heart",
"title": "Heart",
"category": "Action",
"keywords": [
"action",
"favorite",
"heart",
"like",
"love"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/heart.json",
"svg": [
"https://useanimations.com/icons/heart/heart.svg"
],
"zip": "https://useanimations.com/icons/heart.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/heart.json",
"react": {
"package": "react-useanimations",
"import": "import heart from 'react-useanimations/lib/heart';",
"export": "heart"
},
"page": "https://useanimations.com/icons/heart",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 2421,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/heart.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "heart-v2",
"title": "Heart V2",
"category": "Action",
"keywords": [
"action",
"favorite",
"heart",
"heart-v2",
"like",
"love"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/heart-v2.json",
"svg": [
"https://useanimations.com/icons/heart-v2/heart-v2.svg"
],
"zip": "https://useanimations.com/icons/heart-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/heart-v2.json",
"react": {
"package": "react-useanimations",
"import": "import heart2 from 'react-useanimations/lib/heart2';",
"export": "heart2"
},
"page": "https://useanimations.com/icons/heart-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1524,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/heart-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "help",
"title": "Help",
"category": "Action",
"keywords": [
"action",
"help",
"question",
"support"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/help.json",
"svg": [
"https://useanimations.com/icons/help/help.svg"
],
"zip": "https://useanimations.com/icons/help.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/help.json",
"react": {
"package": "react-useanimations",
"import": "import help from 'react-useanimations/lib/help';",
"export": "help"
},
"page": "https://useanimations.com/icons/help",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 2621,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/help.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "home",
"title": "Home",
"category": "Action",
"keywords": [
"action",
"home",
"house"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/home.json",
"svg": [
"https://useanimations.com/icons/home/home.svg"
],
"zip": "https://useanimations.com/icons/home.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/home.json",
"react": {
"package": "react-useanimations",
"import": "import home from 'react-useanimations/lib/home';",
"export": "home"
},
"page": "https://useanimations.com/icons/home",
"width": 32,
"height": 32,
"fps": 60,
"durationMs": 517,
"bytes": 1850,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/home.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "info",
"title": "Info",
"category": "Action",
"keywords": [
"about",
"action",
"info",
"information"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/info.json",
"svg": [
"https://useanimations.com/icons/info/info.svg"
],
"zip": "https://useanimations.com/icons/info.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/info.json",
"react": {
"package": "react-useanimations",
"import": "import info from 'react-useanimations/lib/info';",
"export": "info"
},
"page": "https://useanimations.com/icons/info",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 2489,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/info.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "key",
"title": "Key",
"category": "Action",
"keywords": [
"action",
"key"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/key.json",
"svg": [
"https://useanimations.com/icons/key/key.svg"
],
"zip": "https://useanimations.com/icons/key.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/key.json",
"react": {
"package": "react-useanimations",
"import": "import key from 'react-useanimations/lib/key';",
"export": "key"
},
"page": "https://useanimations.com/icons/key",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1616,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/key.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "link",
"title": "Link",
"category": "Action",
"keywords": [
"action",
"link"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/link.json",
"svg": [
"https://useanimations.com/icons/link/link.svg"
],
"zip": "https://useanimations.com/icons/link.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/link.json",
"react": {
"package": "react-useanimations",
"import": "import link from 'react-useanimations/lib/link';",
"export": "link"
},
"page": "https://useanimations.com/icons/link",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2478,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/link.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "link-2",
"title": "Link 2",
"category": "Action",
"keywords": [
"2",
"action",
"link",
"link-2"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/link-2.json",
"svg": [
"https://useanimations.com/icons/link-2/link-2.svg"
],
"zip": "https://useanimations.com/icons/link-2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/link-2.json",
"react": {
"package": "react-useanimations",
"import": "import link2 from 'react-useanimations/lib/link2';",
"export": "link2"
},
"page": "https://useanimations.com/icons/link-2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2757,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/link-2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "lock",
"title": "Lock / Unlock",
"category": "Action",
"keywords": [
"action",
"lock",
"password",
"security",
"unlock"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/lock.json",
"svg": [
"https://useanimations.com/icons/lock/lock.svg"
],
"zip": "https://useanimations.com/icons/lock.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/lock.json",
"react": {
"package": "react-useanimations",
"import": "import lock from 'react-useanimations/lib/lock';",
"export": "lock"
},
"page": "https://useanimations.com/icons/lock",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 1668,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/lock.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "maximize-minimize",
"title": "Maxi/Minimize",
"category": "Action",
"keywords": [
"action",
"collapse",
"expand",
"fullscreen",
"maxi",
"maximize",
"minimize"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/maximize-minimize.json",
"svg": [
"https://useanimations.com/icons/maximize-minimize/maximize.svg",
"https://useanimations.com/icons/maximize-minimize/minimize.svg"
],
"zip": "https://useanimations.com/icons/maximize-minimize.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/maximize-minimize.json",
"react": {
"package": "react-useanimations",
"import": "import maximizeMinimize from 'react-useanimations/lib/maximizeMinimize';",
"export": "maximizeMinimize"
},
"page": "https://useanimations.com/icons/maximize-minimize",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 2922,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/maximize-minimize.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "maximize-minimize-v2",
"title": "Maxi/Minimize V2",
"category": "Action",
"keywords": [
"action",
"collapse",
"expand",
"fullscreen",
"maxi",
"maximize-2",
"minimize",
"minimize-2"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/maximize-minimize-v2.json",
"svg": [
"https://useanimations.com/icons/maximize-minimize-v2/maximize-2.svg",
"https://useanimations.com/icons/maximize-minimize-v2/minimize-2.svg"
],
"zip": "https://useanimations.com/icons/maximize-minimize-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/maximize-minimize-v2.json",
"react": {
"package": "react-useanimations",
"import": "import maximizeMinimize2 from 'react-useanimations/lib/maximizeMinimize2';",
"export": "maximizeMinimize2"
},
"page": "https://useanimations.com/icons/maximize-minimize-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 3146,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/maximize-minimize-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "maximize-2",
"title": "Maximize 2",
"category": "Action",
"keywords": [
"2",
"action",
"maximize",
"maximize-2"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/maximize-2.json",
"svg": [
"https://useanimations.com/icons/maximize-2/maximize-2.svg"
],
"zip": "https://useanimations.com/icons/maximize-2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/maximize-2.json",
"react": {
"package": "react-useanimations",
"import": "import maximize2 from 'react-useanimations/lib/maximize2';",
"export": "maximize2"
},
"page": "https://useanimations.com/icons/maximize-2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2297,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/maximize-2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "minimize-2",
"title": "Minimize 2",
"category": "Action",
"keywords": [
"2",
"action",
"minimize",
"minimize-2"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/minimize-2.json",
"svg": [
"https://useanimations.com/icons/minimize-2/minimize-2.svg"
],
"zip": "https://useanimations.com/icons/minimize-2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/minimize-2.json",
"react": {
"package": "react-useanimations",
"import": "import minimize2 from 'react-useanimations/lib/minimize2';",
"export": "minimize2"
},
"page": "https://useanimations.com/icons/minimize-2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2301,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/minimize-2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "minus",
"title": "Minus",
"category": "Action",
"keywords": [
"action",
"minus"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/minus.json",
"svg": [
"https://useanimations.com/icons/minus/minus.svg"
],
"zip": "https://useanimations.com/icons/minus.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/minus.json",
"react": {
"package": "react-useanimations",
"import": "import minus from 'react-useanimations/lib/minus';",
"export": "minus"
},
"page": "https://useanimations.com/icons/minus",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1067,
"bytes": 1163,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/minus.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "minus-circle",
"title": "Minus Circle",
"category": "Action",
"keywords": [
"action",
"circle",
"minus",
"minus-circle"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/minus-circle.json",
"svg": [
"https://useanimations.com/icons/minus-circle/minus-circle.svg"
],
"zip": "https://useanimations.com/icons/minus-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/minus-circle.json",
"react": {
"package": "react-useanimations",
"import": "import minusCircle from 'react-useanimations/lib/minusCircle';",
"export": "minusCircle"
},
"page": "https://useanimations.com/icons/minus-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2123,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/minus-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "minus-square",
"title": "Minus Square",
"category": "Action",
"keywords": [
"action",
"minus",
"minus-square",
"square"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/minus-square.json",
"svg": [
"https://useanimations.com/icons/minus-square/minus-square.svg"
],
"zip": "https://useanimations.com/icons/minus-square.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/minus-square.json",
"react": {
"package": "react-useanimations",
"import": "import minusSquare from 'react-useanimations/lib/minusSquare';",
"export": "minusSquare"
},
"page": "https://useanimations.com/icons/minus-square",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2197,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/minus-square.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "plus-circle",
"title": "Plus Circle",
"category": "Action",
"keywords": [
"action",
"circle",
"plus",
"plus-circle"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/plus-circle.json",
"svg": [
"https://useanimations.com/icons/plus-circle/plus-circle.svg"
],
"zip": "https://useanimations.com/icons/plus-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/plus-circle.json",
"react": {
"package": "react-useanimations",
"import": "import plusCircle from 'react-useanimations/lib/plusCircle';",
"export": "plusCircle"
},
"page": "https://useanimations.com/icons/plus-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2361,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/plus-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "plus-square",
"title": "Plus Square",
"category": "Action",
"keywords": [
"action",
"plus",
"plus-square",
"square"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/plus-square.json",
"svg": [
"https://useanimations.com/icons/plus-square/plus-square.svg"
],
"zip": "https://useanimations.com/icons/plus-square.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/plus-square.json",
"react": {
"package": "react-useanimations",
"import": "import plusSquare from 'react-useanimations/lib/plusSquare';",
"export": "plusSquare"
},
"page": "https://useanimations.com/icons/plus-square",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2435,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/plus-square.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "plus-to-x",
"title": "Plus/X",
"category": "Action",
"keywords": [
"action",
"add",
"close",
"expand",
"plus",
"x"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/plus-to-x.json",
"svg": [
"https://useanimations.com/icons/plus-to-x/plus.svg",
"https://useanimations.com/icons/plus-to-x/x.svg"
],
"zip": "https://useanimations.com/icons/plus-to-x.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/plus-to-x.json",
"react": {
"package": "react-useanimations",
"import": "import plusToX from 'react-useanimations/lib/plusToX';",
"export": "plusToX"
},
"page": "https://useanimations.com/icons/plus-to-x",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 1267,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/plus-to-x.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "power",
"title": "Power",
"category": "Action",
"keywords": [
"action",
"power"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/power.json",
"svg": [
"https://useanimations.com/icons/power/power.svg"
],
"zip": "https://useanimations.com/icons/power.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/power.json",
"react": {
"package": "react-useanimations",
"import": "import power from 'react-useanimations/lib/power';",
"export": "power"
},
"page": "https://useanimations.com/icons/power",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2478,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/power.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "refresh",
"title": "Refresh",
"category": "Action",
"keywords": [
"action",
"refresh",
"reload",
"sync"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/refresh.json",
"svg": [
"https://useanimations.com/icons/refresh/refresh.svg"
],
"zip": "https://useanimations.com/icons/refresh.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/refresh.json",
"react": {
"package": "react-useanimations",
"import": "import refresh from 'react-useanimations/lib/refresh';",
"export": "refresh"
},
"page": "https://useanimations.com/icons/refresh",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 1458,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/refresh.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "refresh-ccw",
"title": "Refresh Ccw",
"category": "Action",
"keywords": [
"action",
"ccw",
"refresh",
"refresh-ccw",
"reload",
"sync"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/refresh-ccw.json",
"svg": [
"https://useanimations.com/icons/refresh-ccw/refresh-ccw.svg"
],
"zip": "https://useanimations.com/icons/refresh-ccw.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/refresh-ccw.json",
"react": {
"package": "react-useanimations",
"import": "import refreshCcw from 'react-useanimations/lib/refreshCcw';",
"export": "refreshCcw"
},
"page": "https://useanimations.com/icons/refresh-ccw",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1405,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/refresh-ccw.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "refresh-v2",
"title": "Refresh V2",
"category": "Action",
"keywords": [
"action",
"refresh",
"refresh-v2",
"reload",
"sync"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/refresh-v2.json",
"svg": [
"https://useanimations.com/icons/refresh-v2/refresh-v2.svg"
],
"zip": "https://useanimations.com/icons/refresh-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/refresh-v2.json",
"react": {
"package": "react-useanimations",
"import": "import refresh2 from 'react-useanimations/lib/refresh2';",
"export": "refresh2"
},
"page": "https://useanimations.com/icons/refresh-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1403,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/refresh-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "rotate-ccw",
"title": "Rotate Ccw",
"category": "Action",
"keywords": [
"action",
"ccw",
"rotate",
"rotate-ccw"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/rotate-ccw.json",
"svg": [
"https://useanimations.com/icons/rotate-ccw/rotate-ccw.svg"
],
"zip": "https://useanimations.com/icons/rotate-ccw.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/rotate-ccw.json",
"react": {
"package": "react-useanimations",
"import": "import rotateCcw from 'react-useanimations/lib/rotateCcw';",
"export": "rotateCcw"
},
"page": "https://useanimations.com/icons/rotate-ccw",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1183,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/rotate-ccw.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "rotate-cw",
"title": "Rotate Cw",
"category": "Action",
"keywords": [
"action",
"cw",
"rotate",
"rotate-cw"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/rotate-cw.json",
"svg": [
"https://useanimations.com/icons/rotate-cw/rotate-cw.svg"
],
"zip": "https://useanimations.com/icons/rotate-cw.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/rotate-cw.json",
"react": {
"package": "react-useanimations",
"import": "import rotateCw from 'react-useanimations/lib/rotateCw';",
"export": "rotateCw"
},
"page": "https://useanimations.com/icons/rotate-cw",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1183,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/rotate-cw.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "save",
"title": "Save",
"category": "Action",
"keywords": [
"action",
"save"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/save.json",
"svg": [
"https://useanimations.com/icons/save/save.svg"
],
"zip": "https://useanimations.com/icons/save.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/save.json",
"react": {
"package": "react-useanimations",
"import": "import save from 'react-useanimations/lib/save';",
"export": "save"
},
"page": "https://useanimations.com/icons/save",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2902,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/save.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "search-to-x",
"title": "Search/X",
"category": "Action",
"keywords": [
"action",
"clear",
"close",
"search",
"x"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/search-to-x.json",
"svg": [
"https://useanimations.com/icons/search-to-x/search.svg",
"https://useanimations.com/icons/search-to-x/x.svg"
],
"zip": "https://useanimations.com/icons/search-to-x.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/search-to-x.json",
"react": {
"package": "react-useanimations",
"import": "import searchToX from 'react-useanimations/lib/searchToX';",
"export": "searchToX"
},
"page": "https://useanimations.com/icons/search-to-x",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 3185,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/search-to-x.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "settings",
"title": "Settings",
"category": "Action",
"keywords": [
"action",
"cog",
"gear",
"preferences",
"settings"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/settings.json",
"svg": [
"https://useanimations.com/icons/settings/settings.svg"
],
"zip": "https://useanimations.com/icons/settings.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/settings.json",
"react": {
"package": "react-useanimations",
"import": "import settings from 'react-useanimations/lib/settings';",
"export": "settings"
},
"page": "https://useanimations.com/icons/settings",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1667,
"bytes": 3534,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/settings.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "settings-v2",
"title": "Settings V2",
"category": "Action",
"keywords": [
"action",
"cog",
"gear",
"preferences",
"settings",
"sliders"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/settings-v2.json",
"svg": [
"https://useanimations.com/icons/settings-v2/sliders.svg"
],
"zip": "https://useanimations.com/icons/settings-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/settings-v2.json",
"react": {
"package": "react-useanimations",
"import": "import settings2 from 'react-useanimations/lib/settings2';",
"export": "settings2"
},
"page": "https://useanimations.com/icons/settings-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 5640,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/settings-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "shield",
"title": "Shield",
"category": "Action",
"keywords": [
"action",
"shield"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/shield.json",
"svg": [
"https://useanimations.com/icons/shield/shield.svg"
],
"zip": "https://useanimations.com/icons/shield.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/shield.json",
"react": {
"package": "react-useanimations",
"import": "import shield from 'react-useanimations/lib/shield';",
"export": "shield"
},
"page": "https://useanimations.com/icons/shield",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1153,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/shield.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "shield-off",
"title": "Shield Off",
"category": "Action",
"keywords": [
"action",
"off",
"shield",
"shield-off",
"shield-off-off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/shield-off.json",
"svg": [
"https://useanimations.com/icons/shield-off/shield-off-off.svg",
"https://useanimations.com/icons/shield-off/shield-off.svg"
],
"zip": "https://useanimations.com/icons/shield-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/shield-off.json",
"react": {
"package": "react-useanimations",
"import": "import shieldOff from 'react-useanimations/lib/shieldOff';",
"export": "shieldOff"
},
"page": "https://useanimations.com/icons/shield-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1559,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/shield-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "slash",
"title": "Slash",
"category": "Action",
"keywords": [
"action",
"slash"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/slash.json",
"svg": [
"https://useanimations.com/icons/slash/slash.svg"
],
"zip": "https://useanimations.com/icons/slash.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/slash.json",
"react": {
"package": "react-useanimations",
"import": "import slash from 'react-useanimations/lib/slash';",
"export": "slash"
},
"page": "https://useanimations.com/icons/slash",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2154,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/slash.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "star",
"title": "Star",
"category": "Action",
"keywords": [
"action",
"favorite",
"rating",
"star"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/star.json",
"svg": [
"https://useanimations.com/icons/star/star.svg"
],
"zip": "https://useanimations.com/icons/star.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/star.json",
"react": {
"package": "react-useanimations",
"import": "import star from 'react-useanimations/lib/star';",
"export": "star"
},
"page": "https://useanimations.com/icons/star",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 2050,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/star.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "thumb-up",
"title": "Thumb up",
"category": "Action",
"keywords": [
"action",
"like",
"thumb",
"thumb-up",
"up",
"upvote"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/thumb-up.json",
"svg": [
"https://useanimations.com/icons/thumb-up/thumb-up.svg"
],
"zip": "https://useanimations.com/icons/thumb-up.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/thumb-up.json",
"react": {
"package": "react-useanimations",
"import": "import thumbUp from 'react-useanimations/lib/thumbUp';",
"export": "thumbUp"
},
"page": "https://useanimations.com/icons/thumb-up",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 733,
"bytes": 6883,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/thumb-up.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "thumbs-down",
"title": "Thumbs Down",
"category": "Action",
"keywords": [
"action",
"down",
"thumbs",
"thumbs-down"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/thumbs-down.json",
"svg": [
"https://useanimations.com/icons/thumbs-down/thumbs-down.svg"
],
"zip": "https://useanimations.com/icons/thumbs-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/thumbs-down.json",
"react": {
"package": "react-useanimations",
"import": "import thumbsDown from 'react-useanimations/lib/thumbsDown';",
"export": "thumbsDown"
},
"page": "https://useanimations.com/icons/thumbs-down",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1707,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/thumbs-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "trash",
"title": "Trash",
"category": "Action",
"keywords": [
"action",
"bin",
"delete",
"remove",
"trash"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/trash.json",
"svg": [
"https://useanimations.com/icons/trash/trash.svg"
],
"zip": "https://useanimations.com/icons/trash.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/trash.json",
"react": {
"package": "react-useanimations",
"import": "import trash from 'react-useanimations/lib/trash';",
"export": "trash"
},
"page": "https://useanimations.com/icons/trash",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 2181,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/trash.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "trash-v2",
"title": "Trash V2",
"category": "Action",
"keywords": [
"action",
"bin",
"delete",
"remove",
"trash",
"trash-2"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/trash-v2.json",
"svg": [
"https://useanimations.com/icons/trash-v2/trash-2.svg"
],
"zip": "https://useanimations.com/icons/trash-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/trash-v2.json",
"react": {
"package": "react-useanimations",
"import": "import trash2 from 'react-useanimations/lib/trash2';",
"export": "trash2"
},
"page": "https://useanimations.com/icons/trash-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 3148,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/trash-v2.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "upload",
"title": "Upload",
"category": "Action",
"keywords": [
"action",
"upload"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/upload.json",
"svg": [
"https://useanimations.com/icons/upload/upload.svg"
],
"zip": "https://useanimations.com/icons/upload.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/upload.json",
"react": {
"package": "react-useanimations",
"import": "import upload from 'react-useanimations/lib/upload';",
"export": "upload"
},
"page": "https://useanimations.com/icons/upload",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2060,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/upload.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "upload-cloud",
"title": "Upload Cloud",
"category": "Action",
"keywords": [
"action",
"cloud",
"upload",
"upload-cloud"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/upload-cloud.json",
"svg": [
"https://useanimations.com/icons/upload-cloud/upload-cloud.svg"
],
"zip": "https://useanimations.com/icons/upload-cloud.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/upload-cloud.json",
"react": {
"package": "react-useanimations",
"import": "import uploadCloud from 'react-useanimations/lib/uploadCloud';",
"export": "uploadCloud"
},
"page": "https://useanimations.com/icons/upload-cloud",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2309,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/upload-cloud.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "visibility",
"title": "Visibility",
"category": "Action",
"keywords": [
"action",
"eye",
"eye-off",
"hide",
"password",
"show",
"visibility"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/visibility.json",
"svg": [
"https://useanimations.com/icons/visibility/eye-off.svg",
"https://useanimations.com/icons/visibility/eye.svg"
],
"zip": "https://useanimations.com/icons/visibility.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/visibility.json",
"react": {
"package": "react-useanimations",
"import": "import visibility from 'react-useanimations/lib/visibility';",
"export": "visibility"
},
"page": "https://useanimations.com/icons/visibility",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 2581,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/visibility.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "visibility-v2",
"title": "Visibility V2",
"category": "Action",
"keywords": [
"action",
"eye",
"eye-off",
"hide",
"password",
"show",
"visibility"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/visibility-v2.json",
"svg": [
"https://useanimations.com/icons/visibility-v2/eye-off.svg",
"https://useanimations.com/icons/visibility-v2/eye.svg"
],
"zip": "https://useanimations.com/icons/visibility-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/visibility-v2.json",
"react": {
"package": "react-useanimations",
"import": "import visibility2 from 'react-useanimations/lib/visibility2';",
"export": "visibility2"
},
"page": "https://useanimations.com/icons/visibility-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 2707,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/visibility-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "visibility-v3",
"title": "Visibility V3",
"category": "Action",
"keywords": [
"action",
"eye",
"eye-off",
"hide",
"password",
"show",
"visibility"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/visibility-v3.json",
"svg": [
"https://useanimations.com/icons/visibility-v3/eye-off.svg",
"https://useanimations.com/icons/visibility-v3/eye.svg"
],
"zip": "https://useanimations.com/icons/visibility-v3.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/visibility-v3.json",
"react": {
"package": "react-useanimations",
"import": "import visibility3 from 'react-useanimations/lib/visibility3';",
"export": "visibility3"
},
"page": "https://useanimations.com/icons/visibility-v3",
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 567,
"bytes": 5877,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/visibility-v3.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "x-square",
"title": "X Square",
"category": "Action",
"keywords": [
"action",
"square",
"x",
"x-square"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/x-square.json",
"svg": [
"https://useanimations.com/icons/x-square/x-square.svg"
],
"zip": "https://useanimations.com/icons/x-square.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/x-square.json",
"react": {
"package": "react-useanimations",
"import": "import xSquare from 'react-useanimations/lib/xSquare';",
"export": "xSquare"
},
"page": "https://useanimations.com/icons/x-square",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2430,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/x-square.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "zoom-in",
"title": "Zoom In",
"category": "Action",
"keywords": [
"action",
"in",
"magnifier",
"magnify",
"zoom"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/zoom-in.json",
"svg": [],
"zip": "https://useanimations.com/icons/zoom-in.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/zoom-in.json",
"react": {
"package": "react-useanimations",
"import": "import zoomIn from 'react-useanimations/lib/zoomIn';",
"export": "zoomIn"
},
"page": "https://useanimations.com/icons/zoom-in",
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 4054,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/zoom-in.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "zoom-out",
"title": "Zoom Out",
"category": "Action",
"keywords": [
"action",
"magnifier",
"magnify",
"out",
"zoom"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/zoom-out.json",
"svg": [],
"zip": "https://useanimations.com/icons/zoom-out.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/zoom-out.json",
"react": {
"package": "react-useanimations",
"import": "import zoomOut from 'react-useanimations/lib/zoomOut';",
"export": "zoomOut"
},
"page": "https://useanimations.com/icons/zoom-out",
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 2968,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/zoom-out.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "archive",
"title": "Archive",
"category": "Content",
"keywords": [
"archive",
"box",
"content",
"storage"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/archive.json",
"svg": [
"https://useanimations.com/icons/archive/archive.svg"
],
"zip": "https://useanimations.com/icons/archive.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/archive.json",
"react": {
"package": "react-useanimations",
"import": "import archive from 'react-useanimations/lib/archive';",
"export": "archive"
},
"page": "https://useanimations.com/icons/archive",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 3971,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/archive.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "book",
"title": "Book",
"category": "Content",
"keywords": [
"book",
"content"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/book.json",
"svg": [
"https://useanimations.com/icons/book/book.svg"
],
"zip": "https://useanimations.com/icons/book.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/book.json",
"react": {
"package": "react-useanimations",
"import": "import book from 'react-useanimations/lib/book';",
"export": "book"
},
"page": "https://useanimations.com/icons/book",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1727,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/book.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "book-open",
"title": "Book Open",
"category": "Content",
"keywords": [
"book",
"book-open",
"content",
"open"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/book-open.json",
"svg": [
"https://useanimations.com/icons/book-open/book-open.svg"
],
"zip": "https://useanimations.com/icons/book-open.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/book-open.json",
"react": {
"package": "react-useanimations",
"import": "import bookOpen from 'react-useanimations/lib/bookOpen';",
"export": "bookOpen"
},
"page": "https://useanimations.com/icons/book-open",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1467,
"bytes": 3382,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/book-open.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "clipboard",
"title": "Clipboard",
"category": "Content",
"keywords": [
"clipboard",
"content"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/clipboard.json",
"svg": [
"https://useanimations.com/icons/clipboard/clipboard.svg"
],
"zip": "https://useanimations.com/icons/clipboard.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/clipboard.json",
"react": {
"package": "react-useanimations",
"import": "import clipboard from 'react-useanimations/lib/clipboard';",
"export": "clipboard"
},
"page": "https://useanimations.com/icons/clipboard",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2191,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/clipboard.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "copy",
"title": "Copy",
"category": "Content",
"keywords": [
"clipboard",
"content",
"copy",
"duplicate"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/copy.json",
"svg": [
"https://useanimations.com/icons/copy/copy.svg"
],
"zip": "https://useanimations.com/icons/copy.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/copy.json",
"react": {
"package": "react-useanimations",
"import": "import copy from 'react-useanimations/lib/copy';",
"export": "copy"
},
"page": "https://useanimations.com/icons/copy",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 1910,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/copy.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "file",
"title": "File",
"category": "Content",
"keywords": [
"content",
"file"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/file.json",
"svg": [
"https://useanimations.com/icons/file/file.svg"
],
"zip": "https://useanimations.com/icons/file.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/file.json",
"react": {
"package": "react-useanimations",
"import": "import file from 'react-useanimations/lib/file';",
"export": "file"
},
"page": "https://useanimations.com/icons/file",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1751,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/file.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "file-minus",
"title": "File Minus",
"category": "Content",
"keywords": [
"content",
"file",
"file-minus",
"minus"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/file-minus.json",
"svg": [
"https://useanimations.com/icons/file-minus/file-minus.svg"
],
"zip": "https://useanimations.com/icons/file-minus.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/file-minus.json",
"react": {
"package": "react-useanimations",
"import": "import fileMinus from 'react-useanimations/lib/fileMinus';",
"export": "fileMinus"
},
"page": "https://useanimations.com/icons/file-minus",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2306,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/file-minus.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "file-plus",
"title": "File Plus",
"category": "Content",
"keywords": [
"content",
"file",
"file-plus",
"plus"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/file-plus.json",
"svg": [
"https://useanimations.com/icons/file-plus/file-plus.svg"
],
"zip": "https://useanimations.com/icons/file-plus.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/file-plus.json",
"react": {
"package": "react-useanimations",
"import": "import filePlus from 'react-useanimations/lib/filePlus';",
"export": "filePlus"
},
"page": "https://useanimations.com/icons/file-plus",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2545,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/file-plus.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "file-text",
"title": "File Text",
"category": "Content",
"keywords": [
"content",
"file",
"file-text",
"text"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/file-text.json",
"svg": [
"https://useanimations.com/icons/file-text/file-text.svg"
],
"zip": "https://useanimations.com/icons/file-text.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/file-text.json",
"react": {
"package": "react-useanimations",
"import": "import fileText from 'react-useanimations/lib/fileText';",
"export": "fileText"
},
"page": "https://useanimations.com/icons/file-text",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4441,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/file-text.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "folder-minus",
"title": "Folder Minus",
"category": "Content",
"keywords": [
"content",
"folder",
"folder-minus",
"minus"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/folder-minus.json",
"svg": [
"https://useanimations.com/icons/folder-minus/folder-minus.svg"
],
"zip": "https://useanimations.com/icons/folder-minus.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/folder-minus.json",
"react": {
"package": "react-useanimations",
"import": "import folderMinus from 'react-useanimations/lib/folderMinus';",
"export": "folderMinus"
},
"page": "https://useanimations.com/icons/folder-minus",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2238,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/folder-minus.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "folder-plus",
"title": "Folder Plus",
"category": "Content",
"keywords": [
"content",
"folder",
"folder-plus",
"plus"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/folder-plus.json",
"svg": [
"https://useanimations.com/icons/folder-plus/folder-plus.svg"
],
"zip": "https://useanimations.com/icons/folder-plus.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/folder-plus.json",
"react": {
"package": "react-useanimations",
"import": "import folderPlus from 'react-useanimations/lib/folderPlus';",
"export": "folderPlus"
},
"page": "https://useanimations.com/icons/folder-plus",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2477,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/folder-plus.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "image",
"title": "Image",
"category": "Content",
"keywords": [
"content",
"image"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/image.json",
"svg": [
"https://useanimations.com/icons/image/image.svg"
],
"zip": "https://useanimations.com/icons/image.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/image.json",
"react": {
"package": "react-useanimations",
"import": "import image from 'react-useanimations/lib/image';",
"export": "image"
},
"page": "https://useanimations.com/icons/image",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2889,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/image.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "inbox",
"title": "Inbox",
"category": "Content",
"keywords": [
"content",
"inbox"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/inbox.json",
"svg": [
"https://useanimations.com/icons/inbox/inbox.svg"
],
"zip": "https://useanimations.com/icons/inbox.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/inbox.json",
"react": {
"package": "react-useanimations",
"import": "import inbox from 'react-useanimations/lib/inbox';",
"export": "inbox"
},
"page": "https://useanimations.com/icons/inbox",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2155,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/inbox.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "mail",
"title": "Mail",
"category": "Content",
"keywords": [
"content",
"email",
"envelope",
"mail",
"message"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/mail.json",
"svg": [
"https://useanimations.com/icons/mail/mail.svg"
],
"zip": "https://useanimations.com/icons/mail.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/mail.json",
"react": {
"package": "react-useanimations",
"import": "import mail from 'react-useanimations/lib/mail';",
"export": "mail"
},
"page": "https://useanimations.com/icons/mail",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 667,
"bytes": 4351,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/mail.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "paperclip",
"title": "Paperclip",
"category": "Content",
"keywords": [
"content",
"paperclip"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/paperclip.json",
"svg": [
"https://useanimations.com/icons/paperclip/paperclip.svg"
],
"zip": "https://useanimations.com/icons/paperclip.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/paperclip.json",
"react": {
"package": "react-useanimations",
"import": "import paperclip from 'react-useanimations/lib/paperclip';",
"export": "paperclip"
},
"page": "https://useanimations.com/icons/paperclip",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1371,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/paperclip.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "share",
"title": "Share",
"category": "Content",
"keywords": [
"content",
"send",
"share",
"social"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/share.json",
"svg": [
"https://useanimations.com/icons/share/share.svg"
],
"zip": "https://useanimations.com/icons/share.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/share.json",
"react": {
"package": "react-useanimations",
"import": "import share from 'react-useanimations/lib/share';",
"export": "share"
},
"page": "https://useanimations.com/icons/share",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 7209,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/share.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "user",
"title": "User",
"category": "Content",
"keywords": [
"account",
"content",
"person",
"profile",
"user"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/user.json",
"svg": [
"https://useanimations.com/icons/user/user.svg"
],
"zip": "https://useanimations.com/icons/user.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/user.json",
"react": {
"package": "react-useanimations",
"import": "import user from 'react-useanimations/lib/user';",
"export": "user"
},
"page": "https://useanimations.com/icons/user",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2113,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/user.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "user-check",
"title": "User Check",
"category": "Content",
"keywords": [
"account",
"check",
"content",
"person",
"profile",
"user",
"user-check"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/user-check.json",
"svg": [
"https://useanimations.com/icons/user-check/user-check.svg"
],
"zip": "https://useanimations.com/icons/user-check.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/user-check.json",
"react": {
"package": "react-useanimations",
"import": "import userCheck from 'react-useanimations/lib/userCheck';",
"export": "userCheck"
},
"page": "https://useanimations.com/icons/user-check",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3417,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/user-check.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "user-minus",
"title": "User minus",
"category": "Content",
"keywords": [
"account",
"content",
"minus",
"person",
"profile",
"user",
"user-minus"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/user-minus.json",
"svg": [
"https://useanimations.com/icons/user-minus/user-minus.svg"
],
"zip": "https://useanimations.com/icons/user-minus.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/user-minus.json",
"react": {
"package": "react-useanimations",
"import": "import userMinus from 'react-useanimations/lib/userMinus';",
"export": "userMinus"
},
"page": "https://useanimations.com/icons/user-minus",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 2370,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/user-minus.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "user-plus",
"title": "User plus",
"category": "Content",
"keywords": [
"account",
"content",
"person",
"plus",
"profile",
"user",
"user-plus"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/user-plus.json",
"svg": [
"https://useanimations.com/icons/user-plus/user-plus.svg"
],
"zip": "https://useanimations.com/icons/user-plus.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/user-plus.json",
"react": {
"package": "react-useanimations",
"import": "import userPlus from 'react-useanimations/lib/userPlus';",
"export": "userPlus"
},
"page": "https://useanimations.com/icons/user-plus",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 2940,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/user-plus.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "user-x",
"title": "User X",
"category": "Content",
"keywords": [
"account",
"content",
"person",
"profile",
"user",
"user-x",
"x"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/user-x.json",
"svg": [
"https://useanimations.com/icons/user-x/user-x.svg"
],
"zip": "https://useanimations.com/icons/user-x.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/user-x.json",
"react": {
"package": "react-useanimations",
"import": "import userX from 'react-useanimations/lib/userX';",
"export": "userX"
},
"page": "https://useanimations.com/icons/user-x",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 2966,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/user-x.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "users",
"title": "Users",
"category": "Content",
"keywords": [
"account",
"content",
"person",
"profile",
"users"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/users.json",
"svg": [
"https://useanimations.com/icons/users/users.svg"
],
"zip": "https://useanimations.com/icons/users.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/users.json",
"react": {
"package": "react-useanimations",
"import": "import users from 'react-useanimations/lib/users';",
"export": "users"
},
"page": "https://useanimations.com/icons/users",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 4265,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/users.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "check-box",
"title": "Checkbox",
"category": "Form",
"keywords": [
"check-square",
"checkbox",
"form",
"select"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/check-box.json",
"svg": [
"https://useanimations.com/icons/check-box/check-square.svg"
],
"zip": "https://useanimations.com/icons/check-box.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/check-box.json",
"react": {
"package": "react-useanimations",
"import": "import checkBox from 'react-useanimations/lib/checkBox';",
"export": "checkBox"
},
"page": "https://useanimations.com/icons/check-box",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 1862,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/check-box.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "radio-button",
"title": "Radio button",
"category": "Form",
"keywords": [
"button",
"check-circle",
"form",
"radio",
"select"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/radio-button.json",
"svg": [
"https://useanimations.com/icons/radio-button/check-circle.svg"
],
"zip": "https://useanimations.com/icons/radio-button.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/radio-button.json",
"react": {
"package": "react-useanimations",
"import": "import radioButton from 'react-useanimations/lib/radioButton';",
"export": "radioButton"
},
"page": "https://useanimations.com/icons/radio-button",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 1878,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/radio-button.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "toggle",
"title": "Toggle",
"category": "Form",
"keywords": [
"form",
"on off",
"switch",
"toggle",
"toggle-left",
"toggle-right"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/toggle.json",
"svg": [
"https://useanimations.com/icons/toggle/toggle-left.svg",
"https://useanimations.com/icons/toggle/toggle-right.svg"
],
"zip": "https://useanimations.com/icons/toggle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/toggle.json",
"react": {
"package": "react-useanimations",
"import": "import toggle from 'react-useanimations/lib/toggle';",
"export": "toggle"
},
"page": "https://useanimations.com/icons/toggle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 500,
"bytes": 1382,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/toggle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "airplay",
"title": "Airplay",
"category": "Media",
"keywords": [
"airplay",
"media"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/airplay.json",
"svg": [
"https://useanimations.com/icons/airplay/airplay.svg"
],
"zip": "https://useanimations.com/icons/airplay.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/airplay.json",
"react": {
"package": "react-useanimations",
"import": "import airplay from 'react-useanimations/lib/airplay';",
"export": "airplay"
},
"page": "https://useanimations.com/icons/airplay",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 2674,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/airplay.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "aperture",
"title": "Aperture",
"category": "Media",
"keywords": [
"aperture",
"media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/aperture.json",
"svg": [
"https://useanimations.com/icons/aperture/aperture.svg"
],
"zip": "https://useanimations.com/icons/aperture.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/aperture.json",
"react": {
"package": "react-useanimations",
"import": "import aperture from 'react-useanimations/lib/aperture';",
"export": "aperture"
},
"page": "https://useanimations.com/icons/aperture",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2065,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/aperture.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "camera",
"title": "Camera",
"category": "Media",
"keywords": [
"camera",
"media"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/camera.json",
"svg": [
"https://useanimations.com/icons/camera/camera.svg"
],
"zip": "https://useanimations.com/icons/camera.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/camera.json",
"react": {
"package": "react-useanimations",
"import": "import camera from 'react-useanimations/lib/camera';",
"export": "camera"
},
"page": "https://useanimations.com/icons/camera",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2261,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/camera.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "camera-off",
"title": "Camera Off",
"category": "Media",
"keywords": [
"camera",
"camera-off",
"camera-off-off",
"media",
"off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/camera-off.json",
"svg": [
"https://useanimations.com/icons/camera-off/camera-off-off.svg",
"https://useanimations.com/icons/camera-off/camera-off.svg"
],
"zip": "https://useanimations.com/icons/camera-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/camera-off.json",
"react": {
"package": "react-useanimations",
"import": "import cameraOff from 'react-useanimations/lib/cameraOff';",
"export": "cameraOff"
},
"page": "https://useanimations.com/icons/camera-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1878,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/camera-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "cast",
"title": "Cast",
"category": "Media",
"keywords": [
"cast",
"media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/cast.json",
"svg": [
"https://useanimations.com/icons/cast/cast.svg"
],
"zip": "https://useanimations.com/icons/cast.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cast.json",
"react": {
"package": "react-useanimations",
"import": "import cast from 'react-useanimations/lib/cast';",
"export": "cast"
},
"page": "https://useanimations.com/icons/cast",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3928,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/cast.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "disc",
"title": "Disc",
"category": "Media",
"keywords": [
"disc",
"media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/disc.json",
"svg": [
"https://useanimations.com/icons/disc/disc.svg"
],
"zip": "https://useanimations.com/icons/disc.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/disc.json",
"react": {
"package": "react-useanimations",
"import": "import disc from 'react-useanimations/lib/disc';",
"export": "disc"
},
"page": "https://useanimations.com/icons/disc",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2213,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/disc.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "fast-forward",
"title": "Fast Forward",
"category": "Media",
"keywords": [
"fast",
"fast-forward",
"forward",
"media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/fast-forward.json",
"svg": [
"https://useanimations.com/icons/fast-forward/fast-forward.svg"
],
"zip": "https://useanimations.com/icons/fast-forward.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/fast-forward.json",
"react": {
"package": "react-useanimations",
"import": "import fastForward from 'react-useanimations/lib/fastForward';",
"export": "fastForward"
},
"page": "https://useanimations.com/icons/fast-forward",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 2087,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/fast-forward.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "film",
"title": "Film",
"category": "Media",
"keywords": [
"film",
"media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/film.json",
"svg": [
"https://useanimations.com/icons/film/film.svg"
],
"zip": "https://useanimations.com/icons/film.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/film.json",
"react": {
"package": "react-useanimations",
"import": "import film from 'react-useanimations/lib/film';",
"export": "film"
},
"page": "https://useanimations.com/icons/film",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2213,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/film.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "headphones",
"title": "Headphones",
"category": "Media",
"keywords": [
"headphones",
"media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/headphones.json",
"svg": [
"https://useanimations.com/icons/headphones/headphones.svg"
],
"zip": "https://useanimations.com/icons/headphones.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/headphones.json",
"react": {
"package": "react-useanimations",
"import": "import headphones from 'react-useanimations/lib/headphones';",
"export": "headphones"
},
"page": "https://useanimations.com/icons/headphones",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1971,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/headphones.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "mic-off",
"title": "Mic Off",
"category": "Media",
"keywords": [
"media",
"mic",
"mic-off",
"mic-off-off",
"off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/mic-off.json",
"svg": [
"https://useanimations.com/icons/mic-off/mic-off-off.svg",
"https://useanimations.com/icons/mic-off/mic-off.svg"
],
"zip": "https://useanimations.com/icons/mic-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/mic-off.json",
"react": {
"package": "react-useanimations",
"import": "import micOff from 'react-useanimations/lib/micOff';",
"export": "micOff"
},
"page": "https://useanimations.com/icons/mic-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1963,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/mic-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "microphone",
"title": "Microphone",
"category": "Media",
"keywords": [
"audio",
"media",
"mic",
"mic-off",
"microphone",
"mute",
"record"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/microphone.json",
"svg": [
"https://useanimations.com/icons/microphone/mic-off.svg",
"https://useanimations.com/icons/microphone/mic.svg"
],
"zip": "https://useanimations.com/icons/microphone.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/microphone.json",
"react": {
"package": "react-useanimations",
"import": "import microphone from 'react-useanimations/lib/microphone';",
"export": "microphone"
},
"page": "https://useanimations.com/icons/microphone",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 3442,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/microphone.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "microphone-v2",
"title": "Microphone V2",
"category": "Media",
"keywords": [
"audio",
"media",
"mic",
"mic-off",
"microphone",
"mute",
"record"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/microphone-v2.json",
"svg": [
"https://useanimations.com/icons/microphone-v2/mic-off.svg",
"https://useanimations.com/icons/microphone-v2/mic.svg"
],
"zip": "https://useanimations.com/icons/microphone-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/microphone-v2.json",
"react": {
"package": "react-useanimations",
"import": "import microphone2 from 'react-useanimations/lib/microphone2';",
"export": "microphone2"
},
"page": "https://useanimations.com/icons/microphone-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 3565,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/microphone-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "music",
"title": "Music",
"category": "Media",
"keywords": [
"media",
"music"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/music.json",
"svg": [
"https://useanimations.com/icons/music/music.svg"
],
"zip": "https://useanimations.com/icons/music.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/music.json",
"react": {
"package": "react-useanimations",
"import": "import music from 'react-useanimations/lib/music';",
"export": "music"
},
"page": "https://useanimations.com/icons/music",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2033,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/music.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "play-pause",
"title": "Play/Pause",
"category": "Media",
"keywords": [
"media",
"pause",
"play",
"player"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/play-pause.json",
"svg": [
"https://useanimations.com/icons/play-pause/pause.svg",
"https://useanimations.com/icons/play-pause/play.svg"
],
"zip": "https://useanimations.com/icons/play-pause.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/play-pause.json",
"react": {
"package": "react-useanimations",
"import": "import playPause from 'react-useanimations/lib/playPause';",
"export": "playPause"
},
"page": "https://useanimations.com/icons/play-pause",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 1595,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/play-pause.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "play-pause-circle",
"title": "Play/Pause circle",
"category": "Media",
"keywords": [
"circle",
"media",
"pause",
"pause-circle",
"play",
"play-circle",
"player"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/play-pause-circle.json",
"svg": [
"https://useanimations.com/icons/play-pause-circle/pause-circle.svg",
"https://useanimations.com/icons/play-pause-circle/play-circle.svg"
],
"zip": "https://useanimations.com/icons/play-pause-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/play-pause-circle.json",
"react": {
"package": "react-useanimations",
"import": "import playPauseCircle from 'react-useanimations/lib/playPauseCircle';",
"export": "playPauseCircle"
},
"page": "https://useanimations.com/icons/play-pause-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 2071,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/play-pause-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "radio",
"title": "Radio",
"category": "Media",
"keywords": [
"media",
"radio"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/radio.json",
"svg": [
"https://useanimations.com/icons/radio/radio.svg"
],
"zip": "https://useanimations.com/icons/radio.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/radio.json",
"react": {
"package": "react-useanimations",
"import": "import radio from 'react-useanimations/lib/radio';",
"export": "radio"
},
"page": "https://useanimations.com/icons/radio",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3631,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/radio.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "repeat",
"title": "Repeat",
"category": "Media",
"keywords": [
"media",
"repeat"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/repeat.json",
"svg": [
"https://useanimations.com/icons/repeat/repeat.svg"
],
"zip": "https://useanimations.com/icons/repeat.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/repeat.json",
"react": {
"package": "react-useanimations",
"import": "import repeat from 'react-useanimations/lib/repeat';",
"export": "repeat"
},
"page": "https://useanimations.com/icons/repeat",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1310,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/repeat.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "rewind",
"title": "Rewind",
"category": "Media",
"keywords": [
"media",
"rewind"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/rewind.json",
"svg": [
"https://useanimations.com/icons/rewind/rewind.svg"
],
"zip": "https://useanimations.com/icons/rewind.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/rewind.json",
"react": {
"package": "react-useanimations",
"import": "import rewind from 'react-useanimations/lib/rewind';",
"export": "rewind"
},
"page": "https://useanimations.com/icons/rewind",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 2082,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/rewind.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "shuffle",
"title": "Shuffle",
"category": "Media",
"keywords": [
"media",
"shuffle"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/shuffle.json",
"svg": [
"https://useanimations.com/icons/shuffle/shuffle.svg"
],
"zip": "https://useanimations.com/icons/shuffle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/shuffle.json",
"react": {
"package": "react-useanimations",
"import": "import shuffle from 'react-useanimations/lib/shuffle';",
"export": "shuffle"
},
"page": "https://useanimations.com/icons/shuffle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2377,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/shuffle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "skip-back",
"title": "Skip back",
"category": "Media",
"keywords": [
"back",
"media",
"next",
"player",
"previous",
"skip",
"skip-back"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/skip-back.json",
"svg": [
"https://useanimations.com/icons/skip-back/skip-back.svg"
],
"zip": "https://useanimations.com/icons/skip-back.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/skip-back.json",
"react": {
"package": "react-useanimations",
"import": "import skipBack from 'react-useanimations/lib/skipBack';",
"export": "skipBack"
},
"page": "https://useanimations.com/icons/skip-back",
"width": 24,
"height": 24,
"fps": 30,
"durationMs": 2000,
"bytes": 6076,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/skip-back.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "skip-forward",
"title": "Skip forward",
"category": "Media",
"keywords": [
"forward",
"media",
"next",
"player",
"previous",
"skip",
"skip-forward"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/skip-forward.json",
"svg": [
"https://useanimations.com/icons/skip-forward/skip-forward.svg"
],
"zip": "https://useanimations.com/icons/skip-forward.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/skip-forward.json",
"react": {
"package": "react-useanimations",
"import": "import skipForward from 'react-useanimations/lib/skipForward';",
"export": "skipForward"
},
"page": "https://useanimations.com/icons/skip-forward",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 6075,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/skip-forward.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "speaker",
"title": "Speaker",
"category": "Media",
"keywords": [
"media",
"speaker"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/speaker.json",
"svg": [
"https://useanimations.com/icons/speaker/speaker.svg"
],
"zip": "https://useanimations.com/icons/speaker.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/speaker.json",
"react": {
"package": "react-useanimations",
"import": "import speaker from 'react-useanimations/lib/speaker';",
"export": "speaker"
},
"page": "https://useanimations.com/icons/speaker",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2762,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/speaker.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "stop-circle",
"title": "Stop Circle",
"category": "Media",
"keywords": [
"circle",
"media",
"stop",
"stop-circle"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/stop-circle.json",
"svg": [
"https://useanimations.com/icons/stop-circle/stop-circle.svg"
],
"zip": "https://useanimations.com/icons/stop-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/stop-circle.json",
"react": {
"package": "react-useanimations",
"import": "import stopCircle from 'react-useanimations/lib/stopCircle';",
"export": "stopCircle"
},
"page": "https://useanimations.com/icons/stop-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2179,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/stop-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "tv",
"title": "TV",
"category": "Media",
"keywords": [
"media",
"tv"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/tv.json",
"svg": [
"https://useanimations.com/icons/tv/tv.svg"
],
"zip": "https://useanimations.com/icons/tv.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/tv.json",
"react": {
"package": "react-useanimations",
"import": "import tv from 'react-useanimations/lib/tv';",
"export": "tv"
},
"page": "https://useanimations.com/icons/tv",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2072,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/tv.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "video",
"title": "Video",
"category": "Media",
"keywords": [
"camera",
"media",
"video",
"video call",
"video-off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/video.json",
"svg": [
"https://useanimations.com/icons/video/video-off.svg",
"https://useanimations.com/icons/video/video.svg"
],
"zip": "https://useanimations.com/icons/video.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/video.json",
"react": {
"package": "react-useanimations",
"import": "import video from 'react-useanimations/lib/video';",
"export": "video"
},
"page": "https://useanimations.com/icons/video",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 533,
"bytes": 2659,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/video.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "video-off",
"title": "Video Off",
"category": "Media",
"keywords": [
"camera",
"media",
"off",
"video",
"video call",
"video-off",
"video-off-off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/video-off.json",
"svg": [
"https://useanimations.com/icons/video-off/video-off-off.svg",
"https://useanimations.com/icons/video-off/video-off.svg"
],
"zip": "https://useanimations.com/icons/video-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/video-off.json",
"react": {
"package": "react-useanimations",
"import": "import videoOff from 'react-useanimations/lib/videoOff';",
"export": "videoOff"
},
"page": "https://useanimations.com/icons/video-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1748,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/video-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "video-v2",
"title": "Video V2",
"category": "Media",
"keywords": [
"camera",
"media",
"video",
"video call",
"video-off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/video-v2.json",
"svg": [
"https://useanimations.com/icons/video-v2/video-off.svg",
"https://useanimations.com/icons/video-v2/video.svg"
],
"zip": "https://useanimations.com/icons/video-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/video-v2.json",
"react": {
"package": "react-useanimations",
"import": "import video2 from 'react-useanimations/lib/video2';",
"export": "video2"
},
"page": "https://useanimations.com/icons/video-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 533,
"bytes": 2778,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/video-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "volume",
"title": "Volume",
"category": "Media",
"keywords": [
"audio",
"media",
"mute",
"sound",
"speaker",
"volume",
"volume-1",
"volume-2",
"volume-x"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/volume.json",
"svg": [
"https://useanimations.com/icons/volume/volume-1.svg",
"https://useanimations.com/icons/volume/volume-2.svg",
"https://useanimations.com/icons/volume/volume-x.svg",
"https://useanimations.com/icons/volume/volume.svg"
],
"zip": "https://useanimations.com/icons/volume.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/volume.json",
"react": {
"package": "react-useanimations",
"import": "import volume from 'react-useanimations/lib/volume';",
"export": "volume"
},
"page": "https://useanimations.com/icons/volume",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 4264,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/volume.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "align-center",
"title": "Align Center",
"category": "Text editing",
"keywords": [
"align",
"align-center",
"center",
"text editing"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/align-center.json",
"svg": [
"https://useanimations.com/icons/align-center/align-center.svg"
],
"zip": "https://useanimations.com/icons/align-center.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/align-center.json",
"react": {
"package": "react-useanimations",
"import": "import alignCenter from 'react-useanimations/lib/alignCenter';",
"export": "alignCenter"
},
"page": "https://useanimations.com/icons/align-center",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4385,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/align-center.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "align-justify",
"title": "Align Justify",
"category": "Text editing",
"keywords": [
"align",
"align-justify",
"justify",
"text editing"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/align-justify.json",
"svg": [
"https://useanimations.com/icons/align-justify/align-justify.svg"
],
"zip": "https://useanimations.com/icons/align-justify.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/align-justify.json",
"react": {
"package": "react-useanimations",
"import": "import alignJustify from 'react-useanimations/lib/alignJustify';",
"export": "alignJustify"
},
"page": "https://useanimations.com/icons/align-justify",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4378,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/align-justify.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "align-left",
"title": "Align Left",
"category": "Text editing",
"keywords": [
"align",
"align-left",
"left",
"text editing"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/align-left.json",
"svg": [
"https://useanimations.com/icons/align-left/align-left.svg"
],
"zip": "https://useanimations.com/icons/align-left.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/align-left.json",
"react": {
"package": "react-useanimations",
"import": "import alignLeft from 'react-useanimations/lib/alignLeft';",
"export": "alignLeft"
},
"page": "https://useanimations.com/icons/align-left",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4375,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/align-left.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "align-right",
"title": "Align Right",
"category": "Text editing",
"keywords": [
"align",
"align-right",
"right",
"text editing"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/align-right.json",
"svg": [
"https://useanimations.com/icons/align-right/align-right.svg"
],
"zip": "https://useanimations.com/icons/align-right.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/align-right.json",
"react": {
"package": "react-useanimations",
"import": "import alignRight from 'react-useanimations/lib/alignRight';",
"export": "alignRight"
},
"page": "https://useanimations.com/icons/align-right",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4376,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/align-right.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "bold",
"title": "Bold",
"category": "Text editing",
"keywords": [
"bold",
"text editing"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/bold.json",
"svg": [
"https://useanimations.com/icons/bold/bold.svg"
],
"zip": "https://useanimations.com/icons/bold.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/bold.json",
"react": {
"package": "react-useanimations",
"import": "import bold from 'react-useanimations/lib/bold';",
"export": "bold"
},
"page": "https://useanimations.com/icons/bold",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1320,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/bold.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "hash",
"title": "Hash",
"category": "Text editing",
"keywords": [
"hash",
"text editing"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/hash.json",
"svg": [
"https://useanimations.com/icons/hash/hash.svg"
],
"zip": "https://useanimations.com/icons/hash.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/hash.json",
"react": {
"package": "react-useanimations",
"import": "import hash from 'react-useanimations/lib/hash';",
"export": "hash"
},
"page": "https://useanimations.com/icons/hash",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1645,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/hash.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "italic",
"title": "Italic",
"category": "Text editing",
"keywords": [
"italic",
"text editing"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/italic.json",
"svg": [
"https://useanimations.com/icons/italic/italic.svg"
],
"zip": "https://useanimations.com/icons/italic.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/italic.json",
"react": {
"package": "react-useanimations",
"import": "import italic from 'react-useanimations/lib/italic';",
"export": "italic"
},
"page": "https://useanimations.com/icons/italic",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3131,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/italic.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "list",
"title": "List",
"category": "Text editing",
"keywords": [
"list",
"text editing"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/list.json",
"svg": [
"https://useanimations.com/icons/list/list.svg"
],
"zip": "https://useanimations.com/icons/list.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/list.json",
"react": {
"package": "react-useanimations",
"import": "import list from 'react-useanimations/lib/list';",
"export": "list"
},
"page": "https://useanimations.com/icons/list",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 5934,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/list.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "type",
"title": "Type",
"category": "Text editing",
"keywords": [
"text editing",
"type"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/type.json",
"svg": [
"https://useanimations.com/icons/type/type.svg"
],
"zip": "https://useanimations.com/icons/type.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/type.json",
"react": {
"package": "react-useanimations",
"import": "import type from 'react-useanimations/lib/type';",
"export": "type"
},
"page": "https://useanimations.com/icons/type",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1703,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/type.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "underline",
"title": "Underline",
"category": "Text editing",
"keywords": [
"text editing",
"underline"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/underline.json",
"svg": [
"https://useanimations.com/icons/underline/underline.svg"
],
"zip": "https://useanimations.com/icons/underline.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/underline.json",
"react": {
"package": "react-useanimations",
"import": "import underline from 'react-useanimations/lib/underline';",
"export": "underline"
},
"page": "https://useanimations.com/icons/underline",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2030,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/underline.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "at-sign",
"title": "At Sign",
"category": "Communication",
"keywords": [
"at",
"at-sign",
"communication",
"sign"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/at-sign.json",
"svg": [
"https://useanimations.com/icons/at-sign/at-sign.svg"
],
"zip": "https://useanimations.com/icons/at-sign.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/at-sign.json",
"react": {
"package": "react-useanimations",
"import": "import atSign from 'react-useanimations/lib/atSign';",
"export": "atSign"
},
"page": "https://useanimations.com/icons/at-sign",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2381,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/at-sign.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "message-circle",
"title": "Message Circle",
"category": "Communication",
"keywords": [
"circle",
"communication",
"message",
"message-circle"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/message-circle.json",
"svg": [
"https://useanimations.com/icons/message-circle/message-circle.svg"
],
"zip": "https://useanimations.com/icons/message-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/message-circle.json",
"react": {
"package": "react-useanimations",
"import": "import messageCircle from 'react-useanimations/lib/messageCircle';",
"export": "messageCircle"
},
"page": "https://useanimations.com/icons/message-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1681,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/message-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "message-square",
"title": "Message Square",
"category": "Communication",
"keywords": [
"communication",
"message",
"message-square",
"square"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/message-square.json",
"svg": [
"https://useanimations.com/icons/message-square/message-square.svg"
],
"zip": "https://useanimations.com/icons/message-square.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/message-square.json",
"react": {
"package": "react-useanimations",
"import": "import messageSquare from 'react-useanimations/lib/messageSquare';",
"export": "messageSquare"
},
"page": "https://useanimations.com/icons/message-square",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1502,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/message-square.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "phone",
"title": "Phone",
"category": "Communication",
"keywords": [
"communication",
"phone"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/phone.json",
"svg": [
"https://useanimations.com/icons/phone/phone.svg"
],
"zip": "https://useanimations.com/icons/phone.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/phone.json",
"react": {
"package": "react-useanimations",
"import": "import phone from 'react-useanimations/lib/phone';",
"export": "phone"
},
"page": "https://useanimations.com/icons/phone",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2136,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/phone.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "phone-call",
"title": "Phone Call",
"category": "Communication",
"keywords": [
"call",
"communication",
"phone",
"phone-call"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/phone-call.json",
"svg": [
"https://useanimations.com/icons/phone-call/phone-call.svg"
],
"zip": "https://useanimations.com/icons/phone-call.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/phone-call.json",
"react": {
"package": "react-useanimations",
"import": "import phoneCall from 'react-useanimations/lib/phoneCall';",
"export": "phoneCall"
},
"page": "https://useanimations.com/icons/phone-call",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4387,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/phone-call.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "phone-forwarded",
"title": "Phone Forwarded",
"category": "Communication",
"keywords": [
"communication",
"forwarded",
"phone",
"phone-forwarded"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/phone-forwarded.json",
"svg": [
"https://useanimations.com/icons/phone-forwarded/phone-forwarded.svg"
],
"zip": "https://useanimations.com/icons/phone-forwarded.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/phone-forwarded.json",
"react": {
"package": "react-useanimations",
"import": "import phoneForwarded from 'react-useanimations/lib/phoneForwarded';",
"export": "phoneForwarded"
},
"page": "https://useanimations.com/icons/phone-forwarded",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2769,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/phone-forwarded.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "phone-incoming",
"title": "Phone Incoming",
"category": "Communication",
"keywords": [
"communication",
"incoming",
"phone",
"phone-incoming"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/phone-incoming.json",
"svg": [
"https://useanimations.com/icons/phone-incoming/phone-incoming.svg"
],
"zip": "https://useanimations.com/icons/phone-incoming.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/phone-incoming.json",
"react": {
"package": "react-useanimations",
"import": "import phoneIncoming from 'react-useanimations/lib/phoneIncoming';",
"export": "phoneIncoming"
},
"page": "https://useanimations.com/icons/phone-incoming",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2768,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/phone-incoming.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "phone-missed",
"title": "Phone Missed",
"category": "Communication",
"keywords": [
"communication",
"missed",
"phone",
"phone-missed"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/phone-missed.json",
"svg": [
"https://useanimations.com/icons/phone-missed/phone-missed.svg"
],
"zip": "https://useanimations.com/icons/phone-missed.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/phone-missed.json",
"react": {
"package": "react-useanimations",
"import": "import phoneMissed from 'react-useanimations/lib/phoneMissed';",
"export": "phoneMissed"
},
"page": "https://useanimations.com/icons/phone-missed",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2980,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/phone-missed.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "phone-off",
"title": "Phone Off",
"category": "Communication",
"keywords": [
"communication",
"off",
"phone",
"phone-off",
"phone-off-off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/phone-off.json",
"svg": [
"https://useanimations.com/icons/phone-off/phone-off-off.svg",
"https://useanimations.com/icons/phone-off/phone-off.svg"
],
"zip": "https://useanimations.com/icons/phone-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/phone-off.json",
"react": {
"package": "react-useanimations",
"import": "import phoneOff from 'react-useanimations/lib/phoneOff';",
"export": "phoneOff"
},
"page": "https://useanimations.com/icons/phone-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 2132,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/phone-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "phone-outgoing",
"title": "Phone Outgoing",
"category": "Communication",
"keywords": [
"communication",
"outgoing",
"phone",
"phone-outgoing"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/phone-outgoing.json",
"svg": [
"https://useanimations.com/icons/phone-outgoing/phone-outgoing.svg"
],
"zip": "https://useanimations.com/icons/phone-outgoing.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/phone-outgoing.json",
"react": {
"package": "react-useanimations",
"import": "import phoneOutgoing from 'react-useanimations/lib/phoneOutgoing';",
"export": "phoneOutgoing"
},
"page": "https://useanimations.com/icons/phone-outgoing",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2768,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/phone-outgoing.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "rss",
"title": "RSS",
"category": "Communication",
"keywords": [
"communication",
"rss"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/rss.json",
"svg": [
"https://useanimations.com/icons/rss/rss.svg"
],
"zip": "https://useanimations.com/icons/rss.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/rss.json",
"react": {
"package": "react-useanimations",
"import": "import rss from 'react-useanimations/lib/rss';",
"export": "rss"
},
"page": "https://useanimations.com/icons/rss",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3259,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/rss.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "send",
"title": "Send",
"category": "Communication",
"keywords": [
"communication",
"send"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/send.json",
"svg": [
"https://useanimations.com/icons/send/send.svg"
],
"zip": "https://useanimations.com/icons/send.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/send.json",
"react": {
"package": "react-useanimations",
"import": "import send from 'react-useanimations/lib/send';",
"export": "send"
},
"page": "https://useanimations.com/icons/send",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1230,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/send.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "voicemail",
"title": "Voicemail",
"category": "Communication",
"keywords": [
"communication",
"voicemail"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/voicemail.json",
"svg": [
"https://useanimations.com/icons/voicemail/voicemail.svg"
],
"zip": "https://useanimations.com/icons/voicemail.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/voicemail.json",
"react": {
"package": "react-useanimations",
"import": "import voicemail from 'react-useanimations/lib/voicemail';",
"export": "voicemail"
},
"page": "https://useanimations.com/icons/voicemail",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2989,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/voicemail.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "battery",
"title": "Battery",
"category": "Devices",
"keywords": [
"battery",
"devices"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/battery.json",
"svg": [
"https://useanimations.com/icons/battery/battery.svg"
],
"zip": "https://useanimations.com/icons/battery.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/battery.json",
"react": {
"package": "react-useanimations",
"import": "import battery from 'react-useanimations/lib/battery';",
"export": "battery"
},
"page": "https://useanimations.com/icons/battery",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1467,
"bytes": 4960,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/battery.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "battery-charging",
"title": "Battery Charging",
"category": "Devices",
"keywords": [
"battery",
"battery-charging",
"charging",
"devices"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/battery-charging.json",
"svg": [
"https://useanimations.com/icons/battery-charging/battery-charging.svg"
],
"zip": "https://useanimations.com/icons/battery-charging.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/battery-charging.json",
"react": {
"package": "react-useanimations",
"import": "import batteryCharging from 'react-useanimations/lib/batteryCharging';",
"export": "batteryCharging"
},
"page": "https://useanimations.com/icons/battery-charging",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2620,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/battery-charging.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "bluetooth",
"title": "Bluetooth",
"category": "Devices",
"keywords": [
"bluetooth",
"devices"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/bluetooth.json",
"svg": [
"https://useanimations.com/icons/bluetooth/bluetooth.svg"
],
"zip": "https://useanimations.com/icons/bluetooth.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/bluetooth.json",
"react": {
"package": "react-useanimations",
"import": "import bluetooth from 'react-useanimations/lib/bluetooth';",
"export": "bluetooth"
},
"page": "https://useanimations.com/icons/bluetooth",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1175,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/bluetooth.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "cpu",
"title": "CPU",
"category": "Devices",
"keywords": [
"cpu",
"devices"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/cpu.json",
"svg": [
"https://useanimations.com/icons/cpu/cpu.svg"
],
"zip": "https://useanimations.com/icons/cpu.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cpu.json",
"react": {
"package": "react-useanimations",
"import": "import cpu from 'react-useanimations/lib/cpu';",
"export": "cpu"
},
"page": "https://useanimations.com/icons/cpu",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 5341,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/cpu.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "hard-drive",
"title": "Hard Drive",
"category": "Devices",
"keywords": [
"devices",
"drive",
"hard",
"hard-drive"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/hard-drive.json",
"svg": [
"https://useanimations.com/icons/hard-drive/hard-drive.svg"
],
"zip": "https://useanimations.com/icons/hard-drive.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/hard-drive.json",
"react": {
"package": "react-useanimations",
"import": "import hardDrive from 'react-useanimations/lib/hardDrive';",
"export": "hardDrive"
},
"page": "https://useanimations.com/icons/hard-drive",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2873,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/hard-drive.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "monitor",
"title": "Monitor",
"category": "Devices",
"keywords": [
"devices",
"monitor"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/monitor.json",
"svg": [
"https://useanimations.com/icons/monitor/monitor.svg"
],
"zip": "https://useanimations.com/icons/monitor.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/monitor.json",
"react": {
"package": "react-useanimations",
"import": "import monitor from 'react-useanimations/lib/monitor';",
"export": "monitor"
},
"page": "https://useanimations.com/icons/monitor",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2128,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/monitor.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "printer",
"title": "Printer",
"category": "Devices",
"keywords": [
"devices",
"printer"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/printer.json",
"svg": [
"https://useanimations.com/icons/printer/printer.svg"
],
"zip": "https://useanimations.com/icons/printer.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/printer.json",
"react": {
"package": "react-useanimations",
"import": "import printer from 'react-useanimations/lib/printer';",
"export": "printer"
},
"page": "https://useanimations.com/icons/printer",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2527,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/printer.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "smartphone",
"title": "Smartphone",
"category": "Devices",
"keywords": [
"devices",
"smartphone"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/smartphone.json",
"svg": [
"https://useanimations.com/icons/smartphone/smartphone.svg"
],
"zip": "https://useanimations.com/icons/smartphone.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/smartphone.json",
"react": {
"package": "react-useanimations",
"import": "import smartphone from 'react-useanimations/lib/smartphone';",
"export": "smartphone"
},
"page": "https://useanimations.com/icons/smartphone",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1756,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/smartphone.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "tablet",
"title": "Tablet",
"category": "Devices",
"keywords": [
"devices",
"tablet"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/tablet.json",
"svg": [
"https://useanimations.com/icons/tablet/tablet.svg"
],
"zip": "https://useanimations.com/icons/tablet.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/tablet.json",
"react": {
"package": "react-useanimations",
"import": "import tablet from 'react-useanimations/lib/tablet';",
"export": "tablet"
},
"page": "https://useanimations.com/icons/tablet",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1199,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/tablet.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "watch",
"title": "Watch",
"category": "Devices",
"keywords": [
"devices",
"watch"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/watch.json",
"svg": [
"https://useanimations.com/icons/watch/watch.svg"
],
"zip": "https://useanimations.com/icons/watch.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/watch.json",
"react": {
"package": "react-useanimations",
"import": "import watch from 'react-useanimations/lib/watch';",
"export": "watch"
},
"page": "https://useanimations.com/icons/watch",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2029,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/watch.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "wifi",
"title": "WiFi",
"category": "Devices",
"keywords": [
"devices",
"wifi"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/wifi.json",
"svg": [
"https://useanimations.com/icons/wifi/wifi.svg"
],
"zip": "https://useanimations.com/icons/wifi.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/wifi.json",
"react": {
"package": "react-useanimations",
"import": "import wifi from 'react-useanimations/lib/wifi';",
"export": "wifi"
},
"page": "https://useanimations.com/icons/wifi",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4365,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/wifi.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "wifi-off",
"title": "Wifi Off",
"category": "Devices",
"keywords": [
"devices",
"off",
"wifi",
"wifi-off",
"wifi-off-off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/wifi-off.json",
"svg": [
"https://useanimations.com/icons/wifi-off/wifi-off-off.svg",
"https://useanimations.com/icons/wifi-off/wifi-off.svg"
],
"zip": "https://useanimations.com/icons/wifi-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/wifi-off.json",
"react": {
"package": "react-useanimations",
"import": "import wifiOff from 'react-useanimations/lib/wifiOff';",
"export": "wifiOff"
},
"page": "https://useanimations.com/icons/wifi-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1860,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/wifi-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "cloud",
"title": "Cloud",
"category": "Weather",
"keywords": [
"cloud",
"weather"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/cloud.json",
"svg": [
"https://useanimations.com/icons/cloud/cloud.svg"
],
"zip": "https://useanimations.com/icons/cloud.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cloud.json",
"react": {
"package": "react-useanimations",
"import": "import cloud from 'react-useanimations/lib/cloud';",
"export": "cloud"
},
"page": "https://useanimations.com/icons/cloud",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1600,
"bytes": 1277,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/cloud.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "cloud-drizzle",
"title": "Cloud Drizzle",
"category": "Weather",
"keywords": [
"cloud",
"cloud-drizzle",
"drizzle",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/cloud-drizzle.json",
"svg": [
"https://useanimations.com/icons/cloud-drizzle/cloud-drizzle.svg"
],
"zip": "https://useanimations.com/icons/cloud-drizzle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cloud-drizzle.json",
"react": {
"package": "react-useanimations",
"import": "import cloudDrizzle from 'react-useanimations/lib/cloudDrizzle';",
"export": "cloudDrizzle"
},
"page": "https://useanimations.com/icons/cloud-drizzle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 7358,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/cloud-drizzle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "cloud-lightning",
"title": "Cloud Lightning",
"category": "Weather",
"keywords": [
"cloud",
"cloud-lightning",
"lightning",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/cloud-lightning.json",
"svg": [
"https://useanimations.com/icons/cloud-lightning/cloud-lightning.svg"
],
"zip": "https://useanimations.com/icons/cloud-lightning.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cloud-lightning.json",
"react": {
"package": "react-useanimations",
"import": "import cloudLightning from 'react-useanimations/lib/cloudLightning';",
"export": "cloudLightning"
},
"page": "https://useanimations.com/icons/cloud-lightning",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2425,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/cloud-lightning.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "cloud-off",
"title": "Cloud Off",
"category": "Weather",
"keywords": [
"cloud",
"cloud-off",
"cloud-off-off",
"off",
"weather"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/cloud-off.json",
"svg": [
"https://useanimations.com/icons/cloud-off/cloud-off-off.svg",
"https://useanimations.com/icons/cloud-off/cloud-off.svg"
],
"zip": "https://useanimations.com/icons/cloud-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cloud-off.json",
"react": {
"package": "react-useanimations",
"import": "import cloudOff from 'react-useanimations/lib/cloudOff';",
"export": "cloudOff"
},
"page": "https://useanimations.com/icons/cloud-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1669,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/cloud-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "cloud-rain",
"title": "Cloud Rain",
"category": "Weather",
"keywords": [
"cloud",
"cloud-rain",
"rain",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/cloud-rain.json",
"svg": [
"https://useanimations.com/icons/cloud-rain/cloud-rain.svg"
],
"zip": "https://useanimations.com/icons/cloud-rain.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cloud-rain.json",
"react": {
"package": "react-useanimations",
"import": "import cloudRain from 'react-useanimations/lib/cloudRain';",
"export": "cloudRain"
},
"page": "https://useanimations.com/icons/cloud-rain",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3839,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/cloud-rain.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "cloud-snow",
"title": "Cloud Snow",
"category": "Weather",
"keywords": [
"cloud",
"cloud-snow",
"snow",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/cloud-snow.json",
"svg": [
"https://useanimations.com/icons/cloud-snow/cloud-snow.svg"
],
"zip": "https://useanimations.com/icons/cloud-snow.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/cloud-snow.json",
"react": {
"package": "react-useanimations",
"import": "import cloudSnow from 'react-useanimations/lib/cloudSnow';",
"export": "cloudSnow"
},
"page": "https://useanimations.com/icons/cloud-snow",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1467,
"bytes": 7377,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/cloud-snow.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "droplet",
"title": "Droplet",
"category": "Weather",
"keywords": [
"droplet",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/droplet.json",
"svg": [
"https://useanimations.com/icons/droplet/droplet.svg"
],
"zip": "https://useanimations.com/icons/droplet.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/droplet.json",
"react": {
"package": "react-useanimations",
"import": "import droplet from 'react-useanimations/lib/droplet';",
"export": "droplet"
},
"page": "https://useanimations.com/icons/droplet",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1646,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/droplet.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "moon",
"title": "Moon",
"category": "Weather",
"keywords": [
"moon",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/moon.json",
"svg": [
"https://useanimations.com/icons/moon/moon.svg"
],
"zip": "https://useanimations.com/icons/moon.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/moon.json",
"react": {
"package": "react-useanimations",
"import": "import moon from 'react-useanimations/lib/moon';",
"export": "moon"
},
"page": "https://useanimations.com/icons/moon",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1520,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/moon.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "sun",
"title": "Sun",
"category": "Weather",
"keywords": [
"sun",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/sun.json",
"svg": [
"https://useanimations.com/icons/sun/sun.svg"
],
"zip": "https://useanimations.com/icons/sun.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/sun.json",
"react": {
"package": "react-useanimations",
"import": "import sun from 'react-useanimations/lib/sun';",
"export": "sun"
},
"page": "https://useanimations.com/icons/sun",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2671,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/sun.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "sunrise",
"title": "Sunrise",
"category": "Weather",
"keywords": [
"sunrise",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/sunrise.json",
"svg": [
"https://useanimations.com/icons/sunrise/sunrise.svg"
],
"zip": "https://useanimations.com/icons/sunrise.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/sunrise.json",
"react": {
"package": "react-useanimations",
"import": "import sunrise from 'react-useanimations/lib/sunrise';",
"export": "sunrise"
},
"page": "https://useanimations.com/icons/sunrise",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 3185,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/sunrise.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "sunset",
"title": "Sunset",
"category": "Weather",
"keywords": [
"sunset",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/sunset.json",
"svg": [
"https://useanimations.com/icons/sunset/sunset.svg"
],
"zip": "https://useanimations.com/icons/sunset.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/sunset.json",
"react": {
"package": "react-useanimations",
"import": "import sunset from 'react-useanimations/lib/sunset';",
"export": "sunset"
},
"page": "https://useanimations.com/icons/sunset",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 3184,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/sunset.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "thermometer",
"title": "Thermometer",
"category": "Weather",
"keywords": [
"thermometer",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/thermometer.json",
"svg": [
"https://useanimations.com/icons/thermometer/thermometer.svg"
],
"zip": "https://useanimations.com/icons/thermometer.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/thermometer.json",
"react": {
"package": "react-useanimations",
"import": "import thermometer from 'react-useanimations/lib/thermometer';",
"export": "thermometer"
},
"page": "https://useanimations.com/icons/thermometer",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1706,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/thermometer.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "umbrella",
"title": "Umbrella",
"category": "Weather",
"keywords": [
"umbrella",
"weather"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/umbrella.json",
"svg": [
"https://useanimations.com/icons/umbrella/umbrella.svg"
],
"zip": "https://useanimations.com/icons/umbrella.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/umbrella.json",
"react": {
"package": "react-useanimations",
"import": "import umbrella from 'react-useanimations/lib/umbrella';",
"export": "umbrella"
},
"page": "https://useanimations.com/icons/umbrella",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1753,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/umbrella.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "wind",
"title": "Wind",
"category": "Weather",
"keywords": [
"weather",
"wind"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/wind.json",
"svg": [
"https://useanimations.com/icons/wind/wind.svg"
],
"zip": "https://useanimations.com/icons/wind.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/wind.json",
"react": {
"package": "react-useanimations",
"import": "import wind from 'react-useanimations/lib/wind';",
"export": "wind"
},
"page": "https://useanimations.com/icons/wind",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3442,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/wind.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "zap",
"title": "Zap",
"category": "Weather",
"keywords": [
"weather",
"zap"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/zap.json",
"svg": [
"https://useanimations.com/icons/zap/zap.svg"
],
"zip": "https://useanimations.com/icons/zap.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/zap.json",
"react": {
"package": "react-useanimations",
"import": "import zap from 'react-useanimations/lib/zap';",
"export": "zap"
},
"page": "https://useanimations.com/icons/zap",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1624,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/zap.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "zap-off",
"title": "Zap Off",
"category": "Weather",
"keywords": [
"off",
"weather",
"zap",
"zap-off",
"zap-off-off"
],
"interaction": "click-toggle",
"lottie": "https://useanimations.com/icons/zap-off.json",
"svg": [
"https://useanimations.com/icons/zap-off/zap-off-off.svg",
"https://useanimations.com/icons/zap-off/zap-off.svg"
],
"zip": "https://useanimations.com/icons/zap-off.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/zap-off.json",
"react": {
"package": "react-useanimations",
"import": "import zapOff from 'react-useanimations/lib/zapOff';",
"export": "zapOff"
},
"page": "https://useanimations.com/icons/zap-off",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 1559,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/zap-off.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet isOn = true; // Frame 0 is on; the final frame is off.\nel.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });"
},
{
"id": "anchor",
"title": "Anchor",
"category": "Maps & location",
"keywords": [
"anchor",
"maps & location"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/anchor.json",
"svg": [
"https://useanimations.com/icons/anchor/anchor.svg"
],
"zip": "https://useanimations.com/icons/anchor.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/anchor.json",
"react": {
"package": "react-useanimations",
"import": "import anchor from 'react-useanimations/lib/anchor';",
"export": "anchor"
},
"page": "https://useanimations.com/icons/anchor",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1362,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/anchor.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "crosshair",
"title": "Crosshair",
"category": "Maps & location",
"keywords": [
"crosshair",
"maps & location"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/crosshair.json",
"svg": [
"https://useanimations.com/icons/crosshair/crosshair.svg"
],
"zip": "https://useanimations.com/icons/crosshair.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/crosshair.json",
"react": {
"package": "react-useanimations",
"import": "import crosshair from 'react-useanimations/lib/crosshair';",
"export": "crosshair"
},
"page": "https://useanimations.com/icons/crosshair",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1576,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/crosshair.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "globe",
"title": "Globe",
"category": "Maps & location",
"keywords": [
"globe",
"maps & location"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/globe.json",
"svg": [
"https://useanimations.com/icons/globe/globe.svg"
],
"zip": "https://useanimations.com/icons/globe.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/globe.json",
"react": {
"package": "react-useanimations",
"import": "import globe from 'react-useanimations/lib/globe';",
"export": "globe"
},
"page": "https://useanimations.com/icons/globe",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1912,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/globe.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "life-buoy",
"title": "Life Buoy",
"category": "Maps & location",
"keywords": [
"buoy",
"life",
"life-buoy",
"maps & location"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/life-buoy.json",
"svg": [
"https://useanimations.com/icons/life-buoy/life-buoy.svg"
],
"zip": "https://useanimations.com/icons/life-buoy.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/life-buoy.json",
"react": {
"package": "react-useanimations",
"import": "import lifeBuoy from 'react-useanimations/lib/lifeBuoy';",
"export": "lifeBuoy"
},
"page": "https://useanimations.com/icons/life-buoy",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2092,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/life-buoy.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "map",
"title": "Map",
"category": "Maps & location",
"keywords": [
"map",
"maps & location"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/map.json",
"svg": [
"https://useanimations.com/icons/map/map.svg"
],
"zip": "https://useanimations.com/icons/map.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/map.json",
"react": {
"package": "react-useanimations",
"import": "import map from 'react-useanimations/lib/map';",
"export": "map"
},
"page": "https://useanimations.com/icons/map",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1382,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/map.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "map-pin",
"title": "Map Pin",
"category": "Maps & location",
"keywords": [
"map",
"map-pin",
"maps & location",
"pin"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/map-pin.json",
"svg": [
"https://useanimations.com/icons/map-pin/map-pin.svg"
],
"zip": "https://useanimations.com/icons/map-pin.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/map-pin.json",
"react": {
"package": "react-useanimations",
"import": "import mapPin from 'react-useanimations/lib/mapPin';",
"export": "mapPin"
},
"page": "https://useanimations.com/icons/map-pin",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2012,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/map-pin.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "navigation",
"title": "Navigation",
"category": "Maps & location",
"keywords": [
"maps & location",
"navigation"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/navigation.json",
"svg": [
"https://useanimations.com/icons/navigation/navigation.svg"
],
"zip": "https://useanimations.com/icons/navigation.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/navigation.json",
"react": {
"package": "react-useanimations",
"import": "import navigation from 'react-useanimations/lib/navigation';",
"export": "navigation"
},
"page": "https://useanimations.com/icons/navigation",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1141,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/navigation.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "navigation-2",
"title": "Navigation 2",
"category": "Maps & location",
"keywords": [
"2",
"maps & location",
"navigation",
"navigation-2"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/navigation-2.json",
"svg": [
"https://useanimations.com/icons/navigation-2/navigation-2.svg"
],
"zip": "https://useanimations.com/icons/navigation-2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/navigation-2.json",
"react": {
"package": "react-useanimations",
"import": "import navigation2 from 'react-useanimations/lib/navigation2';",
"export": "navigation2"
},
"page": "https://useanimations.com/icons/navigation-2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1061,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/navigation-2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "target",
"title": "Target",
"category": "Maps & location",
"keywords": [
"maps & location",
"target"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/target.json",
"svg": [
"https://useanimations.com/icons/target/target.svg"
],
"zip": "https://useanimations.com/icons/target.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/target.json",
"react": {
"package": "react-useanimations",
"import": "import target from 'react-useanimations/lib/target';",
"export": "target"
},
"page": "https://useanimations.com/icons/target",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 3266,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/target.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "box",
"title": "Box",
"category": "Commerce",
"keywords": [
"box",
"commerce"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/box.json",
"svg": [
"https://useanimations.com/icons/box/box.svg"
],
"zip": "https://useanimations.com/icons/box.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/box.json",
"react": {
"package": "react-useanimations",
"import": "import box from 'react-useanimations/lib/box';",
"export": "box"
},
"page": "https://useanimations.com/icons/box",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2336,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/box.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "briefcase",
"title": "Briefcase",
"category": "Commerce",
"keywords": [
"briefcase",
"commerce"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/briefcase.json",
"svg": [
"https://useanimations.com/icons/briefcase/briefcase.svg"
],
"zip": "https://useanimations.com/icons/briefcase.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/briefcase.json",
"react": {
"package": "react-useanimations",
"import": "import briefcase from 'react-useanimations/lib/briefcase';",
"export": "briefcase"
},
"page": "https://useanimations.com/icons/briefcase",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2127,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/briefcase.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "credit-card",
"title": "Credit Card",
"category": "Commerce",
"keywords": [
"card",
"commerce",
"credit",
"credit-card"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/credit-card.json",
"svg": [
"https://useanimations.com/icons/credit-card/credit-card.svg"
],
"zip": "https://useanimations.com/icons/credit-card.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/credit-card.json",
"react": {
"package": "react-useanimations",
"import": "import creditCard from 'react-useanimations/lib/creditCard';",
"export": "creditCard"
},
"page": "https://useanimations.com/icons/credit-card",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1888,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/credit-card.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "dollar-sign",
"title": "Dollar Sign",
"category": "Commerce",
"keywords": [
"commerce",
"dollar",
"dollar-sign",
"sign"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/dollar-sign.json",
"svg": [
"https://useanimations.com/icons/dollar-sign/dollar-sign.svg"
],
"zip": "https://useanimations.com/icons/dollar-sign.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/dollar-sign.json",
"react": {
"package": "react-useanimations",
"import": "import dollarSign from 'react-useanimations/lib/dollarSign';",
"export": "dollarSign"
},
"page": "https://useanimations.com/icons/dollar-sign",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1347,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/dollar-sign.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "gift",
"title": "Gift",
"category": "Commerce",
"keywords": [
"commerce",
"gift"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/gift.json",
"svg": [
"https://useanimations.com/icons/gift/gift.svg"
],
"zip": "https://useanimations.com/icons/gift.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/gift.json",
"react": {
"package": "react-useanimations",
"import": "import gift from 'react-useanimations/lib/gift';",
"export": "gift"
},
"page": "https://useanimations.com/icons/gift",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3272,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/gift.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "package",
"title": "Package",
"category": "Commerce",
"keywords": [
"commerce",
"package"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/package.json",
"svg": [
"https://useanimations.com/icons/package/package.svg"
],
"zip": "https://useanimations.com/icons/package.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/package.json",
"react": {
"package": "react-useanimations",
"import": "import packageIcon from 'react-useanimations/lib/package';",
"export": "packageIcon"
},
"page": "https://useanimations.com/icons/package",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2445,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/package.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "percent",
"title": "Percent",
"category": "Commerce",
"keywords": [
"commerce",
"percent"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/percent.json",
"svg": [
"https://useanimations.com/icons/percent/percent.svg"
],
"zip": "https://useanimations.com/icons/percent.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/percent.json",
"react": {
"package": "react-useanimations",
"import": "import percent from 'react-useanimations/lib/percent';",
"export": "percent"
},
"page": "https://useanimations.com/icons/percent",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1243,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/percent.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "shopping-bag",
"title": "Shopping Bag",
"category": "Commerce",
"keywords": [
"bag",
"commerce",
"shopping",
"shopping-bag"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/shopping-bag.json",
"svg": [
"https://useanimations.com/icons/shopping-bag/shopping-bag.svg"
],
"zip": "https://useanimations.com/icons/shopping-bag.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/shopping-bag.json",
"react": {
"package": "react-useanimations",
"import": "import shoppingBag from 'react-useanimations/lib/shoppingBag';",
"export": "shoppingBag"
},
"page": "https://useanimations.com/icons/shopping-bag",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2150,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/shopping-bag.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "shopping-cart",
"title": "Shopping Cart",
"category": "Commerce",
"keywords": [
"cart",
"commerce",
"shopping",
"shopping-cart"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/shopping-cart.json",
"svg": [
"https://useanimations.com/icons/shopping-cart/shopping-cart.svg"
],
"zip": "https://useanimations.com/icons/shopping-cart.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/shopping-cart.json",
"react": {
"package": "react-useanimations",
"import": "import shoppingCart from 'react-useanimations/lib/shoppingCart';",
"export": "shoppingCart"
},
"page": "https://useanimations.com/icons/shopping-cart",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1860,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/shopping-cart.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "tag",
"title": "Tag",
"category": "Commerce",
"keywords": [
"commerce",
"tag"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/tag.json",
"svg": [
"https://useanimations.com/icons/tag/tag.svg"
],
"zip": "https://useanimations.com/icons/tag.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/tag.json",
"react": {
"package": "react-useanimations",
"import": "import tag from 'react-useanimations/lib/tag';",
"export": "tag"
},
"page": "https://useanimations.com/icons/tag",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1306,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/tag.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "truck",
"title": "Truck",
"category": "Commerce",
"keywords": [
"commerce",
"truck"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/truck.json",
"svg": [
"https://useanimations.com/icons/truck/truck.svg"
],
"zip": "https://useanimations.com/icons/truck.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/truck.json",
"react": {
"package": "react-useanimations",
"import": "import truck from 'react-useanimations/lib/truck';",
"export": "truck"
},
"page": "https://useanimations.com/icons/truck",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1799,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/truck.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "bar-chart",
"title": "Bar Chart",
"category": "Charts",
"keywords": [
"bar",
"bar-chart",
"chart",
"charts"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/bar-chart.json",
"svg": [
"https://useanimations.com/icons/bar-chart/bar-chart.svg"
],
"zip": "https://useanimations.com/icons/bar-chart.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/bar-chart.json",
"react": {
"package": "react-useanimations",
"import": "import barChart from 'react-useanimations/lib/barChart';",
"export": "barChart"
},
"page": "https://useanimations.com/icons/bar-chart",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3368,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/bar-chart.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "bar-chart-2",
"title": "Bar Chart 2",
"category": "Charts",
"keywords": [
"2",
"bar",
"bar-chart-2",
"chart",
"charts"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/bar-chart-2.json",
"svg": [
"https://useanimations.com/icons/bar-chart-2/bar-chart-2.svg"
],
"zip": "https://useanimations.com/icons/bar-chart-2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/bar-chart-2.json",
"react": {
"package": "react-useanimations",
"import": "import barChart2 from 'react-useanimations/lib/barChart2';",
"export": "barChart2"
},
"page": "https://useanimations.com/icons/bar-chart-2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3370,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/bar-chart-2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "pie-chart",
"title": "Pie Chart",
"category": "Charts",
"keywords": [
"chart",
"charts",
"pie",
"pie-chart"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/pie-chart.json",
"svg": [
"https://useanimations.com/icons/pie-chart/pie-chart.svg"
],
"zip": "https://useanimations.com/icons/pie-chart.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/pie-chart.json",
"react": {
"package": "react-useanimations",
"import": "import pieChart from 'react-useanimations/lib/pieChart';",
"export": "pieChart"
},
"page": "https://useanimations.com/icons/pie-chart",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1792,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/pie-chart.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "trending-down",
"title": "Trending Down",
"category": "Charts",
"keywords": [
"charts",
"down",
"trending",
"trending-down"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/trending-down.json",
"svg": [
"https://useanimations.com/icons/trending-down/trending-down.svg"
],
"zip": "https://useanimations.com/icons/trending-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/trending-down.json",
"react": {
"package": "react-useanimations",
"import": "import trendingDown from 'react-useanimations/lib/trendingDown';",
"export": "trendingDown"
},
"page": "https://useanimations.com/icons/trending-down",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1944,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/trending-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "trending-up",
"title": "Trending Up",
"category": "Charts",
"keywords": [
"charts",
"trending",
"trending-up",
"up"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/trending-up.json",
"svg": [
"https://useanimations.com/icons/trending-up/trending-up.svg"
],
"zip": "https://useanimations.com/icons/trending-up.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/trending-up.json",
"react": {
"package": "react-useanimations",
"import": "import trendingUp from 'react-useanimations/lib/trendingUp';",
"export": "trendingUp"
},
"page": "https://useanimations.com/icons/trending-up",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1940,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/trending-up.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "code",
"title": "Code",
"category": "Development",
"keywords": [
"code",
"development"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/code.json",
"svg": [
"https://useanimations.com/icons/code/code.svg"
],
"zip": "https://useanimations.com/icons/code.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/code.json",
"react": {
"package": "react-useanimations",
"import": "import code from 'react-useanimations/lib/code';",
"export": "code"
},
"page": "https://useanimations.com/icons/code",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2080,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/code.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "command",
"title": "Command",
"category": "Development",
"keywords": [
"command",
"development"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/command.json",
"svg": [
"https://useanimations.com/icons/command/command.svg"
],
"zip": "https://useanimations.com/icons/command.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/command.json",
"react": {
"package": "react-useanimations",
"import": "import command from 'react-useanimations/lib/command';",
"export": "command"
},
"page": "https://useanimations.com/icons/command",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1259,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/command.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "database",
"title": "Database",
"category": "Development",
"keywords": [
"database",
"development"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/database.json",
"svg": [
"https://useanimations.com/icons/database/database.svg"
],
"zip": "https://useanimations.com/icons/database.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/database.json",
"react": {
"package": "react-useanimations",
"import": "import database from 'react-useanimations/lib/database';",
"export": "database"
},
"page": "https://useanimations.com/icons/database",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2884,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/database.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "git-branch",
"title": "Git Branch",
"category": "Development",
"keywords": [
"branch",
"development",
"git",
"git-branch"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/git-branch.json",
"svg": [
"https://useanimations.com/icons/git-branch/git-branch.svg"
],
"zip": "https://useanimations.com/icons/git-branch.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/git-branch.json",
"react": {
"package": "react-useanimations",
"import": "import gitBranch from 'react-useanimations/lib/gitBranch';",
"export": "gitBranch"
},
"page": "https://useanimations.com/icons/git-branch",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3864,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/git-branch.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "git-commit",
"title": "Git Commit",
"category": "Development",
"keywords": [
"commit",
"development",
"git",
"git-commit"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/git-commit.json",
"svg": [
"https://useanimations.com/icons/git-commit/git-commit.svg"
],
"zip": "https://useanimations.com/icons/git-commit.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/git-commit.json",
"react": {
"package": "react-useanimations",
"import": "import gitCommit from 'react-useanimations/lib/gitCommit';",
"export": "gitCommit"
},
"page": "https://useanimations.com/icons/git-commit",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3138,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/git-commit.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "git-merge",
"title": "Git Merge",
"category": "Development",
"keywords": [
"development",
"git",
"git-merge",
"merge"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/git-merge.json",
"svg": [
"https://useanimations.com/icons/git-merge/git-merge.svg"
],
"zip": "https://useanimations.com/icons/git-merge.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/git-merge.json",
"react": {
"package": "react-useanimations",
"import": "import gitMerge from 'react-useanimations/lib/gitMerge';",
"export": "gitMerge"
},
"page": "https://useanimations.com/icons/git-merge",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1467,
"bytes": 3230,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/git-merge.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "git-pull-request",
"title": "Git Pull Request",
"category": "Development",
"keywords": [
"development",
"git",
"git-pull-request",
"pull",
"request"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/git-pull-request.json",
"svg": [
"https://useanimations.com/icons/git-pull-request/git-pull-request.svg"
],
"zip": "https://useanimations.com/icons/git-pull-request.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/git-pull-request.json",
"react": {
"package": "react-useanimations",
"import": "import gitPullRequest from 'react-useanimations/lib/gitPullRequest';",
"export": "gitPullRequest"
},
"page": "https://useanimations.com/icons/git-pull-request",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3910,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/git-pull-request.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "server",
"title": "Server",
"category": "Development",
"keywords": [
"development",
"server"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/server.json",
"svg": [
"https://useanimations.com/icons/server/server.svg"
],
"zip": "https://useanimations.com/icons/server.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/server.json",
"react": {
"package": "react-useanimations",
"import": "import server from 'react-useanimations/lib/server';",
"export": "server"
},
"page": "https://useanimations.com/icons/server",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3733,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/server.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "terminal",
"title": "Terminal",
"category": "Development",
"keywords": [
"development",
"terminal"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/terminal.json",
"svg": [
"https://useanimations.com/icons/terminal/terminal.svg"
],
"zip": "https://useanimations.com/icons/terminal.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/terminal.json",
"react": {
"package": "react-useanimations",
"import": "import terminal from 'react-useanimations/lib/terminal';",
"export": "terminal"
},
"page": "https://useanimations.com/icons/terminal",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1769,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/terminal.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "columns",
"title": "Columns",
"category": "Design & layout",
"keywords": [
"columns",
"design & layout"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/columns.json",
"svg": [
"https://useanimations.com/icons/columns/columns.svg"
],
"zip": "https://useanimations.com/icons/columns.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/columns.json",
"react": {
"package": "react-useanimations",
"import": "import columns from 'react-useanimations/lib/columns';",
"export": "columns"
},
"page": "https://useanimations.com/icons/columns",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1796,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/columns.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "crop",
"title": "Crop",
"category": "Design & layout",
"keywords": [
"crop",
"design & layout"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/crop.json",
"svg": [
"https://useanimations.com/icons/crop/crop.svg"
],
"zip": "https://useanimations.com/icons/crop.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/crop.json",
"react": {
"package": "react-useanimations",
"import": "import crop from 'react-useanimations/lib/crop';",
"export": "crop"
},
"page": "https://useanimations.com/icons/crop",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 2157,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/crop.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "grid",
"title": "Grid",
"category": "Design & layout",
"keywords": [
"design & layout",
"grid"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/grid.json",
"svg": [
"https://useanimations.com/icons/grid/grid.svg"
],
"zip": "https://useanimations.com/icons/grid.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/grid.json",
"react": {
"package": "react-useanimations",
"import": "import grid from 'react-useanimations/lib/grid';",
"export": "grid"
},
"page": "https://useanimations.com/icons/grid",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4203,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/grid.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "layers",
"title": "Layers",
"category": "Design & layout",
"keywords": [
"design & layout",
"layers"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/layers.json",
"svg": [
"https://useanimations.com/icons/layers/layers.svg"
],
"zip": "https://useanimations.com/icons/layers.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/layers.json",
"react": {
"package": "react-useanimations",
"import": "import layers from 'react-useanimations/lib/layers';",
"export": "layers"
},
"page": "https://useanimations.com/icons/layers",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3100,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/layers.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "layout",
"title": "Layout",
"category": "Design & layout",
"keywords": [
"design & layout",
"layout"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/layout.json",
"svg": [
"https://useanimations.com/icons/layout/layout.svg"
],
"zip": "https://useanimations.com/icons/layout.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/layout.json",
"react": {
"package": "react-useanimations",
"import": "import layout from 'react-useanimations/lib/layout';",
"export": "layout"
},
"page": "https://useanimations.com/icons/layout",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2751,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/layout.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "mouse-pointer",
"title": "Mouse Pointer",
"category": "Design & layout",
"keywords": [
"design & layout",
"mouse",
"mouse-pointer",
"pointer"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/mouse-pointer.json",
"svg": [
"https://useanimations.com/icons/mouse-pointer/mouse-pointer.svg"
],
"zip": "https://useanimations.com/icons/mouse-pointer.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/mouse-pointer.json",
"react": {
"package": "react-useanimations",
"import": "import mousePointer from 'react-useanimations/lib/mousePointer';",
"export": "mousePointer"
},
"page": "https://useanimations.com/icons/mouse-pointer",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1443,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/mouse-pointer.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "move",
"title": "Move",
"category": "Design & layout",
"keywords": [
"design & layout",
"move"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/move.json",
"svg": [
"https://useanimations.com/icons/move/move.svg"
],
"zip": "https://useanimations.com/icons/move.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/move.json",
"react": {
"package": "react-useanimations",
"import": "import move from 'react-useanimations/lib/move';",
"export": "move"
},
"page": "https://useanimations.com/icons/move",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 7309,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/move.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "pen-tool",
"title": "Pen Tool",
"category": "Design & layout",
"keywords": [
"design & layout",
"pen",
"pen-tool",
"tool"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/pen-tool.json",
"svg": [
"https://useanimations.com/icons/pen-tool/pen-tool.svg"
],
"zip": "https://useanimations.com/icons/pen-tool.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/pen-tool.json",
"react": {
"package": "react-useanimations",
"import": "import penTool from 'react-useanimations/lib/penTool';",
"export": "penTool"
},
"page": "https://useanimations.com/icons/pen-tool",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1490,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/pen-tool.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "scissors",
"title": "Scissors",
"category": "Design & layout",
"keywords": [
"design & layout",
"scissors"
],
"interaction": "click-replay",
"lottie": "https://useanimations.com/icons/scissors.json",
"svg": [
"https://useanimations.com/icons/scissors/scissors.svg"
],
"zip": "https://useanimations.com/icons/scissors.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/scissors.json",
"react": {
"package": "react-useanimations",
"import": "import scissors from 'react-useanimations/lib/scissors';",
"export": "scissors"
},
"page": "https://useanimations.com/icons/scissors",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2372,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/scissors.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('click', () => { if (!motion.matches) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "table",
"title": "Table",
"category": "Design & layout",
"keywords": [
"design & layout",
"table"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/table.json",
"svg": [
"https://useanimations.com/icons/table/table.svg"
],
"zip": "https://useanimations.com/icons/table.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/table.json",
"react": {
"package": "react-useanimations",
"import": "import table from 'react-useanimations/lib/table';",
"export": "table"
},
"page": "https://useanimations.com/icons/table",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1267,
"bytes": 2775,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/table.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "circle",
"title": "Circle",
"category": "Shapes & math",
"keywords": [
"circle",
"shapes & math"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/circle.json",
"svg": [
"https://useanimations.com/icons/circle/circle.svg"
],
"zip": "https://useanimations.com/icons/circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/circle.json",
"react": {
"package": "react-useanimations",
"import": "import circle from 'react-useanimations/lib/circle';",
"export": "circle"
},
"page": "https://useanimations.com/icons/circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1152,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "divide",
"title": "Divide",
"category": "Shapes & math",
"keywords": [
"divide",
"shapes & math"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/divide.json",
"svg": [
"https://useanimations.com/icons/divide/divide.svg"
],
"zip": "https://useanimations.com/icons/divide.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/divide.json",
"react": {
"package": "react-useanimations",
"import": "import divide from 'react-useanimations/lib/divide';",
"export": "divide"
},
"page": "https://useanimations.com/icons/divide",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 3073,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/divide.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "divide-circle",
"title": "Divide Circle",
"category": "Shapes & math",
"keywords": [
"circle",
"divide",
"divide-circle",
"shapes & math"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/divide-circle.json",
"svg": [
"https://useanimations.com/icons/divide-circle/divide-circle.svg"
],
"zip": "https://useanimations.com/icons/divide-circle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/divide-circle.json",
"react": {
"package": "react-useanimations",
"import": "import divideCircle from 'react-useanimations/lib/divideCircle';",
"export": "divideCircle"
},
"page": "https://useanimations.com/icons/divide-circle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 3577,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/divide-circle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "divide-square",
"title": "Divide Square",
"category": "Shapes & math",
"keywords": [
"divide",
"divide-square",
"shapes & math",
"square"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/divide-square.json",
"svg": [
"https://useanimations.com/icons/divide-square/divide-square.svg"
],
"zip": "https://useanimations.com/icons/divide-square.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/divide-square.json",
"react": {
"package": "react-useanimations",
"import": "import divideSquare from 'react-useanimations/lib/divideSquare';",
"export": "divideSquare"
},
"page": "https://useanimations.com/icons/divide-square",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 3651,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/divide-square.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "hexagon",
"title": "Hexagon",
"category": "Shapes & math",
"keywords": [
"hexagon",
"shapes & math"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/hexagon.json",
"svg": [
"https://useanimations.com/icons/hexagon/hexagon.svg"
],
"zip": "https://useanimations.com/icons/hexagon.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/hexagon.json",
"react": {
"package": "react-useanimations",
"import": "import hexagon from 'react-useanimations/lib/hexagon';",
"export": "hexagon"
},
"page": "https://useanimations.com/icons/hexagon",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1207,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/hexagon.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "octagon",
"title": "Octagon",
"category": "Shapes & math",
"keywords": [
"octagon",
"shapes & math"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/octagon.json",
"svg": [
"https://useanimations.com/icons/octagon/octagon.svg"
],
"zip": "https://useanimations.com/icons/octagon.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/octagon.json",
"react": {
"package": "react-useanimations",
"import": "import octagon from 'react-useanimations/lib/octagon';",
"export": "octagon"
},
"page": "https://useanimations.com/icons/octagon",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1025,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/octagon.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "square",
"title": "Square",
"category": "Shapes & math",
"keywords": [
"shapes & math",
"square"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/square.json",
"svg": [
"https://useanimations.com/icons/square/square.svg"
],
"zip": "https://useanimations.com/icons/square.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/square.json",
"react": {
"package": "react-useanimations",
"import": "import square from 'react-useanimations/lib/square';",
"export": "square"
},
"page": "https://useanimations.com/icons/square",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1034,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/square.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "triangle",
"title": "Triangle",
"category": "Shapes & math",
"keywords": [
"shapes & math",
"triangle"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/triangle.json",
"svg": [
"https://useanimations.com/icons/triangle/triangle.svg"
],
"zip": "https://useanimations.com/icons/triangle.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/triangle.json",
"react": {
"package": "react-useanimations",
"import": "import triangle from 'react-useanimations/lib/triangle';",
"export": "triangle"
},
"page": "https://useanimations.com/icons/triangle",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1133,
"bytes": 1358,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/triangle.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "infinity",
"title": "Infinity",
"category": "Loading",
"keywords": [
"infinity",
"loader",
"loading",
"loop",
"spinner"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/infinity.json",
"svg": [
"https://useanimations.com/icons/infinity/infinity.svg"
],
"zip": "https://useanimations.com/icons/infinity.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/infinity.json",
"react": {
"package": "react-useanimations",
"import": "import infinity from 'react-useanimations/lib/infinity';",
"export": "infinity"
},
"page": "https://useanimations.com/icons/infinity",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 4000,
"bytes": 2126,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/infinity.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "loading",
"title": "Loading circular",
"category": "Loading",
"keywords": [
"circular",
"loader",
"loading",
"progress",
"spinner"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/loading.json",
"svg": [],
"zip": "https://useanimations.com/icons/loading.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/loading.json",
"react": {
"package": "react-useanimations",
"import": "import loading from 'react-useanimations/lib/loading';",
"export": "loading"
},
"page": "https://useanimations.com/icons/loading",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 5000,
"bytes": 4349,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/loading.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "loading-v2",
"title": "Loading V2",
"category": "Loading",
"keywords": [
"loader",
"loading",
"progress",
"spinner"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/loading-v2.json",
"svg": [],
"zip": "https://useanimations.com/icons/loading-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/loading-v2.json",
"react": {
"package": "react-useanimations",
"import": "import loading2 from 'react-useanimations/lib/loading2';",
"export": "loading2"
},
"page": "https://useanimations.com/icons/loading-v2",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1533,
"bytes": 12152,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/loading-v2.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "loading-v3",
"title": "Loading V3",
"category": "Loading",
"keywords": [
"loader",
"loading",
"progress",
"spinner"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/loading-v3.json",
"svg": [],
"zip": "https://useanimations.com/icons/loading-v3.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/loading-v3.json",
"react": {
"package": "react-useanimations",
"import": "import loading3 from 'react-useanimations/lib/loading3';",
"export": "loading3"
},
"page": "https://useanimations.com/icons/loading-v3",
"width": 32,
"height": 32,
"fps": 24.0010070800781,
"durationMs": 2000,
"bytes": 3328,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/loading-v3.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "loading-v4",
"title": "Loading V4",
"category": "Loading",
"keywords": [
"loader",
"loading",
"loadingv4",
"progress",
"spinner"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/loading-v4.json",
"svg": [
"https://useanimations.com/icons/loading-v4/loadingv4.svg"
],
"zip": "https://useanimations.com/icons/loading-v4.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/loading-v4.json",
"react": {
"package": "react-useanimations",
"import": "import loading4 from 'react-useanimations/lib/loading4';",
"export": "loading4"
},
"page": "https://useanimations.com/icons/loading-v4",
"width": 32,
"height": 32,
"fps": 25,
"durationMs": 2880,
"bytes": 7425,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/loading-v4.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "behance",
"title": "Behance",
"category": "Social media",
"keywords": [
"behance",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/behance.json",
"svg": [
"https://useanimations.com/icons/behance/behance.svg"
],
"zip": "https://useanimations.com/icons/behance.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/behance.json",
"react": {
"package": "react-useanimations",
"import": "import behance from 'react-useanimations/lib/behance';",
"export": "behance"
},
"page": "https://useanimations.com/icons/behance",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 2693,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/behance.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "chrome",
"title": "Chrome",
"category": "Social media",
"keywords": [
"chrome",
"social media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/chrome.json",
"svg": [
"https://useanimations.com/icons/chrome/chrome.svg"
],
"zip": "https://useanimations.com/icons/chrome.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/chrome.json",
"react": {
"package": "react-useanimations",
"import": "import chrome from 'react-useanimations/lib/chrome';",
"export": "chrome"
},
"page": "https://useanimations.com/icons/chrome",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1918,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chrome.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "codepen",
"title": "Codepen",
"category": "Social media",
"keywords": [
"codepen",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/codepen.json",
"svg": [
"https://useanimations.com/icons/codepen/codepen.svg"
],
"zip": "https://useanimations.com/icons/codepen.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/codepen.json",
"react": {
"package": "react-useanimations",
"import": "import codepen from 'react-useanimations/lib/codepen';",
"export": "codepen"
},
"page": "https://useanimations.com/icons/codepen",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1667,
"bytes": 4476,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/codepen.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "codesandbox",
"title": "Codesandbox",
"category": "Social media",
"keywords": [
"codesandbox",
"social media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/codesandbox.json",
"svg": [
"https://useanimations.com/icons/codesandbox/codesandbox.svg"
],
"zip": "https://useanimations.com/icons/codesandbox.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/codesandbox.json",
"react": {
"package": "react-useanimations",
"import": "import codesandbox from 'react-useanimations/lib/codesandbox';",
"export": "codesandbox"
},
"page": "https://useanimations.com/icons/codesandbox",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2725,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/codesandbox.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "discord",
"title": "Discord",
"category": "Social media",
"keywords": [
"chat",
"community",
"discord",
"gaming",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/discord.json",
"svg": [
"https://useanimations.com/icons/discord/discord.svg"
],
"zip": "https://useanimations.com/icons/discord.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/discord.json",
"react": {
"package": "react-useanimations",
"import": "import discord from 'react-useanimations/lib/discord';",
"export": "discord"
},
"page": "https://useanimations.com/icons/discord",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1600,
"bytes": 3976,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/discord.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "dribbble",
"title": "Dribbble",
"category": "Social media",
"keywords": [
"dribbble",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/dribbble.json",
"svg": [
"https://useanimations.com/icons/dribbble/dribbble.svg"
],
"zip": "https://useanimations.com/icons/dribbble.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/dribbble.json",
"react": {
"package": "react-useanimations",
"import": "import dribbble from 'react-useanimations/lib/dribbble';",
"export": "dribbble"
},
"page": "https://useanimations.com/icons/dribbble",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 8785,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/dribbble.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "facebook",
"title": "Facebook",
"category": "Social media",
"keywords": [
"facebook",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/facebook.json",
"svg": [
"https://useanimations.com/icons/facebook/facebook.svg"
],
"zip": "https://useanimations.com/icons/facebook.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/facebook.json",
"react": {
"package": "react-useanimations",
"import": "import facebook from 'react-useanimations/lib/facebook';",
"export": "facebook"
},
"page": "https://useanimations.com/icons/facebook",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 1347,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/facebook.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "figma",
"title": "Figma",
"category": "Social media",
"keywords": [
"figma",
"social media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/figma.json",
"svg": [
"https://useanimations.com/icons/figma/figma.svg"
],
"zip": "https://useanimations.com/icons/figma.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/figma.json",
"react": {
"package": "react-useanimations",
"import": "import figma from 'react-useanimations/lib/figma';",
"export": "figma"
},
"page": "https://useanimations.com/icons/figma",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 5451,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/figma.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "framer",
"title": "Framer",
"category": "Social media",
"keywords": [
"framer",
"social media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/framer.json",
"svg": [
"https://useanimations.com/icons/framer/framer.svg"
],
"zip": "https://useanimations.com/icons/framer.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/framer.json",
"react": {
"package": "react-useanimations",
"import": "import framer from 'react-useanimations/lib/framer';",
"export": "framer"
},
"page": "https://useanimations.com/icons/framer",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2092,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/framer.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "github",
"title": "Github",
"category": "Social media",
"keywords": [
"github",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/github.json",
"svg": [
"https://useanimations.com/icons/github/github.svg"
],
"zip": "https://useanimations.com/icons/github.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/github.json",
"react": {
"package": "react-useanimations",
"import": "import github from 'react-useanimations/lib/github';",
"export": "github"
},
"page": "https://useanimations.com/icons/github",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 3258,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/github.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "gitlab",
"title": "GitLab",
"category": "Social media",
"keywords": [
"gitlab",
"social media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/gitlab.json",
"svg": [
"https://useanimations.com/icons/gitlab/gitlab.svg"
],
"zip": "https://useanimations.com/icons/gitlab.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/gitlab.json",
"react": {
"package": "react-useanimations",
"import": "import gitlab from 'react-useanimations/lib/gitlab';",
"export": "gitlab"
},
"page": "https://useanimations.com/icons/gitlab",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 1861,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/gitlab.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "instagram",
"title": "Instagram",
"category": "Social media",
"keywords": [
"instagram",
"social media"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/instagram.json",
"svg": [
"https://useanimations.com/icons/instagram/instagram.svg"
],
"zip": "https://useanimations.com/icons/instagram.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/instagram.json",
"react": {
"package": "react-useanimations",
"import": "import instagram from 'react-useanimations/lib/instagram';",
"export": "instagram"
},
"page": "https://useanimations.com/icons/instagram",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 5647,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/instagram.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "linkedin",
"title": "Linkedin",
"category": "Social media",
"keywords": [
"linkedin",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/linkedin.json",
"svg": [
"https://useanimations.com/icons/linkedin/linkedin.svg"
],
"zip": "https://useanimations.com/icons/linkedin.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/linkedin.json",
"react": {
"package": "react-useanimations",
"import": "import linkedin from 'react-useanimations/lib/linkedin';",
"export": "linkedin"
},
"page": "https://useanimations.com/icons/linkedin",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 433,
"bytes": 2425,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/linkedin.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "pocket",
"title": "Pocket",
"category": "Social media",
"keywords": [
"pocket",
"social media"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/pocket.json",
"svg": [
"https://useanimations.com/icons/pocket/pocket.svg"
],
"zip": "https://useanimations.com/icons/pocket.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/pocket.json",
"react": {
"package": "react-useanimations",
"import": "import pocket from 'react-useanimations/lib/pocket';",
"export": "pocket"
},
"page": "https://useanimations.com/icons/pocket",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 1882,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/pocket.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "slack",
"title": "Slack",
"category": "Social media",
"keywords": [
"slack",
"social media"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/slack.json",
"svg": [
"https://useanimations.com/icons/slack/slack.svg"
],
"zip": "https://useanimations.com/icons/slack.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/slack.json",
"react": {
"package": "react-useanimations",
"import": "import slack from 'react-useanimations/lib/slack';",
"export": "slack"
},
"page": "https://useanimations.com/icons/slack",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1200,
"bytes": 2373,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/slack.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "telegram",
"title": "Telegram",
"category": "Social media",
"keywords": [
"chat",
"messenger",
"paper plane",
"social media",
"telegram"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/telegram.json",
"svg": [
"https://useanimations.com/icons/telegram/telegram.svg"
],
"zip": "https://useanimations.com/icons/telegram.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/telegram.json",
"react": {
"package": "react-useanimations",
"import": "import telegram from 'react-useanimations/lib/telegram';",
"export": "telegram"
},
"page": "https://useanimations.com/icons/telegram",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1177,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/telegram.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "trello",
"title": "Trello",
"category": "Social media",
"keywords": [
"social media",
"trello"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/trello.json",
"svg": [
"https://useanimations.com/icons/trello/trello.svg"
],
"zip": "https://useanimations.com/icons/trello.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/trello.json",
"react": {
"package": "react-useanimations",
"import": "import trello from 'react-useanimations/lib/trello';",
"export": "trello"
},
"page": "https://useanimations.com/icons/trello",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3038,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/trello.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "twitch",
"title": "Twitch",
"category": "Social media",
"keywords": [
"social media",
"twitch"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/twitch.json",
"svg": [
"https://useanimations.com/icons/twitch/twitch.svg"
],
"zip": "https://useanimations.com/icons/twitch.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/twitch.json",
"react": {
"package": "react-useanimations",
"import": "import twitch from 'react-useanimations/lib/twitch';",
"export": "twitch"
},
"page": "https://useanimations.com/icons/twitch",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2261,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/twitch.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "twitter",
"title": "Twitter",
"category": "Social media",
"keywords": [
"social media",
"twitter"
],
"interaction": "hover-loop",
"lottie": "https://useanimations.com/icons/twitter.json",
"svg": [
"https://useanimations.com/icons/twitter/twitter.svg"
],
"zip": "https://useanimations.com/icons/twitter.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/twitter.json",
"react": {
"package": "react-useanimations",
"import": "import twitter from 'react-useanimations/lib/twitter';",
"export": "twitter"
},
"page": "https://useanimations.com/icons/twitter",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 4000,
"bytes": 8664,
"requiresFullPlayer": true,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/twitter.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nlet stopAfterCycle = false;\na.addEventListener('loopComplete', () => { if (stopAfterCycle) { stopAfterCycle = false; a.goToAndStop(0, true); } });\nel.addEventListener('mouseenter', () => { stopAfterCycle = false; if (!motion.matches) a.play(); });\nel.addEventListener('mouseleave', () => { stopAfterCycle = !motion.matches && !a.isPaused; if (!stopAfterCycle) a.goToAndStop(0, true); });"
},
{
"id": "twitter-x",
"title": "Twitter X",
"category": "Social media",
"keywords": [
"social media",
"twitter",
"twitter-x",
"x"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/twitter-x.json",
"svg": [
"https://useanimations.com/icons/twitter-x/twitter-x.svg"
],
"zip": "https://useanimations.com/icons/twitter-x.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/twitter-x.json",
"react": {
"package": "react-useanimations",
"import": "import twitterX from 'react-useanimations/lib/twitterX';",
"export": "twitterX"
},
"page": "https://useanimations.com/icons/twitter-x",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3653,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/twitter-x.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "youtube",
"title": "YouTube",
"category": "Social media",
"keywords": [
"social media",
"youtube"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/youtube.json",
"svg": [
"https://useanimations.com/icons/youtube/youtube.svg"
],
"zip": "https://useanimations.com/icons/youtube.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/youtube.json",
"react": {
"package": "react-useanimations",
"import": "import youtube from 'react-useanimations/lib/youtube';",
"export": "youtube"
},
"page": "https://useanimations.com/icons/youtube",
"width": 32,
"height": 32,
"fps": 30.0003051757812,
"durationMs": 1000,
"bytes": 8227,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/youtube.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "youtube-v2",
"title": "YouTube V2",
"category": "Social media",
"keywords": [
"social media",
"youtube",
"youtube-2"
],
"interaction": "hover",
"lottie": "https://useanimations.com/icons/youtube-v2.json",
"svg": [
"https://useanimations.com/icons/youtube-v2/youtube-2.svg"
],
"zip": "https://useanimations.com/icons/youtube-v2.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/youtube-v2.json",
"react": {
"package": "react-useanimations",
"import": "import youtube2 from 'react-useanimations/lib/youtube2';",
"export": "youtube2"
},
"page": "https://useanimations.com/icons/youtube-v2",
"width": 32,
"height": 32,
"fps": 30.0003051757812,
"durationMs": 1000,
"bytes": 14827,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/youtube-v2.json' });\nel.addEventListener('mouseenter', () => { a.setDirection(1); a.play(); });\nel.addEventListener('mouseleave', () => { a.setDirection(-1); a.play(); });"
},
{
"id": "activity",
"title": "Activity",
"category": "Other",
"keywords": [
"activity",
"other"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/activity.json",
"svg": [
"https://useanimations.com/icons/activity/activity.svg"
],
"zip": "https://useanimations.com/icons/activity.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/activity.json",
"react": {
"package": "react-useanimations",
"import": "import activity from 'react-useanimations/lib/activity';",
"export": "activity"
},
"page": "https://useanimations.com/icons/activity",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1759,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/activity.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "arrow-down",
"title": "Arrow down",
"category": "Other",
"keywords": [
"arrow",
"arrow-down",
"direction",
"down",
"navigation",
"other"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/arrow-down.json",
"svg": [
"https://useanimations.com/icons/arrow-down/arrow-down.svg"
],
"zip": "https://useanimations.com/icons/arrow-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-down.json",
"react": {
"package": "react-useanimations",
"import": "import arrowDown from 'react-useanimations/lib/arrowDown';",
"export": "arrowDown"
},
"page": "https://useanimations.com/icons/arrow-down",
"width": 32,
"height": 32,
"fps": 60,
"durationMs": 3000,
"bytes": 1692,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/arrow-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "arrow-up",
"title": "Arrow up",
"category": "Other",
"keywords": [
"arrow",
"arrow-up",
"direction",
"navigation",
"other",
"up"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/arrow-up.json",
"svg": [
"https://useanimations.com/icons/arrow-up/arrow-up.svg"
],
"zip": "https://useanimations.com/icons/arrow-up.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/arrow-up.json",
"react": {
"package": "react-useanimations",
"import": "import arrowUp from 'react-useanimations/lib/arrowUp';",
"export": "arrowUp"
},
"page": "https://useanimations.com/icons/arrow-up",
"width": 32,
"height": 32,
"fps": 60,
"durationMs": 3000,
"bytes": 1692,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/arrow-up.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "clock",
"title": "Clock",
"category": "Other",
"keywords": [
"clock",
"other"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/clock.json",
"svg": [
"https://useanimations.com/icons/clock/clock.svg"
],
"zip": "https://useanimations.com/icons/clock.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/clock.json",
"react": {
"package": "react-useanimations",
"import": "import clock from 'react-useanimations/lib/clock';",
"export": "clock"
},
"page": "https://useanimations.com/icons/clock",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2315,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/clock.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "coffee",
"title": "Coffee",
"category": "Other",
"keywords": [
"coffee",
"other"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/coffee.json",
"svg": [
"https://useanimations.com/icons/coffee/coffee.svg"
],
"zip": "https://useanimations.com/icons/coffee.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/coffee.json",
"react": {
"package": "react-useanimations",
"import": "import coffee from 'react-useanimations/lib/coffee';",
"export": "coffee"
},
"page": "https://useanimations.com/icons/coffee",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1467,
"bytes": 4172,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/coffee.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "frown",
"title": "Frown",
"category": "Other",
"keywords": [
"frown",
"other"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/frown.json",
"svg": [
"https://useanimations.com/icons/frown/frown.svg"
],
"zip": "https://useanimations.com/icons/frown.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/frown.json",
"react": {
"package": "react-useanimations",
"import": "import frown from 'react-useanimations/lib/frown';",
"export": "frown"
},
"page": "https://useanimations.com/icons/frown",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 4948,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/frown.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "meh",
"title": "Meh",
"category": "Other",
"keywords": [
"meh",
"other"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/meh.json",
"svg": [
"https://useanimations.com/icons/meh/meh.svg"
],
"zip": "https://useanimations.com/icons/meh.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/meh.json",
"react": {
"package": "react-useanimations",
"import": "import meh from 'react-useanimations/lib/meh';",
"export": "meh"
},
"page": "https://useanimations.com/icons/meh",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3953,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/meh.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "scroll-down",
"title": "Scroll down",
"category": "Other",
"keywords": [
"down",
"indicator",
"mouse",
"other",
"scroll",
"scrolldown"
],
"interaction": "loop",
"lottie": "https://useanimations.com/icons/scroll-down.json",
"svg": [
"https://useanimations.com/icons/scroll-down/scrolldown.svg"
],
"zip": "https://useanimations.com/icons/scroll-down.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/scroll-down.json",
"react": {
"package": "react-useanimations",
"import": "import scrollDown from 'react-useanimations/lib/scrollDown';",
"export": "scrollDown"
},
"page": "https://useanimations.com/icons/scroll-down",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 3000,
"bytes": 1801,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/scroll-down.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\na.addEventListener('DOMLoaded', () => { a.goToAndStop(0, true); if (!motion.matches) a.play(); });\nmotion.addEventListener('change', (event) => { if (event.matches) a.goToAndStop(0, true); else a.play(); });"
},
{
"id": "smile",
"title": "Smile",
"category": "Other",
"keywords": [
"other",
"smile"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/smile.json",
"svg": [
"https://useanimations.com/icons/smile/smile.svg"
],
"zip": "https://useanimations.com/icons/smile.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/smile.json",
"react": {
"package": "react-useanimations",
"import": "import smile from 'react-useanimations/lib/smile';",
"export": "smile"
},
"page": "https://useanimations.com/icons/smile",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 3603,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/smile.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
},
{
"id": "tool",
"title": "Tool",
"category": "Other",
"keywords": [
"other",
"tool"
],
"interaction": "hover-replay",
"lottie": "https://useanimations.com/icons/tool.json",
"svg": [
"https://useanimations.com/icons/tool/tool.svg"
],
"zip": "https://useanimations.com/icons/tool.zip",
"shadcn": "npx shadcn@latest add https://useanimations.com/r/tool.json",
"react": {
"package": "react-useanimations",
"import": "import tool from 'react-useanimations/lib/tool';",
"export": "tool"
},
"page": "https://useanimations.com/icons/tool",
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 1404,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/tool.json' });\nconst motion = matchMedia('(prefers-reduced-motion: reduce)');\nel.addEventListener('mouseenter', () => { if (!motion.matches && a.isPaused) a.playSegments([0, a.totalFrames], true); });"
}
]
}