[디자이너 북마크] 무료 아이콘 사이트 5곳 추천

 

방문해주셔서 감사해요! 알씨타운입니다 🤗

 

최근 플랫 디자인이 유행을 하면서 함께 중요성이 대두되고 있는 아이콘!

아이콘 선의 두께는 어떻게 할 지

아이콘 색은 어떻게 할 지

모서리를 둥글게 할지 각지게 할지에 따라 이미지가 확확 바뀌곤 하는데요!

 

오늘 알려드릴 사이트들은 아이콘 제작을 따로 하지 않고도

쉽게 사용할 수 있는 무료 아이콘 사이트입니다!

 

---

1. Flaticon

 

Flaticon, the largest database of free vector icons

Download all icons in SVG, PSD, PNG, EPS format or as webfonts

www.flaticon.com

선으로 된 심플한 아이콘부터 색깔이 들어간 아기자기한 아이콘까지!

다양한 아이콘을 보유하고 있는 flaticon입니다!

 

이 곳에 있는 아이콘이 다 무료는 아니지만

필터에서 free를 선택하면 자동으로 무료아이콘만 볼 수 있습니다!

 

하지만 따로 html용 링크는 지원하고 있지 않고

이미지 파일(png, svg 형태)로 다운받을 수 있으니 참고하세요!

 

---

2. Font Awesome

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

이미지 파일의 형태가 아닌 Html코드로 삽입하고 싶다면 이 사이트는 어떨까요??

 

 

이미지 파일은 물론 Html 링크를 바로 지원해

저도 웹퍼블리싱을 할 때 유용하게 사용하고 있습니다!

 

이 사이트 역시 무료아이콘과 유료아이콘이 나뉘어져 있지만

필터로 무료 아이콘만 따로 분류할 수 있습니다.

 

 

아이콘 삽입에 필요한 CDN주소는

폰트어썸 메인페이지에서 Start for Free를 누르고

이메일을 입력하면 메일함으로 옵니다!

 

제가 퍼블리싱할 때 구글 아이콘과 함께

가장 자주 사용하는 웹사이트입니다! 😊

---

3. IconFinder

 

5,325,000+ free and premium vector icons - Iconfinder

Iconfinder is the world's largest marketplace for vector and raster icons in SVG and PNG formats.

www.iconfinder.com

앞서 언급한 사이트들보다 양적으로 많은 것은 아니지만

카테고리 분류가 잘 되어있어서 가지고 왔습니다!

 

 

선으로 된 아이콘, 컬러 아이콘 뿐만 아니라

카툰 스타일, 손그림 스타일 등 다양한 디자인이 있으니

디자인하고자 하는 방향에 맞춰 사용하기에 유용할 것 같습니다!

---

4. Noun Project

Noun Project: Free Icons & Stock Photos for Everything

Icons and Photos For Everything Icons submit search

thenounproject.com

선으로 만들어진 아이콘들이 많은 사이트입니다!

저는 선 형태의 아이콘들을 버튼 디자인에 자주 활용합니다

 

버튼에 맞는 아이콘을 잘 선택한다면 많은 텍스트를 전달하지 않고도

사용자 입장에서 사용하기에 편리한 UI/UX 디자인이 될 수 있겠죠!

 

'back'을 검색했을 때 화면 : 하나의 검색어로도 이렇게 다양한 아이콘들이 나오네요!!

---

5. Icon-Icons

무료 아이콘 SVG, PNG, ICO 또는 ICNS

검색 새로운 Iconsets Transportation flat  15 아이콘 Transportation line  15 아이콘 Super-batman  60 아이콘 Travel Liburan  12 아이콘 Arrow Part 2  60 아이콘 Arrow Part 1  60 아이콘 Animal  12 아이콘 Digital Marketing (Filled Outl ...  25 아이콘 Online Learning Vol.1  23 아이콘 (보기) 당신은 형식 SVG, ICO 및 ICNS을 PNG로 다운로드 할 수 있습니다 ... 우리...

icon-icons.com

마지막으로는 한글 검색을 지원하는 사이트를 소개할까 합니다.

영어로 검색하기 애매한 아이콘들을 찾을 때 유용하게 쓰이겠죠!

 

장바구니를 검색해도 이런 이미지들이 잘 뜨네요!

 

 

알씨 더하기

오늘은 두가지 형태로 사용할 수 있는 아이콘사이트들을 소개해봤는데요!

 

1. 이미지 형태로 다운받아 사용

2. CDN을 삽입하고 아이콘을 특정 클래스 명으로 호출해 사용하는 방법

 

다음 포스팅은 퍼블리싱을 할 때 사용하기 좋은

웹아이콘 폰트를 모아놓은 Font Awesome 사이트와 사용방법에 대해서 다뤄볼까합니다!

많은 기대 부탁드려요 😁

---