몇 달 전, 우리는 Heroicons를 조용히 출시했습니다. 이는 Tailwind UI의 컴포넌트를 지원하기 위해 처음 설계한 무료 SVG 아이콘 세트입니다. 오늘 우리는 공식 Heroicons 웹 경험을 출시하며, 이제 아이콘을 검색하고 Tailwind-ready HTML 또는 JSX로 클립보드에 빠르게 복사할 수 있습니다.
현재 중간 크기와 작은 크기로 총 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에서 토론하기 →