Heroicons

Heroicons(heroicons.com) = 100% 무료 오픈소스 아이콘 사이트. 회원가입 없이 즉시 다운로드. 광고 없음 — Tailwind CSS 팀 공식 운영. MIT 라이선스 — 가장 자유로운 라이선스. 약 300+ 아이콘 — 양은 적지만 디자인 톤 일관성 1티어. 사설 'Tailwind 아이콘 패키지' 업체는 ① 무료 사이트 모르는 사람 대상 ② 수수료 명목 ③ 본인이 무료 가능. heroicons.com 공식 도메인만 이용. Tailwind CSS · shadcn/ui · v0 사용자 = Heroicons 사실상 표준. 한국 웹 개발자·디자이너 누구나 활용 핵심 사이트입니다.

글로벌 오픈소스 아이콘 사이트 차이: ① Heroicons = 약 300+ 아이콘, Tailwind 팀 제작, 디자인 톤 일관성 1티어, Tailwind 기본 ② Lucide = 약 1,400+ 아이콘, 커뮤니티 운영, 업데이트 활발 ③ Tabler Icons = 약 5,000+ 아이콘, 일관된 톤, 양 1티어 ④ Phosphor = 6가지 스타일 ⑤ Material Symbols(Google). 추천: ① Tailwind 사용자 = Heroicons 우선 ② 양·다양성 = Tabler 또는 Lucide ③ shadcn/ui = Lucide(기본) ④ Google 생태계 = Material. 한국 웹 개발자 표준: Heroicons(Tailwind) + Lucide(다양) + Tabler(양) 분담. 본인 사용 디자인 시스템에 따라 선택.

Heroicons 3가지 스타일: ① Outline(24x24) — 선만 있는 미니멀 톤, 가장 보편, 일반 UI 표준 ② Solid(24x24) — 채워진 톤, 강조·활성 상태 ③ Mini(20x20) — 작은 크기, 컴팩트 UI ④ Micro(16x16) — 매우 작음, 추가 추가됨. 활용: ① 일반 UI = Outline 우선(미니멀 모던) ② 활성·선택 상태 = Solid(시각적 강조) ③ 작은 버튼·라벨 = Mini ④ 표·리스트 = Micro. 추천 워크플로우: 일반 상태 = Outline, hover·active = Solid 변환 = 사용자 경험 큰 폭 향상. Tailwind + shadcn/ui = Heroicons 표준 페어링.

Heroicons MIT 라이선스 = 가장 자유로운 라이선스 중 하나: ① 상업 사용 ② 수정·편집 ③ 재배포 ④ 재판매(법적 OK) ⑤ 회사 BI·CI 자유 ⑥ 저작자 표시 의무 없음 ⑦ 임베드 자유. 활용: ① 회사 SaaS·앱 UI = 안전 ② 광고·CF·인쇄 자유 ③ 클라이언트 의뢰 작품 안전 ④ 본인 디자인 시스템 통합 ⑤ 회사 BI 보조 활용. 한국 웹 개발자·SaaS 회사에게 라이선스 안전 1티어 — 평생 분쟁 0. Lucide(ISC)·Heroicons(MIT)·Tabler(MIT) 모두 자유 라이선스 — 회사 프로젝트에 안심하고 사용 가능. 평생 자산 보호 측면 가장 안전.

Heroicons 공식 npm 패키지: ① React = `@heroicons/react` ② Vue = `@heroicons/vue` ③ Tailwind CSS = 기본 호환. 활용 예(React): `import { HomeIcon } from '@heroicons/react/24/outline'; <HomeIcon className='h-6 w-6 text-blue-500' />`. 강점: ① Tailwind 100% 호환 ② TypeScript 지원 ③ Tree-shaking 자동 ④ Outline·Solid·Mini 동일 API ⑤ shadcn/ui · v0 호환. 한국 웹 개발자 표준: React + Tailwind + Heroicons + shadcn/ui = 빠른 SaaS·앱 UI 개발. Next.js · Remix · Vite 모두 호환. 본격 웹 개발자에게 표준 워크플로우 도구입니다.

