디지털 변화와 함께 성장하는 웹 디자인
Material Symbols & Material Icons 활용하기
구글 아이콘은 구글에서 무료로 제공하는 벡터 기반 아이콘 모음으로, 웹사이트나 앱, 문서 디자인 등 다양한 곳에 활용할 수 있습니다. 대표적으로 Material Symbols과 Material Icons 두 가지 스타일이 있으며, 2,000개 이상의 아이콘을 무료로 사용할 수 있습니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
<span class="material-symbols-outlined">home</span>
위 코드를 적용하면 home 아이콘이 표시됩니다.
<span class="material-symbols-outlined" style="font-size:48px; color:#4285F4;">
search
</span>
search
👉 크기는 font-size
, 색상은 color
속성으로 쉽게 변경할 수 있습니다.
구글 아이콘은 Outlined, Rounded, Sharp 3가지 스타일을 지원합니다.
<span class="material-symbols-rounded">favorite</span>
<span class="material-symbols-sharp">delete</span>
favorite delete
assets/icons/
폴더에 저장<img src="icons/home.svg" alt="홈 아이콘" width="32" height="32">
구글 아이콘은 무료이면서도 직관적인 UI를 제공하는 강력한 리소스입니다. 특히 CDN 방식을 사용하면 몇 줄의 코드만으로도 수천 개의 아이콘을 쉽게 불러와 활용할 수 있습니다.
👉 공식 아이콘 사이트: Google Fonts Icons