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 이미지 모델로 확장할 수 있음
  그래서 기존의 대형 세트 외에도 좀 더 독창적인 아이콘 세트를 만들 수 있음