본문으로 건너뛰기
KO

아이콘 10개 · MIT 라이선스

디자인·레이아웃 애니메이션 아이콘

편집기와 빌더를 위한 그리드, 열, 레이어, 자르기, 펜 도구, 커서 아이콘입니다. 콘텐츠를 배치하거나, 그리드 보기와 표 보기를 전환하거나, 그리기 도구를 고르는 툴바에 어울립니다.

아이콘 10개 중 3개는 클릭할 때마다 다시 재생되고, 7개는 호버하면 한 번 재생됩니다. 각 아이콘은 React 컴포넌트, shadcn/ui 컴포넌트, Lottie JSON 애니메이션으로 제공되며, MIT 라이선스로 상업용 프로젝트에도 무료로 쓸 수 있습니다. 모든 아이콘에 정적 SVG도 있습니다.

디자인·레이아웃 아이콘 전체

이런 곳에 쓰세요

  • 그리드·목록·표 보기 전환
  • 디자인·슬라이드 도구의 레이어 패널
  • 이미지 편집기의 자르기·잘라내기 도구
  • 페이지 빌더와 레이아웃 선택기
  • 드래그해서 옮기는 핸들

인터랙션별

  • 클릭 애니메이션 아이콘 · 3

    클릭할 때마다 처음부터 한 번 재생됩니다. 동작 줄이기가 설정되어 있으면 재생되지 않습니다. Crop, Mouse Pointer, Scissors.

  • 호버 재생 애니메이션 아이콘 · 7

    mouseenter에서 한 번 재생됩니다(동작 줄이기가 설정되어 있으면 재생되지 않음). 포인터가 벗어나도 멈추지 않고, 재생 중에 다시 들어와도 처음부터 다시 시작하지 않습니다. Columns, Grid, Layers, Layout, Move, Pen Tool, Table.

앱에 추가하기

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

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import layers from 'react-useanimations/lib/layers';

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

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

npx shadcn@latest add https://useanimations.com/r/layers.json
import { AnimatedLayers } from '@/components/animations/layers';

<AnimatedLayers size={24} />

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

자주 묻는 질문

어떤 디자인·레이아웃 애니메이션 아이콘이 들어 있나요?

아이콘 10개: Columns, Crop, Grid, Layers, Layout, Mouse Pointer, Move, Pen Tool, Scissors 및 Table. 모두 MIT 라이선스로 개인·상업용 프로젝트에 무료로 쓸 수 있고, 출처 표기도 필요 없습니다.

이 디자인·레이아웃 애니메이션 아이콘을 React에서 어떻게 쓰나요?

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

이 디자인·레이아웃 애니메이션 아이콘을 React 없이 쓸 수 있나요?

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