Font Icon Library

Material Symbols Icon Search

Search and preview Material Symbols icons, then copy the CSS class, HTML markup, or code point for your project. Material Symbols supports variable fill, weight, grade, and optical-size axes for flexible interface icon styling. Font icons behave like text: CSS can control their size, color, alignment, and interaction states without editing an image file. A consistent icon family also helps users recognize repeated actions more quickly across navigation, forms, and controls. Use visible text or an accessible label whenever an icon communicates an action. For performance, load only the library and styles your interface needs. Confirm licensing and usage requirements with the library publisher before distributing a finished product.

Fill 0 Weight 400 Grade 0 Optical 40

Rotate Left

rotate_left

Package: Material Symbols
Category: Images
Code Point: e419

Settings Slow Motion

settings_slow_motion

Package: Material Symbols
Category: Images
Code Point: f623

adjust application arrow circle

Slideshow

slideshow

Package: Material Symbols
Category: Images
Code Point: e41b

begin demonstrate display entertainment

Switch Camera

switch_camera

Package: Material Symbols
Category: Images
Code Point: e41e

app application arrow arrows

Switch Video

switch_video

Package: Material Symbols
Category: Images
Code Point: e41f

arrow arrows back camera broadcasting

Texture

texture

Package: Material Symbols
Category: Images
Code Point: e421

abstract appearance background bumpy

Texture Add

texture_add

Package: Material Symbols
Category: Images
Code Point: f57c

+ add adjust background

Texture Minus

texture_minus

Package: Material Symbols
Category: Images
Code Point: f57b

- adjust background button

Timelapse

timelapse

Package: Material Symbols
Category: Images
Code Point: e422

accelerate adjustment arrow camera

Transition Fade

transition_fade

Package: Material Symbols
Category: Images
Code Point: f50c

animation animation effect change circles

Web Stories

web_stories

Package: Material Symbols
Category: Images
Code Point: e595

column communication content divide

Crisis Alert

crisis_alert

Package: Material Symbols
Category: Maps
Code Point: ebe9

! alarm alert attention

Maps Ugc

maps_ugc

Package: Material Symbols
Category: Maps
Code Point: ef58

+ add add data bubble

Map Pin Review

map_pin_review

Package: Material Symbols
Category: Maps
Code Point: f297

address bubble business chat

Multiple Stop

multiple_stop

Package: Material Symbols
Category: Maps
Code Point: f1b9

action arrows audio button

Pergola

pergola

Package: Material Symbols
Category: Maps
Code Point: e203

abstract arbor architecture backyard

Solo Dining

solo_dining

Package: Material Symbols
Category: Maps
Code Point: ef35

alone body cafeteria cafeteria table

West

west

Package: Material Symbols
Category: Maps
Code Point: f1e6

arrow away back chevron

Report

report

Package: Material Symbols
Category: Privacy
Code Point: e160

! abuse alert attention

Vpn Key Alert

vpn_key_alert

Package: Material Symbols
Category: Privacy
Code Point: f6cc

! access access denied alert

Add Reaction

add_reaction

Package: Material Symbols
Category: Social
Code Point: e1d3

+ add add emotion add feeling

Comic Bubble

comic_bubble

Package: Material Symbols
Category: Social
Code Point: f5dd

animation anime balloon bubble

Communication

communication

Package: Material Symbols
Category: Social
Code Point: e27c

alert balloon bubble cartoon

Ent

ent

Package: Material Symbols
Category: Social
Code Point: e0aa

audio audio icon body brain

Outdoor Garden

outdoor_garden

Package: Material Symbols
Category: Social
Code Point: e205

backyard barrier botanical boundaries

Person Alert

person_alert

Package: Material Symbols
Category: Social
Code Point: f567

! account add alert

Quiz

quiz

Package: Material Symbols
Category: Social
Code Point: f04c

? academic answer assessment

Recommend

recommend

