아이콘 라이브러리 20종+,
한 검색창에서 복붙.
Lucide, Tabler, Phosphor, Material Symbols, Carbon, Fluent UI, Font Awesome Free까지 — 라이브러리마다 사이트를 옮겨다닐 필요 없이 검색하고 담아둔 뒤, 붙여넣은 SVG도 정리해서 복사하세요.
Icon output
아이콘은 고르고, 복사 방식은 상황별로 나눕니다
단일 아이콘, 여러 아이콘, React 작업처럼 붙일 위치가 달라지는 코드만 구분해서 보여줍니다.
State transition
모핑 아이콘 미리보기
의미가 바뀌는 버튼만 눌러보세요. 아이콘 움직임은 현재 상태가 바뀌었다는 신호로만 사용합니다.
Morphicons는 MIT, 이 예제의 Lucide 아이콘 데이터는 ISC 라이선스입니다.
Icon quick start
처음이면 이렇게 시작하세요
- 아이콘 검색세트와 스타일 필터로 필요한 아이콘을 먼저 찾습니다.
- 필요한 아이콘 담기미리보기에서 크기와 색상을 확인한 아이콘만 컬렉션에 담습니다.
- 출력 방식 고르기정적 HTML은 SVG, React 작업은 React, 색상 제어는 CSS mask 코드를 복사합니다.
0개 아이콘검색 세트 32개전체 세트스타일 전체애니메이션 전체검색이 준 순서 그대로
모든 아이콘은 MIT·Apache·ISC·CC0·CC BY 등 상업용 사용 가능한 라이선스만 노출합니다. CC BY 계열(Font Awesome Free)은 복사 코드에 저작자표시가 자동 포함돼요. 데이터: Iconify 공개 API.
Full set CDN
아이콘을 하나씩 말고, 세트 전체를 한 줄로
아이콘을 많이 쓰는 프로젝트라면 link/script 한 줄로 세트 전체를 불러오는 게 편합니다. 아래 코드를 head에 넣고, 검색창에서 찾은 아이콘 이름을 클래스나 태그 안에 쓰세요.
Iconify 웹컴포넌트모든 세트 · 20만 개+
스크립트 한 줄로 전 세트 커버. 화면에 보이는 아이콘만 자동 로드돼서 사실상 전체 CDN 중 가장 가볍습니다.
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="mdi:home"></iconify-icon>
<iconify-icon icon="lucide:heart" style="color: red; font-size: 24px;"></iconify-icon>Material Symbols (구글 공식)머터리얼 최신 세트 전체
아이콘 이름을 태그 안에 텍스트로 넣는 리거처 방식. outlined 외에 rounded/sharp 패밀리도 동일 패턴입니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">shopping_cart</span>Material Icons (클래식)머터리얼 구버전 세트 전체
구글 공식 CDN 한 줄로 세트 전체가 로드됩니다. 이름은 소문자 + 언더스코어.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<span class="material-icons">home</span>
<span class="material-icons">favorite</span>Material Design Icons (@mdi/font)커뮤니티 머터리얼 7,000개+
클래스 방식 전체 아이콘폰트. 검색창의 MDI 세트 아이콘 이름을 mdi- 뒤에 그대로 씁니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" />
<i class="mdi mdi-home"></i>
<i class="mdi mdi-account-circle"></i>Font Awesome Freesolid·regular·brands 전체
CC BY 4.0 — 아래 주석(저작자표시)을 함께 유지하세요.
<!-- Font Awesome Free (fontawesome.com) — CC BY 4.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-brands fa-github"></i>Bootstrap Icons2,000개+ 전체
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<i class="bi bi-house"></i>
<i class="bi bi-heart-fill"></i>Remix Icon3,000개+ 전체
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" />
<i class="ri-home-line"></i>
<i class="ri-heart-fill"></i>전체 CDN 방식은 처음 로드가 무거울 수 있어요 (Font Awesome 전체 CSS+폰트 수백 KB). 아이콘을 몇 개만 쓴다면 SVG 인라인이나 Iconify 웹컴포넌트가 더 가볍습니다.
SVG
SVG 최적화/정리
붙여넣은 SVG에서 편집기 속성과 위험 요소를 걷어내고, currentColor와 viewBox 기준을 점검합니다.
SVG를 붙여넣으면 미리보기가 표시됩니다.
- 원본
- 0B
- 정리 후
- 0B
- 감소
- 0B · 0%
정리할 SVG 코드를 붙여넣어 주세요.아이콘 복사 기준 더 보기
어떤 복사 방식을 골라야 하나요?
의존성 없이 제일 빠른 건 SVG 인라인입니다. HTML에 그대로 붙여넣으면 되고 색은 CSS color로 제어됩니다. 아이콘을 여러 개 쓴다면 웹컴포넌트 방식이 편합니다 — 스크립트 한 줄 넣으면 화면에 보이는 아이콘만 자동 로드되고, font-size와 color로 폰트아이콘처럼 다룰 수 있어요. HTML을 수정할 수 없을 때는 CSS mask 방식, React 프로젝트라면 @iconify/react 컴포넌트를 쓰세요.
SVG 최적화는 무엇을 정리하나요?
디자인 툴에서 복사한 SVG에는 class, data 속성, 고정 width/height, 직접 색상값이 섞여 있는 경우가 많습니다. 복붙랩은 viewBox 기준을 확인하고 색상을 currentColor로 바꿔 CSS color에 맞춰 재사용하기 쉽게 정리합니다.
라이선스 걱정 없이 써도 되나요?
복붙랩은 MIT, Apache 2.0, ISC, CC0 1.0, CC BY 4.0 등 상업용 사용이 가능한 라이선스의 아이콘만 노출합니다. 저작자표시가 필요한 CC BY 계열(Font Awesome Free)은 복사 코드에 출처 주석이 자동으로 포함되므로 그대로 붙여넣기만 하면 라이선스 조건이 충족됩니다.
External icon library
손그림 아이콘이 필요하다면 Koboyo를 열어보세요
Koboyo 공식 사이트에서 아이콘을 찾아 사용하세요. 복붙랩은 Koboyo 아이콘 파일을 저장하거나 검색·다운로드 기능으로 제공하지 않습니다.