웹사이트 제작시 유용한 무료아이콘

웹사이트 제작시 브랜딩을 생각한다면, 아이콘을 새로 그리는 것이 가장 좋겠지만 이미 널리 통용되고 있는 아이콘들이 많다. 바퀴를 재창조하는 것보다 꼭 중요한 것들만 새로 그리고, 좋은 소스들은 가져다 쓰는 것이 시간을 아끼는 방법일 것이다.

웹사이트 제작시 유용한 무료아이콘
Photo by Harpal Singh / Unsplash

웹사이트 아이콘에 대하여

웹사이트 제작시 브랜딩을 생각한다면, 아이콘을 새로 그리는 것이 가장 좋겠지만 이미 널리 통용되고 있는 아이콘들이 많다. 바퀴를 재창조하는 것보다 꼭 중요한 것들만 새로 그리고, 좋은 소스들은 가져다 쓰는 것이 시간을 아끼는 방법일 것이다.


React Icons

React Icons
Include popular icons in your React projects easly with react-icons.

리액트를 사용하는 사람들이라면 이미 널리 알고 있을 유용한 사이트이다. 이 사이트에서 제공하는 아이콘들도 결국 다른 프레임워크에서 가져온 것들이기때문에 각각의 아이콘에 대해 라이센스를 확인하고 사용하는 것이 안전할 것이다.


Simple Icons

Simple Icons
2404 Free SVG icons for popular brands

심플 아이콘에서는 이미 널리 알려져있는 브랜드 아이콘들을 SVG와 PDF로 제공하고 있다. 브랜드 컬러는 물론이고 브랜드 가이드라인까지 제공하는 아이콘들도 있다. 우리나라에서 널리 쓰이는 네이버, 카카오와 같은 브랜드 아이콘들도 있어서 매우 유용하게 쓸 수 있다.


Hero Icons

Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

개인적으로 정말 좋아하는 Icon Set이다. Tailwind CSS에서 만들어 제공하는 아이콘으로 분위기도 테일윈드 CSS와 잘 어울리게 생겼다. NPM 리포지토리를 통해 설치해서 사용하는 것도 가능하지만, SVG는 물론이고 JSX 소스까지 제공한다. Figma 파일은 물론이고 Documentation까지 잘되어있는 훌륭한 오픈소스 아이콘이다.


Svelte Icons Pack

Svelte Icons Pack Demo

React Icons가 있다면 Svelte에는 Svelte Icons Pack이 있다. React Icons에 비하면 적은 양이지만, 그래도 상당히 많은 양의 아이콘들을 제공하고 있다. 직접 적용해서 써본 경험을 이야기해보자면, 아이콘마다 컬러 조절이 안되는 경우도 있어서 약간 불편했던 기억이 있다.


Font Awesome

Font Awesome
The internet’s icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

대중적으로 너무나도 유명한 아이콘 라이브러리 Font Awesome은 유료와 무료 플랜으로 나뉘어 있다.

총 2만개에 가까운 아이콘을 사용할 수 있지만, 무료로 사용할 수 있는 아이콘은 2,000여개 정도 된다(2022년 11월 기준)


결론

개인적으로는 직접적으로 SVG를 제공하는 아이콘 사이트들이 좋다고 생각한다. 범용으로 사용이 가능하기때문에 어떤 프레임워크에 종속되지 않고 유연하게 사용이 가능하기 때문이다.