{
"name": "useAnimations",
"description": "Free library of animated Lottie icons (Feather style, 24/32 px artboards) for web, React, iOS and Android. Every icon has a direct Lottie JSON URL that can be used as-is.",
"homepage": "https://useanimations.com/",
"documentation": "https://useanimations.com/documentation.md",
"updated": "2026-10-06",
"license": {
"name": "CC BY 4.0",
"url": "https://creativecommons.org/licenses/by/4.0/",
"terms": "https://useanimations.com/licencing-and-terms",
"attribution": "Required. Example: Animated icons by useAnimations",
"restrictions": "Do not redistribute or resell the files themselves (e.g. in icon packs, templates or UI kits)."
},
"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": ""
},
"ios": "https://github.com/airbnb/lottie-ios",
"android": "https://github.com/airbnb/lottie-android"
},
"interactions": {
"loop": "Plays continuously (loop: true, autoplay: true).",
"click-toggle": "Toggles between two states on click: play forward, then backward on the next click.",
"click-replay": "Replays once from the start on every click.",
"hover": "Plays forward on mouseenter and backward on mouseleave.",
"hover-loop": "Loops while hovered and stops on mouseleave."
},
"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.",
"react": "Import for react-useanimations, or null if the icon isn't in the React package yet.",
"snippet": "Ready-to-use lottie-web code for the icon's intended interaction; `el` is the container element."
},
"count": 87,
"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",
"react": {
"package": "react-useanimations",
"import": "import alertCircle from 'react-useanimations/lib/alertCircle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 3736,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/alert-circle.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import alertOctagon from 'react-useanimations/lib/alertOctagon';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 3896,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/alert-octagon.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import alertTriangle from 'react-useanimations/lib/alertTriangle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 4413,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/alert-triangle.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import error from 'react-useanimations/lib/error';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 1774,
"requiresFullPlayer": true,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/error.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import notification from 'react-useanimations/lib/notification';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 3507,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/notification.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import notification2 from 'react-useanimations/lib/notification2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 5894,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/notification-v2.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": null,
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 2002,
"bytes": 5213,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/notification-v3.json' });"
},
{
"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",
"react": null,
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 2002,
"bytes": 3214,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/notification-v4.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import menu from 'react-useanimations/lib/menu';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 4038,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import menu2 from 'react-useanimations/lib/menu2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 3282,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu-v2.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import menu3 from 'react-useanimations/lib/menu3';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 3962,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu-v3.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import menu4 from 'react-useanimations/lib/menu4';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 700,
"bytes": 3522,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu-v4.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import arrowLeftCircle from 'react-useanimations/lib/arrowLeftCircle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 4113,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-left-circle.json' });\nel.addEventListener('click', () => 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",
"react": {
"package": "react-useanimations",
"import": "import arrowUpCircle from 'react-useanimations/lib/arrowUpCircle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 4110,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-up-circle.json' });\nel.addEventListener('click', () => 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",
"react": {
"package": "react-useanimations",
"import": "import arrowRightCircle from 'react-useanimations/lib/arrowRightCircle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 4117,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-right-circle.json' });\nel.addEventListener('click', () => a.playSegments([0, a.totalFrames], true));"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import arrowDownCircle from 'react-useanimations/lib/arrowDownCircle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 4115,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/arrow-down-circle.json' });\nel.addEventListener('click', () => a.playSegments([0, a.totalFrames], true));"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import settings from 'react-useanimations/lib/settings';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1667,
"bytes": 4175,
"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",
"react": {
"package": "react-useanimations",
"import": "import settings2 from 'react-useanimations/lib/settings2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 9332,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/settings-v2.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import lock from 'react-useanimations/lib/lock';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 2403,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/lock.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import visibility from 'react-useanimations/lib/visibility';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 4092,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/visibility.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import visibility2 from 'react-useanimations/lib/visibility2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 4218,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/visibility-v2.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": null,
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 567,
"bytes": 8643,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/visibility-v3.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import heart from 'react-useanimations/lib/heart';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 3102,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/heart.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import maximizeMinimize from 'react-useanimations/lib/maximizeMinimize';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 4424,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/maximize-minimize.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import maximizeMinimize2 from 'react-useanimations/lib/maximizeMinimize2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 4652,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/maximize-minimize-v2.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import bookmark from 'react-useanimations/lib/bookmark';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 2578,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/bookmark.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import star from 'react-useanimations/lib/star';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 2726,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/star.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import plusToX from 'react-useanimations/lib/plusToX';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 1907,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/plus-to-x.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import trash from 'react-useanimations/lib/trash';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 3246,
"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",
"react": {
"package": "react-useanimations",
"import": "import trash2 from 'react-useanimations/lib/trash2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 4944,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import searchToX from 'react-useanimations/lib/searchToX';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 4691,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/search-to-x.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import download from 'react-useanimations/lib/download';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 4000,
"bytes": 9221,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/download.json' });\nel.addEventListener('click', () => a.playSegments([0, a.totalFrames], true));"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import calendar from 'react-useanimations/lib/calendar';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 4864,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import edit from 'react-useanimations/lib/edit';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 3078,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import thumbUp from 'react-useanimations/lib/thumbUp';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 733,
"bytes": 7648,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/thumb-up.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import explore from 'react-useanimations/lib/explore';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 2039,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import info from 'react-useanimations/lib/info';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 3628,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import help from 'react-useanimations/lib/help';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 3854,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/help.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import checkmark from 'react-useanimations/lib/checkmark';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 1424,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/checkmark.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import home from 'react-useanimations/lib/home';"
},
"width": 32,
"height": 32,
"fps": 60,
"durationMs": 517,
"bytes": 2780,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import folder from 'react-useanimations/lib/folder';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 2876,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import zoomIn from 'react-useanimations/lib/zoomIn';"
},
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 6229,
"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",
"react": {
"package": "react-useanimations",
"import": "import zoomOut from 'react-useanimations/lib/zoomOut';"
},
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 4294,
"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": "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",
"react": null,
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 2773,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevron-left.json' });\nel.addEventListener('click', () => 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",
"react": null,
"width": 32,
"height": 32,
"fps": 29.9700012207031,
"durationMs": 1001,
"bytes": 3095,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/chevron-right.json' });\nel.addEventListener('click', () => 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",
"react": null,
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 2088,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/refresh.json' });\nel.addEventListener('click', () => a.playSegments([0, a.totalFrames], true));"
},
{
"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",
"react": null,
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 20980,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/filter.json' });\nel.addEventListener('click', () => a.playSegments([0, a.totalFrames], true));"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import archive from 'react-useanimations/lib/archive';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 5950,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import mail from 'react-useanimations/lib/mail';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 667,
"bytes": 5775,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import copy from 'react-useanimations/lib/copy';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 167,
"bytes": 2640,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import userX from 'react-useanimations/lib/userX';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 4462,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import userMinus from 'react-useanimations/lib/userMinus';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 3438,
"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",
"react": {
"package": "react-useanimations",
"import": "import userPlus from 'react-useanimations/lib/userPlus';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 4440,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import share from 'react-useanimations/lib/share';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2500,
"bytes": 11160,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import checkBox from 'react-useanimations/lib/checkBox';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 2697,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/check-box.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import radioButton from 'react-useanimations/lib/radioButton';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 2719,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/radio-button.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import toggle from 'react-useanimations/lib/toggle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 500,
"bytes": 2021,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/toggle.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import airplay from 'react-useanimations/lib/airplay';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 3415,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/airplay.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import volume from 'react-useanimations/lib/volume';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 6358,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/volume.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import microphone from 'react-useanimations/lib/microphone';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 5543,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/microphone.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import microphone2 from 'react-useanimations/lib/microphone2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 833,
"bytes": 5666,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/microphone-v2.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import video from 'react-useanimations/lib/video';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 533,
"bytes": 4181,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/video.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import video2 from 'react-useanimations/lib/video2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 533,
"bytes": 4300,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/video-v2.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import playPauseCircle from 'react-useanimations/lib/playPauseCircle';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 3166,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/play-pause-circle.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import playPause from 'react-useanimations/lib/playPause';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 267,
"bytes": 2255,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/play-pause.json' });\nlet dir = 1;\nel.addEventListener('click', () => { a.setDirection(dir); a.play(); dir = -dir; });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import skipBack from 'react-useanimations/lib/skipBack';"
},
"width": 24,
"height": 24,
"fps": 30,
"durationMs": 2000,
"bytes": 7187,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/skip-back.json' });\nel.addEventListener('click', () => 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",
"react": {
"package": "react-useanimations",
"import": "import skipForward from 'react-useanimations/lib/skipForward';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 7186,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/skip-forward.json' });\nel.addEventListener('click', () => a.playSegments([0, a.totalFrames], true));"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import loading from 'react-useanimations/lib/loading';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 5000,
"bytes": 6111,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/loading.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import loading2 from 'react-useanimations/lib/loading2';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1533,
"bytes": 17362,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/loading-v2.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import loading3 from 'react-useanimations/lib/loading3';"
},
"width": 32,
"height": 32,
"fps": 24.0010070800781,
"durationMs": 2000,
"bytes": 4920,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/loading-v3.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import infinity from 'react-useanimations/lib/infinity';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 4000,
"bytes": 2870,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/infinity.json' });"
},
{
"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",
"react": null,
"width": 32,
"height": 32,
"fps": 25,
"durationMs": 2880,
"bytes": 10524,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/loading-v4.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import facebook from 'react-useanimations/lib/facebook';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 1788,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/facebook.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import github from 'react-useanimations/lib/github';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 3889,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/github.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import twitter from 'react-useanimations/lib/twitter';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 4000,
"bytes": 9075,
"requiresFullPlayer": true,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/twitter.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import instagram from 'react-useanimations/lib/instagram';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 333,
"bytes": 7636,
"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",
"react": {
"package": "react-useanimations",
"import": "import linkedin from 'react-useanimations/lib/linkedin';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 433,
"bytes": 3353,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/linkedin.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import pocket from 'react-useanimations/lib/pocket';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1000,
"bytes": 2520,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/pocket.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import codepen from 'react-useanimations/lib/codepen';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1667,
"bytes": 6283,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/codepen.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import youtube from 'react-useanimations/lib/youtube';"
},
"width": 32,
"height": 32,
"fps": 30.0003051757812,
"durationMs": 1000,
"bytes": 9254,
"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",
"react": {
"package": "react-useanimations",
"import": "import youtube2 from 'react-useanimations/lib/youtube2';"
},
"width": 32,
"height": 32,
"fps": 30.0003051757812,
"durationMs": 1000,
"bytes": 16235,
"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": "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",
"react": {
"package": "react-useanimations",
"import": "import dribbble from 'react-useanimations/lib/dribbble';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 2000,
"bytes": 11749,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/dribbble.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import behance from 'react-useanimations/lib/behance';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1500,
"bytes": 3621,
"requiresFullPlayer": false,
"snippet": "const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: false, path: 'https://useanimations.com/icons/behance.json' });\nel.addEventListener('mouseenter', () => a.play());\nel.addEventListener('mouseleave', () => a.stop());"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import activity from 'react-useanimations/lib/activity';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 1333,
"bytes": 2583,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/activity.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import arrowDown from 'react-useanimations/lib/arrowDown';"
},
"width": 32,
"height": 32,
"fps": 60,
"durationMs": 3000,
"bytes": 2521,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/arrow-down.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import arrowUp from 'react-useanimations/lib/arrowUp';"
},
"width": 32,
"height": 32,
"fps": 60,
"durationMs": 3000,
"bytes": 2519,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/arrow-up.json' });"
},
{
"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",
"react": {
"package": "react-useanimations",
"import": "import scrollDown from 'react-useanimations/lib/scrollDown';"
},
"width": 32,
"height": 32,
"fps": 30,
"durationMs": 3000,
"bytes": 2534,
"requiresFullPlayer": false,
"snippet": "lottie.loadAnimation({ container: el, renderer: 'svg', loop: true, autoplay: true, path: 'https://useanimations.com/icons/scroll-down.json' });"
}
]
}