SVG 아이콘 색상 바꾸기가 헷갈리는 이유는 아이콘이 어떻게 그려졌는지(채움형 vs 외곽선형)와 어떻게 삽입했는지에 따라 방법이 달라지기 때문입니다. 쉬운 것부터 수동적인 것까지, 실제로 통하는 4가지를 정리했습니다.
1. currentColor 트릭 (인라인 SVG에 최적)
대부분의 최신 아이콘 세트(Lucide, Heroicons, Bootstrap Icons)는 fill="currentColor" 또는 stroke="currentColor"를 씁니다. 이 키워드는 "요소의 CSS 텍스트 색상을 따른다"는 뜻이라, color만 지정하면 아이콘 색이 바뀝니다:
.icon { color: #ff5500; } /* the SVG follows the text color */버튼 안의 아이콘이 버튼 글자색과 자동으로 맞춰지는 것도 이 때문입니다. 만약 색이 안 바뀐다면, 마크업을 열어 currentColor 대신 색이 하드코딩돼 있는지 확인하세요(3번 참고).
2. fill 또는 stroke 직접 지정
채움형 아이콘은 fill, 외곽선형 아이콘은 stroke를 씁니다. 맞는 쪽을 지정하세요:
.icon-filled { fill: #2563eb; }
.icon-outline { stroke: #2563eb; }흔한 실수: 외곽선형 아이콘에 fill을 (또는 그 반대로) 줘서 아무 변화가 없는 경우. fill이 안 먹으면 stroke 기반 아이콘일 가능성이 크니 stroke를 시도하세요.
3. SVG 마크업 직접 수정
아이콘에 색이 하드코딩돼 있다면 원본에서 바꾸세요. .svg를 열어 색상 값을 교체하거나, currentColor로 바꿔 CSS가 제어하도록 하면 됩니다:
<!-- before -->
<path fill="#000000" d="..." />
<!-- after -->
<path fill="currentColor" d="..." />4. 도구 사용 (코드 없이)
색을 입힌 에셋만 넘기면 된다면 비주얼 에디터가 가장 빠릅니다. Icony에서는 아이콘을 고르고 색상(또는 스포이드/HEX 입력)을 선택해 SVG·PNG로 바로 내보낼 수 있습니다 — 마크업 수정이 필요 없습니다. 결과를 복붙 가능한 SVG나 React 컴포넌트로 복사할 수도 있습니다.