Icons

lucide-react ／ Material Icons ／ Font Awesome

Our pick

lucide-react

It comes with shadcn/ui, so you can use it right away. There are so many icons that you'll easily find the one you want

Compare the result

We built the same thing with each library. Try them out.

lucide-react

Material Icons

Font Awesome

Compare the code

Edit the code and the preview on the right updates.

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

export default function App() {
  return (
    <TileGrid>
      <Tile label="Home"><HouseIcon size={24} /></Tile>
      <Tile label="Settings"><SettingsIcon size={24} /></Tile>
      <Tile label="Search"><SearchIcon size={24} /></Tile>
      <Tile label="Favorites"><HeartIcon size={24} /></Tile>
      <Tile label="Notifications"><BellIcon size={24} /></Tile>
      <Tile label="User"><UserIcon size={24} /></Tile>
    </TileGrid>
  )
}