[Tailwind CSS] Heroicons: Tailwind CSS의 SVG 아이콘 라이브러리

Heroicons

: Tailwind Labs에서 만든 SVG 기반 아이콘 세트 라이브러리

• 깔끔하고 미니멀한 디자인이 특징이며, 주로 React와 Tailwind CSS를 사용하는 프로젝트에서 많이 사용된다.
• Heroicons는 React 컴포넌트 형태로 아이콘을 제공하여, JavaScript/TypeScript 기반 프레임워크와 쉽게 통합할 수 있다.

Heroicons	React-icons
Tailwind CSS를 사용하는 경우	다양한 아이콘 세트와 스타일이 필요한 경우
모던하고 심플한 아이콘이 필요할 때	기존의 FontAwesome 또는 Material Icons를 사용하던 프로젝트
가벼운 패키지가 필요한 경우	Tailwind와 무관하게 다양한 아이콘 라이브러리가 필요한 경우

 

 

 

설치

• React 프로젝트

npm install @heroicons/react

 

 

 

사용법

• Heroicons는 두 가지 스타일로 제공된다.
  
  • Outline (외곽선 스타일)
  • Solid (채워진 스타일)
• 각 아이콘은 React 컴포넌트로 사용된다.

import { ChatBubbleOvalLeftEllipsisIcon } from '@heroicons/react/24/outline';

function App() {
  return (
    <div>
      <ChatBubbleOvalLeftEllipsisIcon className="h-6 w-6 text-blue-500" />
    </div>
  );
}

export default App;

 

 

---

 

Heroicons

 

GitHub - tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.