Tailwind CSS home page
Go back

Heroicons.com 소개

Date

몇 달 전, 우리는 Tailwind UI의 컴포넌트를 지원하기 위해 처음 설계한 무료 SVG 아이콘 세트인 Heroicons를 조용히 출시했습니다. 오늘 우리는 공식 Heroicons 웹 경험을 출시하며, 이제 아이콘을 검색하고 Tailwind-ready HTML 또는 JSX로 클립보드에 빠르게 복사할 수 있습니다.

heroicons.com

현재 중간 크기와 작은 크기의 220개 이상의 아이콘이 제공되며, 각 크기는 다른 사용 사례를 위해 설계되었습니다:

  • 중간 크기 아이콘은 24x24 크기로 렌더링되도록 설계되었으며, 기본 네비게이션 및 마케팅 섹션에 적합합니다.
  • 작은 크기 아이콘은 20x20 크기로 렌더링되도록 설계되었으며, 버튼, 폼 엘리먼트 및 텍스트 지원에 적합합니다.

모든 아이콘은 Tailwind-ready이며, Tailwind의 내장 크기 및 색상 유틸리티로 쉽게 스타일링할 수 있습니다.

<svg
  class="h-6 w-6 text-indigo-500"
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M17 8l4 4m0 0l-4 4m4-4H3"
  />
</svg>

최상의 결과를 얻으려면 중간 크기 아이콘에는 h-6 w-6을, 작은 크기 아이콘에는 h-5 w-5을 사용하세요.

시작에 불과합니다

앞으로 몇 달 동안 새 아이콘과 새로운 아이콘 스타일(듀오톤 스타일도 포함!)을 디자인하고 출시할 계획이 많습니다.

이 사이트를 디자인하면서 Hero Patterns 사이트도 리뉴얼하고 싶어졌습니다. 곧 heropatterns.com에서 이런 모습을 볼 수 있을 거예요:

다른 “Hero” 도메인들도 활용할 준비가 되어 있고, 곧 어떤 작업을 진행 중인지 공개할 예정입니다. 정말 기대됩니다!

제안이 있나요?

새로운 아이콘에 대한 아이디어가 있다면 언제든지 알려주세요! Heroicons GitHub 저장소로 이동해 이슈를 열어 제안해 주세요.

이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →