J2ong 님의 블로그

Google Font Icon을 활용한 아이콘 사용법 (React) 본문

개인 프로젝트

Google Font Icon을 활용한 아이콘 사용법 (React)

J2ong 2025. 4. 23. 15:44

안녕하세요!
React 프로젝트에서 다양한 아이콘을 간편하게 활용할 수 있는 방법 중 하나는 Google Font Icon을 사용하는 것입니다.
이 글에서는 Google Font Icon을 사용하는 이유부터, 실제 적용하는 방법까지 단계별로 소개하겠습니다.

📌 Google Font Icon을 사용하는 이유

  • 간편한 사용: 별도의 패키지 설치 없이 <link> 한 줄로 바로 사용 가능
  • 다양한 디자인: Filled, Outlined, Rounded, Sharp, Two Tone 등 여러 스타일 지원
  • 경량성: SVG보다 가볍고, 페이지 로딩 속도에 부담이 적음
  • 디자인 일관성: Material Design 기반으로 설계되어 UI 전체의 통일성을 유지하기 쉬움

 

 

📌  Google Font Icon 적용 방법 (React)

1. Google Font Icon 접속

 

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

fonts.google.com

 

2. 링크 태그 복사

Outlined 스타일을 사용하려면 아래 링크를 index.html에 추가합니다.

  • public/index.html의 <head> 안에 추가
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

 

3. 원하는 아이콘 선택 및 코드 복사

예) Search 아이콘

  • 아이콘을 선택하면 Inserting the icon 항목에서 아래와 같은 HTML 코드가 제공됩니다.
    • React에서는 class 대신 className을 사용 
<span className='material-symbols-outlined'>
search
</span>
  • 스타일을 더 디테일하게 다루고 싶다면 weight, grade, optical size 등의 속성도 CSS로 조절 가능
  • 크기 조정은 일반 텍스트와 동일하게 font-size로 조절
  • 커스텀 CSS와 함께 쓰면 테마 일관성도 확보할 수 있음

 

 

이렇게 Google Font Icon을 활용하면 프로젝트의 아이콘 활용이 훨씬 쉬워집니다.
React 프로젝트에 빠르고 간단하게 아이콘을 적용해보고 싶다면 이 방법을 꼭 추천드립니다!

오늘도 즐거운 개발 되시길 바랍니다!

'개인 프로젝트' 카테고리의 다른 글

크롬 확장 프로그램 개발 가이드  (2) 2025.05.03
Spring + React 한글 초성 검색 기능 구현하기  (1) 2025.04.26
Firebase Storage를 활용한 파일 업로드 구현 방법  (2) 2025.04.22
Spring + React 파일 업로드 통합 구현 (korean-romanizer 라이브러리를 활용한 한글 파일명 오류 해결)  (1) 2025.04.21
Github Actions와 Cloudtype을 활용한 CI/CD 자동 배포 설정  (0) 2025.04.20
'개인 프로젝트' Related Articles more