구글 아이콘 사용법 | Material Symbols & Icons 가이드

최종 업데이트
2025-08-19
Menu

News&Insights.

홈페이지제작 지식

디지털 변화와 함께 성장하는 웹 디자인

홈페이지제작

구글 아이콘 사용법 | Material Symbols & Icons 가이드

Material Symbols & Material Icons 활용하기

profile_image
작성자 티로그
작성일Updated on: 2025-08-19 10:54:05
구글 아이콘 사용법 | Material Symbols & Icons 가이드

1. 구글 아이콘이란?

구글 아이콘은 구글에서 무료로 제공하는 벡터 기반 아이콘 모음으로, 웹사이트나 앱, 문서 디자인 등 다양한 곳에 활용할 수 있습니다. 대표적으로 Material SymbolsMaterial Icons 두 가지 스타일이 있으며, 2,000개 이상의 아이콘을 무료로 사용할 수 있습니다.

2. CDN으로 아이콘 불러오기

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<span class="material-symbols-outlined">home</span>

위 코드를 적용하면 home 아이콘이 표시됩니다.

3. 스타일 변경하기

<span class="material-symbols-outlined" style="font-size:48px; color:#4285F4;">
  search
</span>
search

👉 크기는 font-size, 색상은 color 속성으로 쉽게 변경할 수 있습니다.

4. 다양한 아이콘 스타일

구글 아이콘은 Outlined, Rounded, Sharp 3가지 스타일을 지원합니다.

<span class="material-symbols-rounded">favorite</span>
<span class="material-symbols-sharp">delete</span>

favorite delete

5. SVG 아이콘 다운로드

  1. Google Fonts Icons 접속
  2. 원하는 아이콘 클릭 → 다운로드
  3. 프로젝트 assets/icons/ 폴더에 저장
<img src="icons/home.svg" alt="홈 아이콘" width="32" height="32">

6. 활용 사례

7. 마무리

구글 아이콘은 무료이면서도 직관적인 UI를 제공하는 강력한 리소스입니다. 특히 CDN 방식을 사용하면 몇 줄의 코드만으로도 수천 개의 아이콘을 쉽게 불러와 활용할 수 있습니다.

👉 공식 아이콘 사이트: Google Fonts Icons

연관 포스팅

홈페이지제작 관련 게시물 바로가기