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

Water Bottle Large

water_bottle_large

Package: Material Symbols
Category: Social
Code Point: f69e

Water Do

water_do

Package: Material Symbols
Category: Social
Code Point: f870

basic bath beverage clean

Water Drops

water_drops

Package: Material Symbols
Category: Social
Code Point: fffa5

aqua clean cleaning climate

Water Ec

water_ec

Package: Material Symbols
Category: Social
Code Point: f875

analysis analyze aquatic bolt

Water Lux

water_lux

Package: Material Symbols
Category: Social
Code Point: f874

amount beverage drink droplet

Water Orp

water_orp

Package: Material Symbols
Category: Social
Code Point: f878

aqua chemistry clean drop

Water Ph

water_ph

Package: Material Symbols
Category: Social
Code Point: f87a

acidic acidity agriculture alkaline

Water Voc

water_voc

Package: Material Symbols
Category: Social
Code Point: f87b

air quality analysis chemical chemicals

Wc

Package: Material Symbols
Category: Social
Code Point: e63d

accessibility amenities bathroom closet

Weather Hail

weather_hail

Package: Material Symbols
Category: Social
Code Point: f67f

app button climate cloud

Weather Mix

weather_mix

Package: Material Symbols
Category: Social
Code Point: f60b

atmospheric changing weather climate cloud

Weight

weight

Package: Material Symbols
Category: Social
Code Point: e13d

balance barbell body dumbbell

Whatshot

whatshot

Package: Material Symbols
Category: Social
Code Point: e80e

alert alerts arrow blaze

Workspaces

workspaces

Package: Material Symbols
Category: Social
Code Point: e1a0

application arrangement circles collaboration

Wounds Injuries

wounds_injuries

Package: Material Symbols
Category: Social
Code Point: e13f

aid ambulance band aid care

Add Column Left

add_column_left

Package: Material Symbols
Category: Text
Code Point: f425

+ add add column add left

Add Column Right

add_column_right

Package: Material Symbols
Category: Text
Code Point: f424

+ add add column add right

Add Link

add_link

Package: Material Symbols
Category: Text
Code Point: e178

add add link anchor associate

Add Row Above

add_row_above

Package: Material Symbols
Category: Text
Code Point: f423

+ above add before

Align Space Between

align_space_between

Package: Material Symbols
Category: Text
Code Point: f789

align alignment arrange arrangement

Apps Plus

apps_plus

Package: Material Symbols
Category: Text
Code Point: ffea7

add add app add widget addition

Assignment

assignment

Package: Material Symbols
Category: Text
Code Point: e85d

agenda assignment checklist class

Assignment Add

assignment_add

Package: Material Symbols
Category: Text
Code Point: f848

+ add add assignment add document

Assignment Globe

assignment_globe

Package: Material Symbols
Category: Text
Code Point: eeec

allocation assignment calendar circle

Assignment Ind

assignment_ind

Package: Material Symbols
Category: Text
Code Point: e85e

account apply assignment badge

Assignment Late

assignment_late

Package: Material Symbols
Category: Text
Code Point: e85f

! alert assignment assignment late

Assignment Return

assignment_return

Package: Material Symbols
Category: Text
Code Point: e860

approval arrow assignment back

Assignment Returned

assignment_returned

Package: Material Symbols
Category: Text
Code Point: e861

arrow assignment assignment returned business

Assignment Turned In

assignment_turned_in

Package: Material Symbols
Category: Text
Code Point: e862

accepted approve approved assignment

Asterisk

asterisk

Package: Material Symbols
Category: Text
Code Point: f525

abstract annotation asterisk character

Attach File

attach_file

Package: Material Symbols
Category: Text
Code Point: e226

add append attach attachment

Ballot

ballot

Package: Material Symbols
Category: Text
Code Point: e172

agreement ballot box bullet

Book

book

Package: Material Symbols
Category: Text
Code Point: e865

academic academy book book icon

Border Bottom

border_bottom

Package: Material Symbols
Category: Text
Code Point: e229

add border apply border border border bottom

Border Clear

border_clear

Package: Material Symbols
Category: Text
Code Point: e22a

border border clear border none borderless

Border Horizontal

border_horizontal

Package: Material Symbols
Category: Text
Code Point: e22c

UI element border boundary content break

Border Inner

border_inner

Package: Material Symbols
Category: Text
Code Point: e22d

alignment area border border inner

Border Left

border_left

Package: Material Symbols
Category: Text
Code Point: e22e

align left alignment border border left

Border Outer

border_outer

Package: Material Symbols
Category: Text
Code Point: e22f

area border border outer boundaries

Border Right

border_right

Package: Material Symbols
Category: Text
Code Point: e230

alignment border border right boundary

Border Style

border_style

Package: Material Symbols
Category: Text
Code Point: e231

appearance border boundary box

Border Top

border_top

Package: Material Symbols
Category: Text
Code Point: e232

above border border top boundary

Border Vertical

border_vertical

Package: Material Symbols
Category: Text
Code Point: e233

alignment border boundaries column

Breaking News

breaking_news

Package: Material Symbols
Category: Text
Code Point: ea08

! alert announcement attention

Business Chip

business_chip

Package: Material Symbols
Category: Text
Code Point: f84c

agency architecture bag baggage

Clarify

clarify

Package: Material Symbols
Category: Text
Code Point: f0bf

action article control detail

Cloud

cloud

Package: Material Symbols
Category: Text
Code Point: e2bd

air atmosphere climate cloud

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

1,891 icons