빠르게 시작하기

작은 움직임을 더하는 세 단계.

01 / 아이콘 찾기

아이콘 모음 둘러보기. 이름이나 태그로 검색하고 카테고리, 출처, 모션으로 범위를 좁히세요. 컬렉션 미리보기는 언제든 정지할 수 있습니다.

02 / 원하는 모습으로 편집하기

아이콘을 열어 색상, 크기, 선 두께, 재생 시간, 지연, 속도 변화, 반복 횟수, 방향과 강도를 조절하세요. 재생, 정지, 다시 재생이나 위치 슬라이더로 결과를 확인할 수 있습니다. 마지막 설정은 브라우저에 저장되며 계정 없이 설정이 포함된 링크를 공유할 수 있습니다.

03 / 프로젝트에 가져가기

SVG 복사를 눌러 HTML에 붙여넣거나 .svg 다운로드로 독립된 파일을 받으세요. 파일에 애니메이션 스타일이 포함되어 JavaScript, 추가 라이브러리나 외부 리소스가 필요하지 않습니다.

<img src="/icons/bell-ring.svg"
     width="32" height="32"
     alt="Notifications" />

글 옆에 장식으로 사용하는 이미지에는 빈 alt=""를 지정하세요. 장식용 인라인 SVG에는 role과 aria-labelledby를 제거하고 aria-hidden="true"를 추가하세요.

움직임을 세심하게 사용하기

모든 출력은 prefers-reduced-motion을 따릅니다. 시스템에서 움직임 줄이기를 요청하면 편집기는 정지 상태로 시작하며 재생을 눌러 확인할 수 있습니다. 완료 피드백에는 한 번의 재생을, 주의 안내에는 제한된 반복을 사용하세요.

인라인으로 여러 개 사용하기

아이콘과 설정마다 스타일 범위가 지정됩니다. 같은 출력 코드를 한 문서에 여러 번 붙여넣으면 각 SVG와 제목에 고유 ID를 지정하고 CSS 선택자와 aria-labelledby도 수정하세요. 이미지 요소는 파일마다 자동으로 분리됩니다.

프로젝트에 자유롭게 사용하기

아이콘 50개 모두에 출처와 라이선스 정보가 있습니다. 출처 컬렉션에서 제작자와 사용 조건을 확인하세요. 내려받는 SVG에도 같은 정보가 포함됩니다. 출처 · 라이선스