Heroicons + shadcn/ui · v0 통합: ① shadcn/ui 기본 아이콘 = Lucide 이나 Heroicons 로 교체 자유 ② v0(Vercel) 생성 코드 = Heroicons 또는 Lucide 선택 가능 ③ 본인 디자인 톤에 맞춰 선택. 활용: ① Tailwind 기본 디자인 = Heroicons 우선 ② Lucide 디자인 톤이 더 다양성 필요 시 = Lucide ③ 본인 회사 디자인 시스템 = 하나 선택 후 일관성 유지. 한국 SaaS·스타트업 표준 워크플로우: ① v0 또는 shadcn/ui 로 빠른 UI 생성 ② 본인 디자인 톤에 맞는 아이콘(Heroicons or Lucide) ③ Tailwind + 본인 회사 색상 = 모던 SaaS UI 완성. 평생 자산 형성.

Heroicons = Tailwind CSS 팀 공식 제작 — 완벽 호환. 활용: ① Tailwind 클래스로 색상 = `text-blue-500` ② 크기 = `w-4 h-4`·`w-6 h-6` ③ 배경 = `bg-blue-100` ④ 호버 = `hover:text-blue-600` ⑤ 다크 모드 = `dark:text-white`. 활용 예: `<HomeIcon className='h-6 w-6 text-gray-700 hover:text-blue-500 dark:text-gray-300' />`. 강점: ① Tailwind 디자인 토큰 자동 적용 ② 디자인 시스템 일관성 ③ 다크 모드 자동 ④ 반응형 자동 ⑤ 코드 작성 시간 큰 폭 절약. 한국 웹 개발자 = Tailwind + Heroicons = 표준 페어링. shadcn/ui · v0 사용자에게 필수입니다.

Heroicons 업데이트: ① 신규 아이콘 추가 = 분기별 또는 반기별 ② Tailwind 팀 직접 운영 = 디자인 톤 일관성 유지 ③ Lucide 만큼 빠르지는 않음 ④ 본격 신규 아이콘 = Lucide 또는 Tabler 보완. 약 300+ 아이콘 = 일반 UI 작업에 충분하나 특수 아이콘(암호화폐·AI·신규 SNS·산업 특화) = 부족. 활용: ① 기본 UI(홈·검색·설정·메뉴 등) = Heroicons 충분 ② 특수 분야 = Lucide·Tabler 보완 ③ 매년 1회 npm 패키지 업데이트 ④ Heroicons + 다른 사이트 분담. 단순 깔끔 UI = Heroicons 우선 + 필요 시 Lucide·Tabler 보완이 표준입니다.

Heroicons 사용 방법: ① 일반 SVG = heroicons.com 검색 후 SVG 또는 JSX 코드 복사 ② npm 패키지 = `npm install @heroicons/react` 또는 `@heroicons/vue` ③ Figma 플러그인 = 'Heroicons' 플러그인 검색·삽입 ④ CDN = 일부. Figma 워크플로우: ① Figma 디자인 시안 → Heroicons 플러그인 검색·삽입 ② 본인 회사 색상 적용 ③ 개발자에게 인계 = React 동일 아이콘. 디자이너·개발자 협업 시간 절약 1티어. 한국 웹 디자이너 = Figma + Heroicons 플러그인 = 표준 도구.

