본문으로 건너뛰기
KO
v3아이콘 300개 · 의존성 0 · MIT→

살아 움직이는 아이콘.

React, shadcn/ui, Lottie용 무료 애니메이션 아이콘

호버, 클릭, 루프 마이크로 인터랙션이 내장된, 직접 디자인한 마이크로 애니메이션 300개. React 컴포넌트로 쓰거나, shadcn으로 추가하거나, SVG와 Lottie JSON으로 내려받으세요. MIT 라이선스입니다.

아이콘 둘러보기

포인터를 아이콘 위로 움직여 보세요.

애니메이션 아이콘
300
애니메이션 아이콘
내장 인터랙션
6
내장 인터랙션
플레이어 크기(gzip)
8 kB
플레이어 크기(gzip)
의존성
0
의존성

내장 인터랙션

모든 아이콘이 움직이는 법을 압니다.

각 아이콘에는 디자인할 때 정한 인터랙션이 들어 있습니다. 넣기만 하면 바로 동작하고, prop 하나로 다른 인터랙션을 고를 수도 있습니다. 직접 해 보세요.

라이브러리

무료 애니메이션 아이콘 300개

호버하거나 클릭하면 재생됩니다. 아이콘을 열면 코드와 다운로드 파일(Lottie JSON, SVG, ZIP)을 볼 수 있습니다.

아이콘 300개

경고

알림

내비게이션

액션

콘텐츠

폼

미디어

텍스트 편집

커뮤니케이션

기기

날씨

지도·위치

커머스

차트

개발

디자인·레이아웃

도형·수학

로딩

소셜 미디어

기타

원하는 방식으로

설치하고, 가져오면 끝.

의존성 없는 React 컴포넌트, shadcn 레지스트리, 고정 URL로 내려받는 파일, 그리고 AI 에이전트가 읽을 수 있는 카탈로그를 제공합니다.

문서 읽기 →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

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

가볍고, 접근성 있고, 스타일은 마음대로.

내 색상을 따라갑니다

아이콘은 currentColor를 사용하므로 텍스트 색상, 호버 상태, 다크 모드를 알아서 따라갑니다. prop, 클래스, 일반 CSS로 덮어쓸 수 있습니다.

작게 설계했습니다

8 kB

내장 플레이어, 의존성 0. 아이콘 하나하나가 2 kB짜리 개별 모듈입니다.

기본으로 접근성 지원

동작 줄이기 설정을 존중하고, 키보드 포커스에도 호버 애니메이션을 재생하며, 레이블을 지정하지 않으면 스크린 리더에 노출되지 않습니다.

서버 렌더링 지원

Next.js, Remix, Astro에서 안전하게 렌더링되는 클라이언트 컴포넌트입니다. 아이콘은 어디서든 가져올 수 있는 순수 데이터입니다.

에이전트를 위한 설계

모든 아이콘의 키워드가 담긴 타입 있는 카탈로그, icons.json, llms.txt, 마크다운 문서를 제공합니다.

알맞은 마이크로 애니메이션 찾기

자주 묻는 질문

마이크로 애니메이션과 애니메이션 아이콘이란 무엇인가요?

마이크로 애니메이션은 사용자 동작에 반응하는 짧고 목적이 하나인 움직임입니다. 닫기 버튼으로 바뀌는 메뉴 아이콘, 게시물에 좋아요를 누르면 채워지는 하트, 새 알림이 오면 울리는 벨 같은 것들이죠. 애니메이션 아이콘은 그중 가장 흔한 형태입니다. 인터페이스가 즉각 반응하는 느낌을 주고, 추가 텍스트 없이도 상태 변화를 보여 줍니다.

Lottie 파일과 SVG 파일은 무엇이 다른가요?

Lottie JSON 파일에는 애니메이션 전체가 들어 있어서 react-useanimations에 내장된 플레이어를 비롯해 어떤 Lottie 플레이어로도 재생할 수 있습니다. SVG 파일은 정지 상태의 아이콘 이미지로, 상태마다 하나씩(예: eye와 eye-off) 있습니다. 이메일, 문서, 디자인 도구, JavaScript를 쓸 수 없는 환경의 대체 이미지처럼 움직임이 없어야 하는 곳에 쓰세요.

Next.js와 서버 렌더링에서도 동작하나요?

네. 컴포넌트에 'use client'가 지정되어 있고 애니메이션은 브라우저에서만 그리므로, 동적 import 없이 서버 컴포넌트와 Next.js, Remix, Astro 같은 SSR 프레임워크에서 렌더링할 수 있습니다. 아이콘 모듈은 순수 데이터라서 서버 컴포넌트에서 가져와 props로 넘길 수 있습니다. Next.js와 서버 렌더링 →

상업용 프로젝트에 아이콘을 써도 되나요?

네. 아이콘과 react-useanimations 패키지는 MIT 라이선스이므로 개인·상업용 작업에서 사용, 수정, 재배포할 수 있습니다. 출처 표기는 해 주시면 감사하지만 필수는 아닙니다. 라이선스 및 이용 약관 →

React 없이도 아이콘을 쓸 수 있나요?

네. 모든 아이콘은 표준 Lottie JSON 파일이라서 순수 JavaScript, Vue, Svelte, Angular, CMS에서는 lottie-web으로, iOS, Android, Flutter에서는 각 플랫폼의 Lottie 플레이어로 재생할 수 있습니다. Lottie 아이콘 페이지에 파일 URL과 인터랙션별 lottie-web 예제 코드가 있습니다. Lottie 아이콘 →

아이콘을 쓰면 번들 크기가 얼마나 늘어나나요?

react-useanimations 3.1.1의 플레이어는 의존성 없이 gzip 기준 약 8 kB이고, 아이콘은 하나하나가 1~15 kB(중앙값 2 kB)의 개별 모듈이므로 번들에는 가져온 아이콘만 포함됩니다.

인터페이스에 생동감을 더하세요.

무료이고 MIT 라이선스입니다. 개인·상업용 작업 모두에 쓸 수 있습니다.

시작하기