SNS 로고를 넣거나 전화, 이메일 같은 연락처 아이콘을 표시할 때, 또는 사진 대신 가벼운 라인 아이콘으로 UI를 정리하고 싶을 때 아이콘을 찾게 됩니다. 그런데 막상 찾아보면 폰트어썸처럼 오래 쓰인 아이콘 폰트도 있고, 루시드(Lucide)나 타블러(Tabler)처럼 최근 React, Vue 프로젝트에서 더 많이 보이는 SVG 라이브러리도 있습니다. 둘은 적용 방식부터 다르기 때문에, 사이트 성격에 따라 선택이 갈립니다.
아이콘 폰트와 SVG 아이콘의 차이
아이콘 폰트는 글자처럼 동작하는 폰트 파일입니다. CSS 클래스 하나만 추가하면 아이콘이 표시되고, 색상이나 크기도 텍스트처럼 조정할 수 있어 적용이 단순합니다. 반면 SVG 아이콘은 이미지 형태의 벡터 파일로, 필요한 아이콘만 골라 코드에 직접 넣는 방식입니다.
이 차이가 실제로 영향을 주는 부분은 로딩 속도와 화면 표시 품질입니다. 아이콘 폰트는 몇백 개 아이콘이 들어 있는 폰트 파일 전체를 불러오기 때문에, 실제 쓰는 아이콘이 몇 개뿐이어도 파일 용량은 그대로입니다. 폰트 파일이 늦게 로드되면 텍스트처럼 취급되는 아이콘이 잠깐 깨진 사각형으로 보이는 현상도 생길 수 있습니다. SVG는 사용하는 아이콘만 불러오므로 용량이 가볍고, 해상도와 무관하게 선이 또렷합니다. 다만 아이콘 수가 많아지면 마크업에 SVG 코드가 하나씩 들어가야 해서 관리할 파일이 늘어난다는 단점이 있습니다.
오랜 기간 쓰여온 아이콘 폰트
워드프레스 테마나 부트스트랩 기반 사이트, 또는 코드를 직접 다루지 않고 HTML 클래스만 추가해 아이콘을 넣고 싶은 경우라면 아이콘 폰트 쪽이 여전히 적용하기 쉽습니다.
아이콘 폰트 중에는 특정 디자인 콘셉트에 맞춘 세트도 있습니다. 예를 들어 픽세덴 스트로크 아이콘은 플랫 라인 스타일을 일관되게 적용하고 싶을 때 골라 쓰기 좋습니다.
아이콘 폰트 파일 안에 어떤 아이콘이 들어 있는지 미리 확인하려면 폰트드롭 서비스를 이용하면 편리합니다.
최근 많이 쓰이는 SVG 아이콘
React, Vue 같은 프레임워크로 제작하는 사이트가 늘면서 SVG 아이콘을 컴포넌트 형태로 바로 불러오는 방식이 자리잡았습니다. 필요한 아이콘만 선택해 가져오는 트리쉐이킹(tree shaking)이 가능해 번들 용량 관리에 유리하다는 점이 이 흐름이 자리잡은 이유입니다.
상황별로 정리하면
| 상황 | 적합한 방식 |
|---|---|
| 코드를 직접 다루지 않고 클래스 추가만으로 적용 | 폰트어썸, XE아이콘, 부트스트랩 아이콘 |
| React, Vue 기반 사이트로 번들 용량을 관리해야 함 | 루시드, 헤로아이콘, 타블러 |
| 네이버, 카카오 같은 국내 서비스 아이콘이 필요함 | XE아이콘 |
| 아이콘 수가 많이 필요한 대시보드, 관리자 화면 | 타블러, 폰트어썸 |
| 구글 디자인 가이드를 따르는 사이트 | 머티리얼 심볼 |
한 사이트 안에서 아이콘 스타일이 섞이면 디자인이 산만해 보이기 쉽습니다. 제작 방식이 정해졌다면 그 안에서 한 가지 아이콘 체계를 고르고, 이후 추가되는 아이콘도 같은 체계 안에서 찾는 편이 정리된 인상을 줍니다.
