상세 컨텐츠

본문 제목

홈페이지 제작시 무료로 사용하는 아이콘 세상, Google Icons (Material Symbols) 완벽 가이드

홈페이지 제작/CSS

by WEBsiting 2025. 6. 6. 07:21

본문

 

홈페이지를 만들거나 앱을 디자인할 때 ‘한눈에 보기 좋은 직관적인 UI’를 만드는 데 빠질 수 없는 것이 바로 아이콘입니다.
텍스트만으로는 부족한 정보를 간단한 그림 한 장으로 표현해주는 아이콘은 사용자 경험(UX)을 높이는 데 중요한 역할을 하죠.

그래서 오늘은 구글에서 무료로 제공하는 Google Icons, 정확히는 Material Symbols에 대해 소개하고,
실제 웹사이트에서 적용하는 방법까지 예제와 함께 알려드릴게요!

🔎 Google Icons (Material Symbols)란?

Google Icons는 구글이 제공하는 Material Design 기반의 아이콘 라이브러리입니다.
수천 개의 고품질 아이콘을 무료로 제공하며, 개발자와 디자이너 모두 쉽게 사용할 수 있도록 되어 있어요.

  • 웹, 모바일, 앱 등 어떤 환경에서도 사용 가능
  • 크기, 굵기, 채우기 스타일 등 자유롭게 조절 가능
  • SVG 다운로드, 웹폰트 형태로 삽입 가능
  • 상업적 사용도 무료 (오픈소스 라이선스)

🎨 아이콘 스타일 예시

Google Icons는 한 아이콘에도 다양한 스타일이 있습니다.

  • outlined : 외곽선만 있는 깔끔한 스타일
  • filled : 아이콘 내부가 채워진 기본 스타일
  • rounded : 둥근 모서리 처리된 부드러운 스타일
  • sharp : 날카롭고 강한 인상
  • two-tone : 2가지 색을 조합한 멋진 효과

👉 예시로 home 아이콘은 위 모든 스타일로 사용할 수 있습니다.

 

Google Icons (Material Symbols)

 

🛠️ Google Icons 사용 방법

① 웹폰트 방식으로 사용하기

  1. 아래 링크를 <head> 태그 안에 삽입:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
  1. 아이콘 사용:
<span class="material-symbols-outlined">home</span>

📝 위처럼 "material-symbols-outlined" 클래스를 넣고 텍스트에 아이콘 이름을 입력하면 해당 아이콘이 나타납니다.

② 스타일 변경 (Filled, Rounded 등)

다른 스타일을 사용하고 싶다면 링크와 클래스 이름을 바꿔주세요.

<!-- Filled 아이콘 -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Filled" rel="stylesheet" />
<span class="material-symbols-filled">favorite</span>

<!-- Rounded 아이콘 -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
<span class="material-symbols-rounded">search</span>

③ 스타일 속성 추가 (두께, 채도 등)

CSS를 활용하면 아이콘의 두께(weight), 채도(grade), 크기(optical size) 등을 자유롭게 조절할 수 있습니다.

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,       /* 0: 외곽선, 1: 채움 */
    'wght' 400,     /* 굵기: 100~700 */
    'GRAD' 0,       /* 채도: -25~200 */
    'opsz' 48;      /* 크기: 권장 20~48 */
}

✅ SVG로 다운로드해 사용하기

Google Fonts Icons 사이트에서 원하는 아이콘을 클릭하면
SVG 파일로 다운로드할 수 있어 포토샵, 일러스트, 피그마 등 디자인 툴에서도 사용 가능합니다.

📁 예제 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Google Icons 예제</title>
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
  <style>
    .material-symbols-outlined {
      font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
      font-size: 48px;
      color: #3f51b5;
    }
  </style>
</head>
<body>
  <h3>Google Icons 사용 예제</h3>
  <span class="material-symbols-outlined">home</span>
  <span class="material-symbols-outlined">search</span>
  <span class="material-symbols-outlined">settings</span>
</body>
</html>

 

💡  왜 Google Icons를 써야 할까?

  • ✅ 무료이면서도 디자인 퀄리티가 뛰어남
  • ✅ 다양한 스타일과 유연한 커스터마이징
  • ✅ 웹 성능 최적화에도 유리
  • ✅ SVG/폰트 방식 모두 지원

웹디자인을 깔끔하게 완성하고 싶은 분,
개발 중인 프로젝트에 아이콘을 빠르게 적용하고 싶은 분이라면
Google Icons는 최고의 선택입니다!

👉 지금 바로 Google Fonts Icons 에서 원하는 아이콘을 찾아보세요!

 

https://paged.kr

 

페이지디 반응형 홈페이지 제작 서비스

페이지디 반응형 홈페이지 제작 서비스, 반응형 홈페이지 제작 전문 페이지디!

paged.kr

 

'홈페이지 제작 > CSS' 카테고리의 다른 글

CSS란? 홈페이지 만드는 사람들이 꼭 알아야 할 기본 지식  (1) 2025.06.08
무료로 즐기는 웹폰트의 세계, Google Fonts 완전 정복!  (2) 2025.06.05
홈페이지 제작 시 세련된 한글 폰트 사용하기: Noto Sans KR 적용 방법 & 소개  (0) 2025.06.05
CSS로 텍스트에 그라데이션 주는 방법 (with 예제 코드)  (1) 2025.06.05
CSS로 배경에 그라데이션 주는 방법 (with 예제 코드)  (0) 2025.06.05

관련글 더보기

Top

티스토리툴바