Package: Material Symbols
Category: Social
Code Point: e9d2

affirm agree agreement approval

Sentiment Content

sentiment_content

Package: Material Symbols
Category: Social
Code Point: f6a6

comment dislike dissatisfaction emotion

Sentiment Dissatisfied

sentiment_dissatisfied

Package: Material Symbols
Category: Social
Code Point: e811

angry avatar bad circle

Sentiment Extremely Dissatisfied

sentiment_extremely_dissatisfied

Package: Material Symbols
Category: Social
Code Point: f194

angry bad review crying crying face

Sentiment Neutral

sentiment_neutral

Package: Material Symbols
Category: Social
Code Point: e812

attitude avatar average emoji

Sentiment Sad

sentiment_sad

Package: Material Symbols
Category: Social
Code Point: f6a3

avatar bad character circle

Sentiment Very Dissatisfied

sentiment_very_dissatisfied

Package: Material Symbols
Category: Social
Code Point: e814

angry avatar character circle

Sentiment Very Satisfied

sentiment_very_satisfied

Package: Material Symbols
Category: Social
Code Point: e815

approval avatar character cheerful

Sentiment Worried

sentiment_worried

Package: Material Symbols
Category: Social
Code Point: f6a1

anxiety anxious avatar bad

Thumbs Up Double

thumbs_up_double

Package: Material Symbols
Category: Social
Code Point: eefc

accept agree appraisal appreciation

Thumbs Up Down

thumbs_up_down

Package: Material Symbols
Category: Social
Code Point: e8dd

agree approval comparison contrast

Thumb Down

thumb_down

Package: Material Symbols
Category: Social
Code Point: e8db

ate cancel disagree disapproval

Thumb Up

thumb_up

Package: Material Symbols
Category: Social
Code Point: e8dc

acknowledgement agree approve button

Add To Drive

add_to_drive

Package: Material Symbols
Category: Text
Code Point: e65c

account add app application

Assignment Return

assignment_return

Package: Material Symbols
Category: Text
Code Point: e860

approval arrow assignment back

Cloud Circle

cloud_circle

Package: Material Symbols
Category: Text
Code Point: e2be

app application backup circle

Cloud Done

cloud_done

Package: Material Symbols
Category: Text
Code Point: e2bf

app application approve available

Cloud Download

cloud_download

Package: Material Symbols
Category: Text
Code Point: e2c0

access app application arrow

Cloud Lock

cloud_lock

Package: Material Symbols
Category: Text
Code Point: f386

access access control authentication authorization

Cloud Off

cloud_off

Package: Material Symbols
Category: Text
Code Point: e2c1

access app application backup

Add Material Symbols to your website or app

Add the library once, copy an icon from the results above, and include an accessible label when the icon communicates meaning.

1. Load the icon library

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

Reference version: Google Fonts variable icon font

2. Copy an icon

Use Copy class when you already have markup, or Copy HTML for a ready-to-paste element.

Code points are useful for CSS generated content and tools that work directly with icon fonts.

3. Keep icons accessible

Hide decorative icons from assistive technology. When an icon communicates meaning, pair it with visible text or an accessible label.

Confirm licensing and usage requirements with the library publisher before distributing a finished product.

Practical Notes

Icon Implementation Checklist

Icons work best when they support quick recognition without becoming the only way a user understands an action.

Label important controls

Use visible text or accessible labels for buttons where the icon meaning may be ambiguous.

Keep style consistent

Mixing filled, outlined, sharp, and rounded icon families can make an interface feel uneven.

Load only what you need

Large icon fonts can cost performance. SVG sprites or subset fonts are better for focused interfaces.

Community Poll

What is your favorite AI agent? (Choose up to 3)

2,334 votes

Choose up to 3 options.

Codex

Claude Code

Cursor

GitHub Copilot

Gemini / Jules

Devin

OpenClaw

Hermes Agent

Other

View Result

389 icons