아이콘 300개 · 카테고리 20개

애니메이션 아이콘 카테고리

useAnimations의 모든 아이콘은 내비게이션 화살표와 미디어 컨트롤부터 로더와 소셜 미디어 로고까지, 한 카테고리에 속합니다. 카테고리를 열면 해당 아이콘 전체와 쓰기 좋은 곳, 추가하는 코드를 볼 수 있습니다. 인터랙션별로 둘러볼 수도 있습니다.

경고아이콘 5개경고 삼각형, 경고 원, 정지 표지판 아이콘이 깜빡이지 않고 눈에 띌 만큼만 맥동합니다. 정지된 아이콘은 스크롤하다 놓치기 쉬운 곳, 예를 들어 검증에 실패한 폼 필드 옆, 오류 배너의 맨 앞, 상태 열에 두세요.
알림아이콘 4개새 활동이 있으면 울리거나 벨과 벨 끄기 상태 사이를 전환하는 벨 아이콘입니다. 벨이 짧게 흔들리면 읽지 않은 개수에 시선이 가고, 토글형 아이콘은 채널이나 스레드의 알림 끄기 버튼으로도 쓸 수 있습니다.
내비게이션아이콘 34개닫기 버튼으로 바뀌는 햄버거 메뉴, 그리고 호버하면 가리키는 방향으로 살짝 움직이는 화살표, 셰브론, 모서리 화살표입니다. 드로어 열기, 뒤로 가기, 행 펼치기, 사이트 나가기처럼 컨트롤이 어디로 이어지는지 분명하게 보여 줍니다.
액션아이콘 64개저장, 삭제, 다운로드, 새로고침, 좋아요, 북마크, 검색, 설정처럼 인터페이스의 동사에 해당하는 아이콘입니다. 각 아이콘이 해당 클릭이나 호버에 반응해 동작을 확인해 줍니다. 게시물에 좋아요를 누르면 하트가 채워지고, 삭제하기 전에는 휴지통 뚜껑이 열립니다.
콘텐츠아이콘 22개파일, 폴더, 책, 메일, 첨부 파일, 사람 아이콘입니다. 사용자가 다루는 대상을 표시하고, 추가·삭제·체크 변형 덕분에 목록과 팀 관리 화면이 즉각 반응하는 느낌을 줍니다.
폼아이콘 3개체크된 상태와 해제된 상태 사이를 애니메이션으로 전환하는 체크박스, 라디오 버튼, 토글 스위치입니다. 온보딩 체크리스트나 설정 화면처럼 기본 입력 요소가 밋밋해 보이는 곳에 쓰면서도, 상태는 한눈에 읽을 수 있습니다.
미디어아이콘 28개오디오·비디오 플레이어를 위한 재생과 일시정지, 볼륨, 마이크, 카메라, 건너뛰기, 셔플 아이콘입니다. 토글형 아이콘은 재생에서 일시정지로, 마이크에서 음소거로 두 상태 사이를 전환하므로, 버튼은 항상 클릭했을 때 일어날 일을 보여 줍니다.
텍스트 편집아이콘 10개리치 텍스트 툴바를 위한 굵게, 기울임꼴, 밑줄, 정렬, 목록 아이콘입니다. 텍스트 자체의 변화가 미묘한 편집기에서, 짧은 클릭 애니메이션이 서식이 적용됐음을 확인해 줍니다.
커뮤니케이션아이콘 13개전화, 말풍선, 보내기 버튼, 음성 메일, RSS 아이콘입니다. 통화 아이콘은 통화 기록에 필요한 수신, 발신, 부재중, 착신 전환 상태를 모두 갖추고 있고, 보내기 아이콘은 클릭할 때 메시지를 가볍게 날려 보냅니다.
기기아이콘 12개휴대폰, 태블릿, 모니터, 스마트워치, 프린터와 함께 그 주변의 연결 상태를 나타내는 Wi-Fi, 블루투스, 배터리 아이콘입니다. 기기 선택기, 반응형 미리보기 전환, 연결 상태 표시에 어울립니다.
날씨아이콘 16개일기예보나 시간대에 따라 바뀌는 화면을 위한 해, 달, 구름, 비, 눈, 번개, 바람 아이콘입니다. 해와 달은 라이트 모드·다크 모드 전환 스위치로도 자연스럽게 쓸 수 있습니다.
지도·위치아이콘 9개지도 핀, 내비게이션 화살표, 지구본, 과녁, 닻 아이콘입니다. 호버하면 떨어지는 핀은 매장 찾기나 배송 주소를 돋보이게 하고, 지구본은 언어·지역 전환 버튼으로 잘 어울립니다.
커머스아이콘 11개온라인 쇼핑몰을 위한 장바구니, 쇼핑백, 가격표, 선물, 신용카드, 배송 트럭 아이콘입니다. 장바구니 담기 애니메이션은 토스트 없이도 클릭을 확인해 주고, 트럭과 상자 아이콘은 주문 상태에 생기를 더합니다.
차트아이콘 5개분석과 리포트를 위한 막대 차트, 원형 차트, 추세 화살표입니다. 상승·하락 추세 아이콘은 지표가 올랐는지 내렸는지 한눈에 보여 주므로 KPI 카드나 수치 변경 내역에 잘 맞습니다.
개발아이콘 9개코드 괄호, 터미널, Git 브랜치, 커밋, 머지, 풀 리퀘스트, 그리고 서버와 데이터베이스 아이콘입니다. Git과 인프라 용어가 인터페이스의 일부인 개발자 도구, 문서 사이트, 상태 페이지를 위해 만들었습니다.
디자인·레이아웃아이콘 10개편집기와 빌더를 위한 그리드, 열, 레이어, 자르기, 펜 도구, 커서 아이콘입니다. 콘텐츠를 배치하거나, 그리드 보기와 표 보기를 전환하거나, 그리기 도구를 고르는 툴바에 어울립니다.
도형·수학아이콘 8개원, 사각형, 삼각형, 육각형, 팔각형과 나눗셈 기호입니다. 그리기 앱의 도형 도구, 계산기의 연산자, 다이어그램이나 온보딩 단계의 중립적인 표시로 쓸 수 있습니다.
로딩아이콘 5개작업이 진행되는 동안 계속 반복되는 스피너와 로더입니다. 요청이 처리되는 동안 제출 버튼 안에, 아직 로딩 중인 콘텐츠 자리에, 또는 전체 화면 스플래시에 넣으세요. 사용자가 동작 줄이기를 설정했다면 움직이지 않습니다.
소셜 미디어아이콘 22개소셜 네트워크, 그리고 개발자와 디자이너가 작업을 공유하는 서비스의 브랜드 아이콘입니다. X, Instagram, YouTube, Discord, Telegram, Figma 등이 있습니다. 호버하면 움직이므로 푸터와 프로필 링크가 클릭할 수 있는 요소로 느껴집니다.
기타아이콘 10개더 큰 그룹에 속하지 않는 아이콘입니다. 피드백용 이모지 얼굴, 커피잔, 시계, 맥박 선, 아래로 스크롤 안내가 있습니다. 아래로 스크롤 아이콘은 히어로 섹션 아래에 내용이 더 있다는 것을 알리는 흔한 장치입니다.