Heroicons = SaaS·모던 디자인 활용 1티어. 활용 시나리오: ① SaaS 제품 UI — 가장 많은 활용 ② Tailwind 기반 회사 웹사이트 ③ 본인 디자인 시스템 ④ 스타트업 IR · 피치덱 ⑤ 회사 BI 보조 ⑥ 모바일 앱(React Native) ⑦ 본인 포트폴리오. 강점: ① MIT 라이선스 = 라이선스 안전 1티어 ② 디자인 톤 일관성 = SaaS 표준 ③ Tailwind 완벽 호환 ④ Tree-shaking ⑤ Outline·Solid 자유 교체. 단 ① 회사 BI 핵심 = 다른 회사도 같은 아이콘 가능 → 차별화 권장 ② 본인 회사 색상 + 일부 변형 = 차별화. 한국 SaaS·스타트업·Tailwind 사용자에게 사실상 표준 도구.

한국 사용자 표준 활용: ① 웹 개발자(React·Vue + Tailwind) = SaaS·앱 UI ② shadcn/ui·v0 사용자 = 기본 아이콘 ③ UI/UX 디자이너 = Figma 디자인 시안 ④ 스타트업 = 제품 UI ⑤ 1인 사업자 = Tailwind 회사 웹사이트 ⑥ 본인 디자인 시스템 구축. 평생 활용: 매월 개발 작업 시 Heroicons 활용 = 매년 50~300만원 아이콘 비용 절약, 평생 누적 500만~3,000만원. 한국 SaaS·스타트업·Tailwind 사용자에게 사실상 표준 도구. MIT 라이선스 + Tailwind 완벽 호환 + 깔끔 톤 = 평생 자산. 본격 웹 개발자는 Heroicons + Lucide 둘 다 활용 권장.

Heroicons 모바일 브라우저(Safari·Chrome) 정상 동작. 기능: ① 아이콘 검색·미리보기 ② SVG·JSX 코드 복사 ③ 다운로드. 모바일 한계: ① 본격 개발 = PC 권장 ② IDE·npm = PC 필수 ③ Figma 디자인 = PC 효율적. 활용: ① PC 본격 작업 + 모바일 빠른 검색 분담 ② Figma 모바일 앱 + Heroicons 플러그인 일부 ③ React Native 앱 = lucide-react-native 또는 react-native-vector-icons. 한국 웹 개발자 = PC 본격 + 모바일 빠른 검색. 본격 작업 = PC 권장.

최근 늘어나는 주의 사례: ① '무료 Tailwind 아이콘 패키지' 사설 업체 — 무료 사이트를 유료 판매 ② 가짜 Heroicons 사이트 — 본인 정보·악성코드 ③ 회사 BI 핵심에 그대로 사용 → 다른 회사와 동일 ④ Heroicons 무단 수정 후 재배포(법적 OK 이나 윤리적 문제). 주의사항: ① heroicons.com 공식 도메인만 ② 본인이 직접 다운로드·npm 설치 ③ MIT 라이선스 자유 활용 ④ 회사 BI 핵심 = 본인 디자이너 차별화 ⑤ 본인 회사 색상 + 일부 변형 = 차별화 ⑥ Tailwind 팀 존중(GitHub 기여·Tailwind 후원). MIT 라이선스 = 평생 자산 보호 + 자유도 1티어. 한국 웹 개발자에게 가장 안전한 아이콘 사이트 중 하나.

본인 디자인 시스템 = 여러 아이콘 사이트 결합 활용 가능: ① 기본 UI = Heroicons(Tailwind 표준) ② 다양 아이콘 = Lucide ③ 매우 다양 = Tabler ④ Material Design = Material Symbols ⑤ 특수 분야 = Phosphor·Iconify(전체 모음). 단 ① 디자인 톤 일관성 유지 = 한 사이트 우선 + 부족할 때만 다른 사이트 ② 본인 디자인 시스템에 표준화 ③ 한 사이트 = 본문 70%+ 차지. Iconify(iconify.design) = 모든 아이콘 사이트 통합 검색·사용 가능 — 본인 디자인 시스템에 다양 아이콘 통합 시 활용. 한국 웹 개발자 표준: Heroicons + Lucide 분담 + Iconify 통합.