Flutter Icon 모음

Flutter에서 자주 사용하는 아이콘 목록
각 아이콘은 실제 Flutter 코드 상에서 어떻게 보일지 나타내며, Icons 클래스 기준입니다.

기능 분류	아이콘	아이콘 이름	용도 예시
네비게이션	🏠	Icons.home	홈 이동 버튼
	🔙	Icons.arrow_back	뒤로 가기
	📋	Icons.menu	햄버거 메뉴
	⋮	Icons.more_vert	옵션 메뉴 (세로 점 3개)
	…	Icons.more_horiz	옵션 메뉴 (가로 점 3개)
사용자 계정 관련	👤	Icons.person	사용자 정보
	🧑‍💼	Icons.account_circle	계정 아이콘
	🔐	Icons.login	로그인 버튼
	🔓	Icons.logout	로그아웃 버튼
작업/기능	➕	Icons.add	추가하기 버튼
	✏️	Icons.edit	수정 버튼
	🗑️	Icons.delete	삭제 버튼
	✅	Icons.check	완료/체크 표시
	❌	Icons.close	닫기/취소 버튼
커뮤니케이션	💬	Icons.message	메시지
	📧	Icons.email	이메일
	📞	Icons.phone	전화 아이콘
미디어 관련	🖼️	Icons.image	이미지
	📷	Icons.camera_alt	카메라 아이콘
	▶️	Icons.play_arrow	재생 버튼
	⏸️	Icons.pause	일시정지 버튼
	🔊	Icons.volume_up	소리 키우기
날짜/시간 관련	📅	Icons.calendar_today	달력 아이콘
	⏰	Icons.access_time	시간 표시
위치	📍	Icons.location_on	위치 표시
검색	🔍	Icons.search	검색창 아이콘
설정/알림	⚙️	Icons.settings	설정 화면
	🔔	Icons.notifications	알림 아이콘
기타	⭐	Icons.star	즐겨찾기, 별점
	❤️	Icons.favorite	하트/좋아요
	🔗	Icons.share	공유 버튼
	🔒	Icons.lock	잠금/보안

💡 위 아이콘 미리보기는 Flutter 위젯이 아닌 텍스트 이모지 기반이므로, 실제 앱에서는 Icon(Icons.아이콘명) 형태로 렌더링됨.

 

추가로 아이콘 명칭 찾기 : https://api.flutter.dev/flutter/material/Icons-class.html

Icons class - material library - Dart API

 

+

🛠️ Flutter에서  SVG 및 커스텀 아이콘(  MaterialSymbols, Font Awesome, MaterialSymbols, 사용자 제작 아이콘 등)  을 사용하는 법.

---

✅ 1. SVG 아이콘 사용하기 (flutter_svg 패키지)

📦 패키지 설치

# pubspec.yaml
dependencies:
  flutter_svg: ^2.0.7  # 버전은 최신으로 확인

📁 SVG 파일 준비

assets/icons/my_icon.svg 같은 경로로 SVG 파일을 프로젝트에 저장하세요.

flutter:
  assets:
    - assets/icons/

📌 사용 방법

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/my_icon.svg',
  width: 24,
  height: 24,
  color: Colors.black,
)

SvgPicture.network(...)으로 URL 경로의 SVG도 사용 가능.

---

✅ 2. Font Awesome 아이콘 사용하기 (font_awesome_flutter)

📦 패키지 설치

dependencies:
  font_awesome_flutter: ^10.7.0  # 최신 버전 확인

📌 사용 방법

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

FaIcon(FontAwesomeIcons.github)

기본 Icon() 대신 FaIcon() 사용!

🔎 검색

Font Awesome Icon 목록 보기

---

✅ 3. Material Symbols 사용하기 (material_symbols_icons)

📦 패키지 설치

dependencies:
  material_symbols_icons: ^4.0.0

📌 사용 방법

import 'package:material_symbols_icons/material_symbols_icons.dart';

Icon(MaterialSymbols.wifi)

Filled, Outlined, Rounded, Sharp 버전별로 선택 가능

---

✅ 4. 사용자 제작 아이콘 사용하기 (ttf, otf 폰트 기반)

① 아이콘 폰트를 생성 (예: IcoMoon, Fontello)

② .ttf 폰트 파일 프로젝트에 추가

flutter:
  fonts:
    - family: MyIcons
      fonts:
        - asset: assets/fonts/my_icons.ttf

③ 코드에 등록된 유니코드로 사용

class MyIcons {
  static const IconData customIcon = IconData(0xe900, fontFamily: 'MyIcons');
}

Icon(MyIcons.customIcon)

---

✅ 5. PNG 아이콘/이미지 사용 (아이콘이 아니지만 참고)

Image.asset('assets/icons/icon.png', width: 24, height: 24)

---

🧠 실전 팁

목적	추천 방식
웹에서 그대로 가져온 아이콘 사용	flutter_svg, Image.asset
폰트 기반 아이콘 세트	font_awesome_flutter
최신 구글 스타일 사용	material_symbols_icons
완전 커스터마이징	IcoMoon → TTF → IconData 사용

---