아이콘 라이브러리 — 43,768개 중에서 고르고, 쓸 수 있는지 확인하기
27개 묶음의 오픈소스 아이콘을 한자리에서 찾습니다. 색을 바꾸고 돌려서 SVG 나 PNG 로 가져갈 수 있고, 각 묶음의 라이선스가 함께 표시됩니다 — 출처를 밝혀야 쓸 수 있는 것들이 섞여 있기 때문입니다.
아이콘은 대개 묶음 단위로 만들어집니다. 한 사람이나 한 팀이 같은 굵기와 같은 모서리 처리로 수백 개를 그려 놓은 것입니다. 그래서 여러 묶음에서 하나씩 가져다 쓰면 화면이 어수선해집니다. 되도록 한 묶음 안에서 고르세요.
여기서는 묶음별로 둘러보거나 전체에서 이름으로 검색할 수 있습니다. 고른 아이콘은 색·크기·회전·배경을 바꿔서 SVG 코드로 복사하거나 PNG 로 내려받을 수 있고, 리액트를 쓴다면 import 문을 그대로 복사할 수도 있습니다.
라이선스가 다 같지 않습니다
오픈소스라는 말이 '아무 조건 없이' 를 뜻하지는 않습니다. 절반 이상은 MIT 라 조건 없이 상업적으로 쓸 수 있지만, 일부는 출처를 밝혀야 합니다.
출처 표기가 필요한 묶음은 목록에서 따로 표시됩니다. 폰트 어썸, 게임 아이콘스, 아이코문 프리, VS Code 아이콘이 여기 해당하고 합치면 8,600개가 넘습니다. 상업적으로 쓸 수 없다는 뜻이 아니라, 쓸 때 만든 쪽을 밝혀야 한다는 뜻입니다.
표기 방법은 라이선스마다 다르지만 대개 페이지 하단이나 크레딧에 이름과 라이선스를 적으면 됩니다. 정확한 조건은 각 묶음의 공식 문서를 확인하세요 — 이 도구는 어떤 라이선스인지 알려 줄 뿐, 법률 조언을 하지는 않습니다.
라이선스별 분포
react-icons 패키지가 밝힌 라이선스를 그대로 옮겼습니다.
| 라이선스 | 묶음 | 아이콘 | 출처 표기 |
|---|---|---|---|
| MIT | 15개 | 22,089 | 필요 없음 |
| Apache-2.0 | 3개 | 7,836 | 필요 없음 |
| CC BY 4.0 | 4개 | 4,587 | 필요함 |
| CC BY 3.0 | 1개 | 4,040 | 필요함 |
| CC0-1.0 | 1개 | 3,161 | 필요 없음 (공용) |
| ISC | 1개 | 1,548 | 필요 없음 |
| MPL-2.0 | 1개 | 288 | 필요 없음 |
| SIL OFL 1.1 | 1개 | 219 | 필요함 |
SVG 로 쓸 것인가 PNG 로 쓸 것인가
SVG 는 그림을 좌표로 적어 둔 것이라 아무리 키워도 흐려지지 않습니다. 색도 CSS 로 바꿀 수 있어서 다크 모드에 맞추기 쉽습니다. 웹에서 쓸 거라면 거의 항상 SVG 가 맞습니다.
PNG 가 필요한 자리는 정해져 있습니다. SVG 를 못 읽는 곳 — 오래된 문서 편집기, 일부 메신저, 이메일 본문 — 이거나, 파비콘처럼 정해진 픽셀 크기가 필요한 경우입니다. 이 도구는 두 형식 모두 내보냅니다.
고를 때 도움이 되는 것
- •한 묶음 안에서 고르세요. 굵기와 모서리가 맞아야 나란히 놓았을 때 어색하지 않습니다.
- •채우기(fill)와 선(outline) 방식이 섞이면 눈에 띕니다. 한쪽으로 통일하세요.
- •작게 쓸 아이콘은 실제 크기로 줄여서 확인하세요. 24픽셀에서 안 보이는 디테일은 없는 것과 같습니다.
- •브랜드 로고는 Simple Icons 묶음에 3,161개 있습니다. 다만 로고는 아이콘 라이선스와 별개로 각 회사의 상표 규정을 따라야 합니다.
- •리액트라면 import 문을 복사하는 편이 SVG 를 붙여넣는 것보다 관리하기 쉽습니다.
자주 묻는 질문
가장 큰 묶음은 무엇인가요?
포스포 아이콘스가 7,488개로 가장 많고, 태블러 5,237개, 머티리얼 디자인 4,341개 순입니다. 앞의 둘은 MIT 라 조건이 없고, 머티리얼은 Apache-2.0 입니다.
출처를 어떻게 밝히나요?
보통 페이지 하단이나 별도 크레딧 페이지에 묶음 이름과 라이선스를 적습니다. CC BY 는 만든 이를 밝히라는 조건이지 사용을 막는 조건이 아닙니다.
색을 바꿔도 되나요?
됩니다. 여기 있는 라이선스는 모두 수정을 허용합니다. 다만 브랜드 로고는 회사마다 색과 비율을 바꾸지 말라는 규정이 있는 경우가 많습니다.
아이콘이 서버로 전송되나요?
아니요. 아이콘 데이터는 브라우저 안에서 처리되고 만든 결과도 여기서 바로 내려받습니다.