아이콘

lucide-react / Material Icons / Font Awesome

추천

lucide-react

shadcn/ui에 기본으로 들어 있어 바로 쓸 수 있습니다. 아이콘 수가 많아 원하는 것을 찾기 쉽습니다

결과 비교

같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.

lucide-react
Material Icons
Font Awesome

코드 비교

코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.

import { HouseIcon, SettingsIcon, SearchIcon, HeartIcon, BellIcon, UserIcon } from "lucide-react"
import { Tile, TileGrid } from "./Tile"

export default function App() {
  return (
    <TileGrid>
      <Tile label="홈"><HouseIcon size={24} /></Tile>
      <Tile label="설정"><SettingsIcon size={24} /></Tile>
      <Tile label="검색"><SearchIcon size={24} /></Tile>
      <Tile label="즐겨찾기"><HeartIcon size={24} /></Tile>
      <Tile label="알림"><BellIcon size={24} /></Tile>
      <Tile label="사용자"><UserIcon size={24} /></Tile>
    </TileGrid>
  )
}

비교

2026년 10월 기준

lucide-react

추천공식 사이트 ↗

특징

선으로 그린 깔끔한 아이콘이 1,500개 이상 있습니다. 아이콘 하나하나를 컴포넌트로 가져옵니다

이럴 때 좋아요

shadcn/ui를 사용할 때(기본으로 들어 있음). 아이콘 종류가 많은 것이 중요할 때

Material Icons

공식 사이트 ↗

특징

Google의 아이콘으로, Android나 Google 서비스와 같은 모양입니다. 채움, 선, 둥근 모서리 등 스타일을 고를 수 있습니다

이럴 때 좋아요

MUI를 사용할 때. 익숙한 Google 스타일을 원할 때

특징

가장 유명한 아이콘입니다. React 이전부터 일반 웹사이트나 WordPress에서 쓰여 왔습니다. 무료판과 유료판(Pro)이 있습니다

이럴 때 좋아요

브랜드 로고 아이콘(X, GitHub 등)도 쓰고 싶을 때. 이미 사용 중인 사이트를 유지보수할 때