▲

Iconify: 오픈소스 아이콘 라이브러리

 (icon-sets.iconify.design)
14P by GN⁺ 5일전 | ★ favorite | 댓글 1개
  • 다양한 오픈소스 아이콘 세트를 한곳에서 탐색하고 사용할 수 있는 아이콘 통합 플랫폼
  • 여러 카테고리로 분류된 204개의 세트, 약 28만개의 아이콘을 제공
  • API를 통해서 아이콘 정보 가져오기 및 SVG/CSS 생성을 지원. 검색 API도 제공해서 Figma/Sketch용 플러그인에서 활용 가능
  • 각 세트는 Apache 2.0, MIT, CC BY, GPL 등 다양한 오픈 라이선스로 배포
  • Google Material, Fluent UI, Font Awesome, Tabler, HeroIcons 등 주요 디자인 시스템의 아이콘을 포함

Iconify 개요

  • Iconify는 오픈소스 아이콘 세트의 중앙 저장소로, 웹 기반 인터페이스를 통해 다양한 아이콘을 탐색 가능
  • 각 아이콘 세트는 이름, 라이선스 종류, 아이콘 개수, 개별 링크로 구성되어 있음
  • 사용자는 카테고리별로 필터링하여 Material, UI, Emoji, Logos, Programming 등 세트를 선택 가능

주요 아이콘 카테고리

  • Material 계열: Material Symbols, Material Design Icons 등 6개 세트, 최대 15,000개 이상의 아이콘 포함
  • UI 24px 세트: Solar, Tabler, Remix, Lucide, Iconoir 등 50여 개 세트로 구성, 다양한 스타일과 크기 제공
  • UI 16px / 32px 세트: Carbon, IonIcons, Ant Design Icons, Bootstrap Icons 등 18개 세트 포함
  • UI Other / Mixed Grid: Fluent UI System Icons(18,959개), Phosphor(9,072개) 등 대형 세트 다수 포함
  • UI Multicolor 세트: Streamline, Fluent Color, IconPark 등 다채로운 색상 아이콘 제공
  • Programming 세트: VSCode Icons, Devicon, File Icons 등 개발 환경에 특화된 9개 세트
  • Logos 세트: Simple Icons, SVG Logos, Web3 Icons 등 브랜드 및 로고 중심의 15개 세트
  • Emoji 세트: OpenMoji, Twemoji, Noto Emoji 등 11개 세트로 구성
  • Flags / Maps 세트: Circle Flags, Flag Icons 등 7개 세트 포함
  • Thematic 세트: Game Icons, Health Icons, Weather Icons 등 주제별 8개 세트
  • Archive / Unmaintained 세트: Font Awesome 4~6, Eva Icons 등 과거 버전 30개 세트 보관

라이선스 다양성

  • 각 세트는 Apache 2.0, MIT, CC BY, GPL, OFL(Open Font License) 등 다양한 오픈 라이선스로 배포
  • 일부 세트는 CC0(퍼블릭 도메인) 또는 Unlicense 형태로 자유롭게 사용 가능
  • 라이선스 정보가 명시되어 있어, 상업적 사용 및 수정 가능 여부를 쉽게 확인 가능

대표 아이콘 세트 예시

  • Fluent UI System Icons: MIT 라이선스, 18,959개 아이콘
  • Material Symbols Light: Apache 2.0, 15,180개 아이콘
  • Tabler Icons: MIT, 5,986개 아이콘
  • Simple Icons: CC0, 3,379개 브랜드 로고
  • OpenMoji: CC BY-SA 4.0, 4,449개 이모지

활용 가치

  • 다양한 디자인 시스템과 프레임워크에서 일관된 아이콘 접근성 확보
  • 개발자와 디자이너가 프로젝트 요구에 맞는 스타일과 라이선스를 즉시 선택 가능
  • 오픈소스 생태계 전반에서 아이콘 재사용과 표준화를 촉진하는 리소스 플랫폼
  • 공식 문서 페이지에서 활용법 및 API/플러그인 정보 참고
