제주에서 작은 IT 사업을 하고 있는 유지 아빠가 보고 듣고 느끼는 진솔한 이야기를 나누는 공간입니다.

웹 & IT/웹표준 HTML, CSS & PHOTOSHOP

웹에서 사용하는 웹 아이콘 사이트 소개

유지아빠 2020. 12. 18. 13:06

오래전에 웹에서 사용하는 아이콘들은 전부 비트맵으로 만들어서 사용하고 했습니다. 그때의 개고생이란. ㅠㅠ

하지만 현대 웹에서는 더 이상 그런 비 효율적인 작업을 하지 않죠.

 

웹 표준 시대와 더불어 아이콘이 웹 폰트 형식으로 세상에 출현한 이후에는 더이상 비트맵 방식의 아이콘은 사용하지 않게 되었습니다. (뭐 지금도 사용하는 경우는 종종 보곤 합니다만.)

 

특히 부트스트랩의 사용과 더불어 웹폰트 형식의 아이콘이 보편화 되면서 다양하고, 저작권 문제도 없는 웹용 아이콘을 제공하는 사이트들이 있어서 소개합니다. 

 

1. 부트스트랩 아이콘 

icons.getbootstrap.com/

 

Bootstrap Icons

Official open source SVG icon library for Bootstrap

icons.getbootstrap.com

가장 많이 사용하는 아이콘의 모음이고, 이제 별도의 독립된 사이트로 분리되어 이젠 SVG 형식도 제공됩니다. 

 

 

2.Octicons 

개발자 여러분들은 깃허브 사이트 모르시는 분 없죠??  깃허브 디자인 팀이 만든 아이콘 사이트입니다. 

 

 

primer.style/octicons/

 

Octicons

Your project. GitHub's icons.

primer.style

3. fontawesome

 

여기 아이콘은 정말 다양한 종류를 자랑합니다. 이 사이트가 이젠 프로 버전을 출시하면서 무료 아이콘과 유료 아이콘으로 나뉘어 졌지만 지금도 무료 버전이 위 2개의 사이트 보단 훨씬 다양한 아이콘들을 제공합니다. 

 

fontawesome.com/

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

4. Feather 

여긴 SVG 아이콘만 제공하는데 특이하게 24 X 24 크기의 아이콘만 제공합니다. SVG 파일이기 때문에 24 X 24 크기여도 축소하거나 확대해도 전혀 문제는 없습니다. 

여기는 특이하게 자바스크립트 기반으로 호출하게 되어 있습니다.

 

feathericons.com/

 

Feather – Simply beautiful open source icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

feathericons.com

github.com/feathericons/feather

 

feathericons/feather

Simply beautiful open source icons. Contribute to feathericons/feather development by creating an account on GitHub.

github.com

5. icofont 

제목에서도 보다시피 icon을 폰트 베이스로 제공하는 사이트입니다. 필자가 요즘 가장 많이 애용하는 사이트입니다. 요즘 추세가 웹 폰트 형식하고 SVG 둘다 제공하기 때문에 사용법은 상당히 간단합니다. 

그리고 여기가 아이콘 퀄러티가 상당히 좋고 다양합니다. 또한 검색이 용이하고 매우 직관적인 아이콘들이 많습니다.

 

 

icofont.com/icons

 

All Icons | IcoFont

Download any icons from the vast collection and use it to your design, website, mobile application and any software.

icofont.com

이상으로 웹에서 사용되는 다양한 아이콘들을 저작권 걱정없이 사용할 수 있는 사이트들을 소개해 드렸습니다.