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

홈페이지제작

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

Material Symbols & Material Icons 활용하기

1. 구글 아이콘이란?

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

• 무료 사용 가능 (상업적 이용 포함)
• 가볍고 빠른 로딩 속도
• 다양한 스타일 (Outlined, Rounded, Sharp)
• SVG 및 폰트 형식 지원

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. 활용 사례

• 웹사이트 UI: 메뉴, 버튼, 네비게이션 바
• 앱 디자인: 홈, 설정, 알림 아이콘
• 문서 작업: 프레젠테이션, 보고서 시각화

7. 마무리

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

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

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