▲
GN⁺ 5일전  [-]
Hacker News 의견들

  • Iconify는 API를 통해 아이콘 SVG를 직접 가져올 수 있음
    나는 D2로 아키텍처 다이어그램을 자주 만드는데, Iconify의 방대한 아이콘 라이브러리를 함께 쓰면 시각적으로 훨씬 풍부해짐
    예를 들어 Docker와 Kubernetes를 연결하는 다이어그램에 각각의 SVG 아이콘을 지정할 수 있음

  • 일부 SVG는 애니메이션이 적용되어 있고, 검색도 가능함
    나는 오프라인 텍스트 에디터 wrifocus.bounded.cc에 이 아이콘들을 사용했는데, 결과물이 아주 만족스러웠음

    • 어떤 아이콘 세트를 사용했는지 궁금함. “contains animations”로 필터링하면 로더와 날씨 아이콘 세트 정도만 보임
    • 설정 아이콘의 기어가 돌아가는 애니메이션이 특히 멋짐. 에디터 자체도 인상적임
      혹시 온라인에서도 서버에 데이터를 저장하는 방식으로 쓸 수 있는지, 오프라인 브라우저 기반으로 만든 이유가 궁금함
    • 공유 고마움. 프로젝트를 self-hosted로 운영할 수 있는지도 알고 싶음

  • icones.js.org는 이런 아이콘들을 검색하기에 좋은 사이트임

  • 아이콘 최적화라는 주제로 글을 써보고 싶다는 생각이 듦
    웹사이트가 아이콘을 인라인하지 않아 레이아웃이 흔들리는 걸 보면 답답함

    • 동의함. 인라인 아이콘은 좋은 방법이지만 DOM 크기가 커질 수 있음
      아이콘의 복잡도나 반복 사용량에 따라 lazy loading이 더 나을 때도 있음
      근본적으로는 공간 예약이 제대로 안 되어 생기는 문제임
    • width/height 속성을 지정하는 것도 좋은 해결책임. aspect-ratio도 종종 추천됨
      단, 인라인 아이콘은 캐싱이 불가능해짐
      관련 참고: web.dev의 CLS 최적화 글

  • 이전 논의 링크: 2024년 9월 토론

  • 이 프로젝트에 큰 찬사를 보냄. 내가 만든 거의 모든 것에 매일 사용 중임
    k3s 프로젝트용으로 색상 버전과 무채색 버전의 devicon이 모두 있는 걸 보고 놀랐음

  • Pictogrammers는 약간의 장점이 있음
    Material 아이콘에 대해 Home Assistant 코드를 바로 제공해주기 때문에 클릭 한 번으로 필요한 코드를 얻을 수 있음

  • 또 다른 훌륭한 아이콘 소스로 The Noun Project를 추천함
    무료, CC-BY-3.0, 유료 라이선스 아이콘이 혼합되어 있음

    • 다만 유료 결제를 하지 않으면 SVG에서 불필요한 코드를 수동으로 제거해야 해서 번거로움

  • 최고의 아이콘 라이브러리를 묻는 질문에 대한 다양한 답변들

    • 개인적으로는 2005년경 famfamfam Silk 아이콘 세트가 정점이었다고 생각함
      고해상도나 SVG 버전이 없었던 게 아쉬웠지만, 요즘은 AI로 보완할 수도 있을 듯함
      보기 / 다운로드
    • Lucide를 추천함
    • Phosphor Icons를 좋아함. 그 외에는 기본적으로 Material UI Icons를 사용함
    • 나는 주로 게임 개발용으로 FlatIcon을 많이 씀
    • SVGRepo는 스트로크 두께나 색상 등을 직접 조정할 수 있어서 사용자 친화적임

  • 내 사이트 universymbols.com은 Iconify의 여러 아이콘 세트를 AI 이미지 모델로 확장할 수 있음
    그래서 기존의 대형 세트 외에도 좀 더 독창적인 아이콘 세트를 만들 수 있음

답변달기