무료 아이콘을 찾는 일은 대개 사이트를 찾는 일로 끝난다. 어디가 공짜인지, 출처를 적어야 하는지까지 확인하면 다 한 것 같다. 그런데 진짜 문제는 그다음에 온다. 세 군데서 받아 한 화면에 놓으면 어딘가 어긋나 보인다.
Phosphor를 들여다보다가 이 이야기를 확인해 보기로 했다. 하트 아이콘 하나를 다섯 라이브러리에서 받아 같은 크기로 놓고 픽셀을 셌다. 결과부터 말하면, 스펙이 똑같은 것들끼리도 다르게 보였다.
같은 96px 상자에 넣었는데 크기가 달랐다
다섯 개를 96px 상자에 하나씩 렌더한 뒤, 그림이 실제로 차지한 폭과 검은 픽셀 비율을 셌다. 2026년 8월 3일에 각 저장소에서 받은 파일 기준이다.
| 라이브러리 | 실제 그림 폭 | 96px 대비 | 잉크 비율 |
|---|---|---|---|
| Phosphor | 84px | 88% | 15.4% |
| Lucide | 88px | 92% | 20.4% |
| Feather | 92px | 96% | 21.4% |
| Tabler | 80px | 83% | 18.5% |
| Bootstrap Icons | 96px | 100% | 17.9% |
같은 상자를 줬는데 그림 폭이 80px에서 96px까지 갈렸다. 태블러와 부트스트랩 사이가 17퍼센트포인트다. 나란히 놓으면 하나가 혼자 커 보인다는 뜻이고, 이건 취향 문제가 아니라 잰 값이다.
잉크 비율은 선이 얼마나 굵어 보이는지에 해당한다. 15.4%에서 21.4%까지, 제일 가는 것과 제일 굵은 것이 1.4배 차이다. 두 값이 겹치면 어긋남이 눈에 띈다.
스펙이 같은데 왜 다르게 보이나
여기서 예상이 틀렸다. 파일을 열어 보면 Lucide, Feather, Tabler는 셋 다 똑같이 24 격자에 선 굵기 2다. 숫자가 같으니 섞어 써도 될 것 같았다.
그런데 잰 값은 갈렸다. 잉크 비율이 20.4%, 21.4%, 18.5%고 폭은 92%, 96%, 83%다. 같은 격자에 같은 선 굵기를 쓰면서도 그림을 격자 안에 얼마나 크게 앉히느냐가 다르기 때문이다. 여백을 얼마나 두느냐는 스펙에 안 적힌다.
그래서 라이브러리 비교표를 읽는 것으로는 판단이 안 된다. 후보를 골랐으면 같은 크기로 나란히 놓고 한 번 보는 편이 빠르다. 브라우저에 세 개를 띄우는 데 1분이면 된다.
선으로 그린 아이콘과 면으로 그린 아이콘은 뭐가 다른가
코드에서 굵기를 바꿀 수 있느냐가 다르다. 선으로 그린 아이콘은 CSS로 굵기를 조절할 수 있고, 면으로 그린 아이콘은 안 된다.
Lucide, Feather, Tabler는 선이다. CSS에서 굵기를 지정하면 그대로 바뀐다. 조금 가늘게 하고 싶으면 값을 낮추면 된다.
Phosphor와 부트스트랩 아이콘은 면이다. 선 굵기 속성을 줘도 아무 일도 일어나지 않는다. 이게 사람을 헷갈리게 하는 지점이다. 오류가 나지 않고 조용히 무시된다. 라이브러리를 섞어 쓰다가 “왜 얘만 안 바뀌지”로 시간을 쓰게 되는 자리가 여기다.
어느 쪽이 낫다는 이야기는 아니다. 맞바꿈이다. 선 방식은 하나를 주고 아무 굵기로나 바꾸게 한다. 면 방식은 굵기마다 사람이 손으로 다듬은 파일을 따로 준다. 가늘게 만든 선이 어색해지는 구간을 직접 조정할 수 있다는 뜻이다.
Phosphor는 굵기를 파일로 준다
Phosphor가 면 방식을 택한 대신 내놓은 답이 굵기 여섯 벌이다. Thin, Light, Regular, Bold, Fill, Duotone. 같은 아이콘의 여섯 가지 굵기가 각각 다른 파일로 들어 있다.
개수는 두 가지로 나온다. 공식 소개문에는 1,248개라고 적혀 있는데, 오늘 저장소의 파일을 세어 보니 굵기마다 1,512개씩 있었다. 여섯 굵기를 합치면 파일이 9,072개다. 소개문에 “and counting”이 붙어 있으니 숫자가 뒤따라오지 못한 쪽으로 보인다. 어느 쪽이 맞다고 단정하지 않고 둘 다 적어 둔다.
중요한 건 9,072라는 큰 숫자가 아이콘 9천 종이 아니라는 점이다. 1,512개를 여섯 번 그린 것이다. 아이콘 사이트가 내세우는 개수를 읽을 때 늘 확인해야 하는 지점이 이거다. 종류가 많은 것인지, 같은 것을 여러 벌로 준 것인지.
라이선스는 MIT다. 출처를 적을 의무가 없고 상업적으로 써도 된다. React, Vue, Flutter, Figma용 배포판이 따로 있어서 코드에서 불러 쓰기도 편하다.
플래티콘은 왜 다른 물건인가
한 팀이 그린 한 벌이 아니라 여러 작가의 아이콘 팩을 모아 둔 장터이기 때문이다. 한국에서 아이콘을 찾으면 대개 플래티콘부터 열고, 실제로 검색량도 가장 많다.
그래서 쓰임새가 정반대다. 검색하면 원하는 그림이 거의 다 나온다는 게 장터의 강점이다. 대신 두세 개를 골라 한 화면에 놓으면 서로 다른 사람이 그린 티가 난다. 위 표에서 본 어긋남이 라이브러리 사이가 아니라 한 사이트 안에서 생기는 셈이다.
무료로 쓸 때 출처를 적어야 하는 문제도 있는데, 그 이야기는 무료 이미지와 라이선스를 정리한 글에 적어 뒀으니 여기서 다시 풀지 않는다. 요점만 옮기면 플래티콘 무료분은 표기가 필요하고 MIT 계열은 필요 없다.
정리하면 쓰임이 갈린다. 딱 하나가 필요한데 어디에도 없는 그림이면 장터가 낫다. 화면 하나를 채울 아이콘 스무 개가 필요하면 한 벌을 고르는 편이 맞다. 덜 알려진 리소스 여덟 곳을 정리했을 때도 결론이 비슷했다.
16px에서 뭉개지는 아이콘은 무엇이 다른가
격자 대비 선 굵기가 다르다. 이 블로그의 파비콘을 만들면서 그걸 겪었는데, 헤더에 쓰던 책 마크를 그대로 줄였더니 16px에서 뭉갰다.
원본은 34 격자에 선 굵기 1.5였다. 16px로 줄이면 선이 0.7px가 된다. 화면의 물리 픽셀보다 얇으니 회색으로 뭉개진다. 그래서 512 격자에 선 굵기 46으로 다시 그렸다. 16px에서 약 1.4px가 되는 값이다. 책 글리프 자체도 폭을 40%에서 60%로 키웠다.
이 이야기를 붙이는 이유는 위 표의 숫자가 어디에 쓰이는지 보여주기 때문이다. 잉크 비율이 낮은 라이브러리는 큰 화면에서 우아한데 작은 크기에서 먼저 사라진다. 아이콘을 16px이나 20px로 쓸 자리가 있으면 그 크기로 먼저 띄워 보고 골라야 한다.
워드프레스에 넣을 때 걸리는 것
SVG를 본문에 그대로 붙여 넣으려다 막히는 경우가 있다. 워드프레스는 unfiltered_html 권한이 없는 사용자의 글에서 SVG 태그를 지운다.
직접 확인해 봤다. 앞뒤로 문단을 하나씩 두고 그 사이에 SVG를 넣어 저장한 뒤 다시 열어 보니 문단 두 개만 남아 있었다. 오류도 경고도 없었다. 그냥 없어졌다.
기여자나 작성자 권한으로 글을 쓰는 환경이면 이 필터에 걸린다. 방법은 두 가지다. 아이콘을 PNG나 SVG 파일로 미디어에 올려 이미지 태그로 넣거나, 아이콘 폰트 방식을 쓰는 것이다. Phosphor는 CSS 한 줄로 불러 쓰는 웹폰트 배포판이 있어서 후자가 쉽다. 이 글의 비교 이미지도 SVG를 그대로 넣지 못해 PNG로 만들어 올린 것이다.
고를 때 순서
세 가지만 보면 된다. 첫째, 선인지 면인지. 코드에서 굵기를 조절할 생각이면 선 방식을 고른다. 둘째, 쓸 자리에서 제일 작은 크기로 띄워 본다. 셋째, 필요한 아이콘이 그 한 벌 안에 다 있는지 검색해 본다. 없으면 결국 다른 데서 받게 되고, 그 순간 위의 어긋남이 시작된다.
마지막으로 밝힐 것이 있다. 위 숫자는 하트 아이콘 하나를 잰 값이지 라이브러리 전체의 평균이 아니다. 다른 아이콘에서는 순서가 조금 바뀔 수 있다. 그리고 나는 Phosphor를 실제 프로젝트에 넣어 본 적이 없다. 잰 것은 파일과 화면에 그려진 결과뿐이다. 다만 재는 방법 자체는 그대로 따라 할 수 있으니, 후보를 정했으면 같은 크기로 나란히 놓고 한 번 보시길 권한다.