다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

 

기본 아이콘을 직접 제작해 활용할 수 있으면 좋지만, 스타트업이나 사이드 프로젝트에서는 이런 환경을 갖추지 못할 때가 종종 발생합니다. 그렇다고 이곳저곳에 올라온 기본 아이콘을 쓰기에는 일관성 있는 스타일이 아니라 마음에 들지도 않고요.

 

오늘은 280여 개 기본 아이콘을 3가지 스타일에 따라 확인하고 각각 SVG, JSX 포맷으로 복사해 활용할 수 있는 곳을 소개하고자 합니다. 특히 피그마 파일을 별도로 지원해 피그마에서 자유롭게 사용할 수 있는 점이 특징입니다. 바로 ‘heroicons’입니다.

 

상업적으로 사용할 수 있는 280여 개의 무료 아이콘을 한눈에!

오늘 소개할 ‘heroicons’은 280여 개의 기본 아이콘이 등록되어 있으며, Outline∙Solid∙Mini 등 세 가지 스타일에 따라 내용을 확인할 수 있습니다. 또 MIT 라이선스를 기본으로 갖춰 이곳에서 제공하는 모든 아이콘을 상업적으로 사용할 수 있습니다.

 

기본 아이콘
<출처: heroicons>

 

화면 구성은 간단합니다. 홈페이지 화면에 기본으로 제공되는 280여 개 아이콘을 스크롤해서 하나씩 확인할 수 있으며, ‘arrow’ 등 필요한 아이콘 이름을 직접 검색해 찾아볼 수 있습니다. 검색창 아래로는 ‘스타일' 지정이 가능한 일종의 ‘필터'가 제공되는데, 어떤 스타일인지 자세한 설명과 사이즈를 제공하고 있어 어렵지 않게 클릭 후 스타일에 따른 아이콘 확인이 가능합니다.

 

아이콘 스타일
<출처: heroicons>

 

한 가지 스타일로 제공할 때 자칫 좋은 아이콘을 두고 서비스와 맞지 않아 사용을 포기해야 하는 경우가 발생합니다. 다행히 자주 사용하는 세 가지 스타일을 바로 확인할 수 있어 적합도를 빠르게 따져볼 수 있습니다. 필요한 아이콘에 스크롤을 두고, 스타일을 변경해 확인하거나 각 아이콘을 스타일에 따라 복사해 비교할 수 있는 점도 매력적입니다.

 

아이콘 직접 활용
<출처: heroicons>

 

아이콘을 직접 활용하는 방법은 크게 두 가지입니다. 하나는 마음에 드는, 확인하고 싶은 아이콘을 클릭해 SVG, JSX 포맷으로 복사하는 방법입니다. 이는 서비스에 바로 적용하고 확인할 수 있는 장점이 있습니다. 또 필요한 아이콘을 빠르게 복사해 활용할 때 유용하게 활용할 수 있는 방법입니다. 기본 아이콘이라 하더라도 280여 개를 일괄 적용하는 일이 많지 않기 때문입니다.

 

피그마 파일 활용
<출처: heroicons>

 

또 하나의 방법은 피그마 파일을 활용하는 방법입니다. 웹에서와 다르게 피그마 파일은 동일한 아이콘을 세 가지 스타일에 따라 한눈에 살펴볼 수 있습니다. 특히 전체 아이콘을 피그마 파일 단위로 확인하고 편집할 수 있어 화면 작업 시 유용하게 활용할 수 있습니다.

 

피그마 아이콘 컬러 변경
<출처: heroicons>

 

피그마 파일에서 아이콘을 확인한 뒤 컬러를 변경한 모습입니다. 이처럼 피그마 파일을 적극적으로 활용하면 서비스 또는 적용하고자 하는 대상에 잘 맞는 컬러를 미리 지정해 시각적으로 바로 확인할 수 있습니다. 또한 작업 중인 화면에도 손쉽게 적용할 수 있습니다. 웹에서는 스타일 단위로 아이콘을 확인할 수 있어 전반적인 모습을 비교하기 조금 어려운 경우가 있는데, 피그마 파일은 이렇듯 다른 스타일의 아이콘에 유사한 톤의 컬러를 적용하고 확인하기 좋습니다.

 

피그마 전체 파일
<출처: heroicons>

 

우리에게 필요한 기본 아이콘이 무엇인지 피그마 전체 파일을 띄워두고 하나씩 살펴보는 것도 편리합니다. 피그마 파일을 제공한다는 것 자체가 아이콘 사용성을 높여주는 방법이라고 생각합니다.

 

280여 개가 처음에는 단순 숫자로 좀 적게 느껴지기도 했는데, 이렇게 전체 아이콘을 3가지 스타일에 따라 확인해보니 우리가 화면 속 사용자에게 기본적으로 제공하는 아이콘 기준으로는 충분하다고 판단됩니다. 또한 이 아이콘을 직접 제작했을 때 많은 리소스를 투입해야 하는 걸 생각한다면 초기 버전이나 사이드 프로젝트 등에서 이 사이트의 가치가 더 높아질 것으로 보입니다.

 

 

한 번은 꼭 써봐야 하는 이유

기본 아이콘 제공
<출처: heroicons>

 

저는 이렇게 기본 아이콘은 물론 개성 있는 아이콘을 제공하는 페이지를 보면 일단 저장하고, 따로 정리하는 편입니다. 물론 내부에서 제작할 여력이 되면 필요에 따라 직접 제작하는 게 더 직관성 있는 아이콘을 활용하는 방법입니다. 하지만 빠르게 확인하고 검증해야 하는 화면이나 기능이라면 이처럼 무료로 제공되는 자료를 활용하는 편이 더 시간을 아낄 방법이기 때문입니다.

 

그런 면에서 ‘heroicons’는 우리가 기본적으로 서비스에서 활용하는 대부분의 아이콘을 담고 있으며, 3가지 스타일에 따라 확인하고 적용할 수 있는 손쉬운 방법을 제공합니다. 특히 별도의 피그마 파일을 제공해 편집 가능한 환경을 제공하기 때문에 활용도가 높은 서비스라고 생각합니다. 피그마 파일을 제공하는 아이콘 서비스가 많지 않기에 쓸수록 더 유용하게 느껴지는 서비스입니다. 서비스에 기본 아이콘이 필요할 때 꼭 한 번 써보길 추천합니다.

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.