SVG·PNG 아이콘 생성기
아이콘을 고르고 색상과 크기를 조절한 뒤 SVG나 PNG로 무료로 내려받으세요.
미리보기 배경
애니메이션
아이콘 0개
아이콘을 선택하세요
—
아이콘 생성기 사용 방법
아이콘 생성기는 웹사이트와 앱, 프레젠테이션, 디자인 작업에 바로 쓸 아이콘을 찾고 다듬어 내려받을 수 있는 무료 온라인 도구입니다. 회원가입이나 설치 없이 브라우저에서 모든 작업이 이루어집니다.
아이콘 검색과 선택
왼쪽 패널의 검색창을 쓰거나 카테고리를 둘러보며 원하는 아이콘을 찾아보세요. 주제별로 정리된 수백 개의 아이콘이 있어 인터페이스, SNS, 기술, 비즈니스 등 필요한 기호를 쉽게 찾을 수 있습니다. 아이콘을 클릭하면 선택되고, 설정 패널에서 결과가 실시간으로 표시됩니다.
아이콘 꾸미기
아이콘을 선택한 뒤에는 기본 색상 과 보조 색상 을 프로젝트의 비주얼 아이덴티티에 맞게 조절할 수 있습니다. 또한 크기 를 픽셀 단위로 정하고 선 굵기도 조절할 수 있어, 미니멀한 인터페이스든 묵직한 디자인이든 원하는 레이아웃에 정확히 맞출 수 있습니다.
아이콘 다운로드와 코드 복사
설정을 마쳤다면 세 가지 방식으로 내보낼 수 있습니다:
- SVG: 크기를 자유롭게 늘릴 수 있는 벡터 파일을 내려받습니다. 웹사이트와 디자인 시스템, 애플리케이션에 가장 적합합니다. SVG 아이콘은 용량이 가볍고 어떤 해상도에서도 선명하며 CSS나 코드로 쉽게 수정할 수 있습니다.
- PNG: 선택한 크기의 래스터 이미지를 내려받습니다. 문서와 프레젠테이션, SVG를 지원하지 않는 플랫폼에 알맞습니다.
- SVG 코드 복사: 아이콘의 소스 코드를 클립보드에 바로 복사합니다. 외부 파일을 불러올 필요 없이 페이지 HTML에 그대로 붙여 넣으면 됩니다.
이렇게 세 가지 방식을 제공하기 때문에, 코드에 아이콘을 직접 넣는 개발자는 물론 Figma나 Canva, 파워포인트에서 바로 쓸 파일이 필요한 디자이너에게도 잘 맞습니다.
자주 묻는 질문
아이콘을 상업적으로 써도 되나요?
네. 이 도구에 있는 모든 아이콘은 상업적 프로젝트를 포함해 자유롭게 쓸 수 있습니다. 출처 표기도 필요하지 않습니다.
SVG와 PNG 다운로드는 어떻게 다른가요?
SVG는 벡터 형식이라 어떤 크기로 늘려도 화질이 떨어지지 않아 웹사이트와 앱에 가장 적합합니다. PNG는 크기가 고정된 래스터 이미지로, 문서나 프레젠테이션, SVG를 지원하지 않는 플랫폼에 더 알맞습니다.
아이콘을 HTML에 바로 넣을 수 있나요?
네. "SVG 코드 복사" 버튼으로 소스 코드를 복사해 HTML에 그대로 붙여 넣으면 됩니다. 이렇게 하면 CSS로 스타일을 주거나 자바스크립트로 제어할 수 있습니다.
보조 색상은 무엇인가요?
일부 아이콘은 두 개의 레이어나 서로 다른 요소로 이루어져 있습니다. 보조 색상은 내부 배경이나 그림자, 부가 디테일 같은 요소에 적용됩니다. 선으로만 이루어진 아이콘에는 기본 색상만 쓰입니다.