아이콘 34개 · MIT 라이선스

내비게이션·화살표 애니메이션 아이콘

닫기 버튼으로 바뀌는 햄버거 메뉴, 그리고 호버하면 가리키는 방향으로 살짝 움직이는 화살표, 셰브론, 모서리 화살표입니다. 드로어 열기, 뒤로 가기, 행 펼치기, 사이트 나가기처럼 컨트롤이 어디로 이어지는지 분명하게 보여 줍니다.

아이콘 34개 중 2개는 계속 반복 재생되고, 4개는 클릭하면 두 상태 사이를 전환하고, 6개는 클릭할 때마다 다시 재생되고, 22개는 호버하면 한 번 재생됩니다. 각 아이콘은 React 컴포넌트, shadcn/ui 컴포넌트, Lottie JSON 애니메이션으로 제공되며, MIT 라이선스로 상업용 프로젝트에도 무료로 쓸 수 있습니다. 모든 아이콘에 정적 SVG도 있습니다.

이런 곳에 쓰세요

모바일에서 닫기 버튼으로 바뀌는 햄버거 메뉴
캐러셀과 페이지네이션의 이전·다음 버튼
아코디언과 드롭다운의 셰브론
맨 위로 가기, 아래로 스크롤 안내
로그인·로그아웃 링크
외부 링크 표시와 사이드바 토글

인터랙션별

루프 애니메이션 아이콘 · 2
계속 재생됩니다. 동작 줄이기가 설정되어 있으면 정지된 첫 프레임에 머뭅니다. More Horizontal, More Vertical.
클릭 토글 애니메이션 아이콘 · 4
클릭하면 두 상태 사이를 전환합니다. 동작 줄이기가 설정되어 있으면 즉시 전환됩니다. Burger Menu, Menu V2, Menu V3, Menu V4.
클릭 애니메이션 아이콘 · 6
클릭할 때마다 처음부터 한 번 재생됩니다. 동작 줄이기가 설정되어 있으면 재생되지 않습니다. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.
호버 재생 애니메이션 아이콘 · 22
mouseenter에서 한 번 재생됩니다(동작 줄이기가 설정되어 있으면 재생되지 않음). 포인터가 벗어나도 멈추지 않고, 재생 중에 다시 들어와도 처음부터 다시 시작하지 않습니다. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

앱에 추가하기

React에서는 react-useanimations를 설치하고 아이콘을 가져오면 됩니다. 아이콘은 별도 설정 없이 클릭 토글 인터랙션으로 재생됩니다. 이 카테고리의 다른 아이콘도 사용법이 같으니 menu만 각 아이콘 페이지에 있는 이름으로 바꾸세요.

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

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

shadcn/ui에서는 CLI가 바로 쓸 수 있는 컴포넌트를 추가해 줍니다.

npx shadcn@latest add https://useanimations.com/r/menu.json

import { AnimatedMenu } from '@/components/animations/menu';

<AnimatedMenu size={24} />

React를 쓰지 않나요? 각 아이콘은 /icons/<id>.json에 있는 Lottie JSON 파일입니다. 웹, iOS, Android, Flutter 플레이어는 Lottie 아이콘 페이지를 참고하세요.

자주 묻는 질문

어떤 내비게이션·화살표 애니메이션 아이콘이 들어 있나요?

아이콘 34개: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down 외 22개. 모두 MIT 라이선스로 개인·상업용 프로젝트에 무료로 쓸 수 있고, 출처 표기도 필요 없습니다.

이 내비게이션·화살표 애니메이션 아이콘을 React에서 어떻게 쓰나요?

react-useanimations를 설치하고 import 문(import menu from 'react-useanimations/lib/menu')을 추가한 뒤 <UseAnimations animation={menu} size={32} />를 렌더링하세요. 아이콘은 클릭 토글 인터랙션으로 재생되고 텍스트 색상을 따라갑니다. shadcn/ui를 쓴다면 대신 npx shadcn@latest add https://useanimations.com/r/menu.json 명령을 실행하세요.

이 내비게이션·화살표 애니메이션 아이콘을 React 없이 쓸 수 있나요?

네. 각 아이콘은 https://useanimations.com/icons/<id>.json에 있는 Lottie JSON 파일(예: https://useanimations.com/icons/menu.json)이라 lottie-web, lottie-ios, lottie-android, Flutter의 lottie 패키지로 재생할 수 있습니다. 정적 SVG는 각 아이콘 페이지(영어)에서 받을 수 있습니다. 익스프레션을 쓰는 아이콘이 없으므로 lottie-web의 light 빌드로 충분합니다.

내비게이션 아이콘 전체

이런 곳에 쓰세요

인터랙션별

앱에 추가하기

자주 묻는 질문