테일윈드 공식 무료 SVG 아이콘 라이브러리 heroicons 특징과 사용법

히어로아이콘^heroicons은 테일윈드CSS^tailwindcss를 만든 회사인 Tailwind Labs에서 공식적으로 제작하여 무료로 배포하는 고품질 오픈소스 SVG 아이콘 라이브러리다.

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

heroicons.com

이 링크를 통해서 웹사이트를 방문해 보자.

테일윈드를 만든 사람들이 직접 디자인했기 때문에, 테일윈드 클래스를 사용할 수 있다.

예를 들면, 아이콘 크기를 조절할 때 class="size-6" (또는 w-6 h-6), 색상을 바꿀 때 text-gray-500, dark:text-gray-300 같은 테일윈드 문법을 적용할 수 있다.

그리고 위의 캡처 이미지를 보면 Outline, Solid, Mini, Micro라는 4가지 스타일을 제공하고 있다.

• Outline (외곽선): 24×24 크기, 기본 선 스타일 (가장 많이 쓰임)
• Solid (채우기): 24×24 크기, 면이 가득 찬 스타일
• Mini (미니): 20×20 크기, 버튼이나 드롭다운 메뉴 내부 등 좁은 공간용
• Micro (마이크로): 16×16 크기, 아주 조밀한 UI 레이아웃용

이렇게 하나의 아이콘 마다 네 가지 버전의 디자인을 제공하여 웹사이트 분위기에 맞게 골라 쓸 수 있다.

별도의 패키지를 설치하거나 폰트 파일을 로드할 필요가 전혀 없다.

위의 캡처 이미지처럼 사이트에서 원하는 아이콘 위에 마우스를 올리고 "Copy SVG" 버튼을 클릭하고, 원하는 위치에 그대로 붙여넣기(Ctrl + V)하면 즉시 화면에 출력된다.

폰트어썸^FontAwesome 같은 대형 라이브러리들은 쓰지 않는 수백 개의 아이콘 데이터까지 폰트 파일로 한 번에 로드해야 해서 웹 페이지 성능에 부담을 주곤 했다.

반면, 히어로아이콘은 순수한 내부 SVG 코드만 파싱하여 렌더링하므로 웹 최적화와 로딩 속도 측면에서 엄청난 이점을 가져다준다.

그런데 폰트어썸이 아이콘 종류도 더 많고 디자인도 조금 더 예쁜 것 같기는 하다.