웹 페이지에 아이콘을 넣는 단 하나의 "정답"은 없습니다 — 색을 바꿔야 하는지, 아이콘이 몇 개인지, 어떤 스택인지에 따라 달라집니다. 거의 모든 경우를 커버하는 3가지를 소개합니다.
1. 인라인 SVG (제어력 최고)
SVG 마크업을 HTML에 그대로 붙여넣습니다. 아이콘이 DOM의 일부가 되므로 CSS로 스타일하고, currentColor로 색을 바꾸고, 애니메이션을 줄 수 있습니다.
<button class="btn">
<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" width="20">
<path d="M5 12h14M12 5l7 7-7 7" />
</svg>
Next
</button>- 장점: 완전한 CSS 제어, 색 변경·애니메이션 가능, 추가 요청 없음.
- 단점: 같은 아이콘을 많이 반복하면 마크업이 장황해짐.
2. <img> 태그 (가장 단순)
.svg(또는 .png) 파일을 일반 이미지처럼 참조합니다. 마크업은 깔끔하지만 아이콘이 고립돼 — <img>로 넣은 SVG는 CSS로 색을 바꿀 수 없습니다.
<img src="/icons/arrow-right.svg" alt="Next" width="20" height="20" />- 장점: 매우 간단, 캐시 가능, HTML이 깔끔.
- 단점: CSS 색 변경 불가, 아이콘마다 네트워크 요청 1번.
3. 컴포넌트/아이콘 폰트 라이브러리 (규모에 최적)
프레임워크를 쓴다면 아이콘 라이브러리(Lucide, Heroicons, Tabler …)가 일관된 props를 가진 트리셰이킹 컴포넌트를 제공합니다:
import { ArrowRight } from 'lucide-react';
<button>Next <ArrowRight size={20} /></button>- 장점: 일관된 API, 쉬운 테마, 임포트한 아이콘만 번들에 포함.
- 단점: 의존성 추가; 아이콘 하나엔 과함.
설치 없이 아이콘 몇 개만 필요한가요? Icony로 아이콘을 고르고 색을 입혀 인라인 SVG나 React 컴포넌트로 복사한 뒤 프로젝트에 바로 붙여넣으세요.
무엇을 골라야 할까?
- 아이콘 몇 개 + 완전한 제어가 필요 → 인라인 SVG.
- 정적 이미지 + 가장 단순한 마크업 → <img>.
- 아이콘이 가득한 앱 전체 → 컴포넌트 라이브러리.