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

List Alt Add

list_alt_add

Package: Material Symbols
Category: Text
Code Point: f756

Location Chip

location_chip

Package: Material Symbols
Category: Text
Code Point: f850

address badge category chip

Markdown

markdown

Package: Material Symbols
Category: Text
Code Point: f552

alphabet angle brackets arrows character

Markdown Copy

markdown_copy

Package: Material Symbols
Category: Text
Code Point: f553

alphabet author character clone

Markdown Paste

markdown_paste

Package: Material Symbols
Category: Text
Code Point: f554

action add alphabet application

Merge Type

merge_type

Package: Material Symbols
Category: Text
Code Point: e252

arrow arrows branch combine

Note Stack

note_stack

Package: Material Symbols
Category: Text
Code Point: f562

agenda archive bookmark collection

Note Stack Add

note_stack_add

Package: Material Symbols
Category: Text
Code Point: f563

+ add append archive

Pageless

pageless

Package: Material Symbols
Category: Text
Code Point: f509

adjust adjustments area concept

Pentagon

pentagon

Package: Material Symbols
Category: Text
Code Point: eb50

abstract angled basic clean

Pen Size 1

pen_size_1

Package: Material Symbols
Category: Text
Code Point: f755

adjustable art calibrate creative

Pen Size 2

pen_size_2

Package: Material Symbols
Category: Text
Code Point: f754

adjust art bars brush size

Pen Size 3

pen_size_3

Package: Material Symbols
Category: Text
Code Point: f753

annotation brush different sizes dimensions

Pen Size 4

pen_size_4

Package: Material Symbols
Category: Text
Code Point: f752

adjustment brush control customize

Pen Size 5

pen_size_5

Package: Material Symbols
Category: Text
Code Point: f751

annotation art bigger bigger line

Percent

percent

Package: Material Symbols
Category: Text
Code Point: eb58

analysis arithmetic calculation chart

Person Book

person_book

Package: Material Symbols
Category: Text
Code Point: f5e8

account biography body book

Plagiarism

plagiarism

Package: Material Symbols
Category: Text
Code Point: ea5a

academic alert caution check

Post

post

Package: Material Symbols
Category: Text
Code Point: e705

add article blog content

Process Chart

process_chart

Package: Material Symbols
Category: Text
Code Point: f855

arrow block branches chart

Rectangle

rectangle

Package: Material Symbols
Category: Text
Code Point: eb54

basic shape blank border box

Regular Expression

regular_expression

Package: Material Symbols
Category: Text
Code Point: f750

algorithm algorithms application code

Remove Selection

remove_selection

Package: Material Symbols
Category: Text
Code Point: e9d5

abandon all cancel clear

Script

script

Package: Material Symbols
Category: Text
Code Point: f45f

A algorithm alphabet analysis

Space Bar

space_bar

Package: Material Symbols
Category: Text
Code Point: e256

bar break button character

Stock Media

stock_media

Package: Material Symbols
Category: Text
Code Point: f570

art artwork assets audio

Stylus Fountain Pen

stylus_fountain_pen

Package: Material Symbols
Category: Text
Code Point: f365

art art tool brush calligraphy

Table Chart

table_chart

Package: Material Symbols
Category: Text
Code Point: e265

analytics arrange bar bars

Task

task

Package: Material Symbols
Category: Text
Code Point: f075

accepted agenda approve assignment

Text Compare

text_compare

Package: Material Symbols
Category: Text
Code Point: f3c5

align alignment article branch

Text Format

text_format

Package: Material Symbols
Category: Text
Code Point: e165

align alignment alphabet article

Text Select Start

text_select_start

Package: Material Symbols
Category: Text
Code Point: f735

area beginning characters choosing

Two Pager

two_pager

Package: Material Symbols
Category: Text
Code Point: f51f

article book booklet content

Variables

variables

Package: Material Symbols
Category: Text
Code Point: f851

adjust attributes building block change

Variable Add

variable_add

Package: Material Symbols
Category: Text
Code Point: f51e

+ add addition append

Variable Insert

variable_insert

Package: Material Symbols
Category: Text
Code Point: f51d

absence arrow arrows background

Variable Remove

variable_remove

Package: Material Symbols
Category: Text
Code Point: f51c

- abolish abort building block

Vertical Align Bottom

vertical_align_bottom

Package: Material Symbols
Category: Text
Code Point: e258

align alignment arrange arrow

Vertical Align Center

vertical_align_center

Package: Material Symbols
Category: Text
Code Point: e259

align alignment arrange arrow

Vertical Align Top

vertical_align_top

Package: Material Symbols
Category: Text
Code Point: e25a

align alignment arrange arrow

Voting Chip

voting_chip

Package: Material Symbols
Category: Text
Code Point: f852

+ 1 add agreement

Wrap Text

wrap_text

Package: Material Symbols
Category: Text
Code Point: e25b

adjust align alignment arrangement

Auto Transmission

auto_transmission

Package: Material Symbols
Category: Transit
Code Point: f53f

auto automatic automatic transmission automobile

Bike Scooter

bike_scooter

Package: Material Symbols
Category: Transit
Code Point: ef45

agile automobile bicycle bike

Car Mirror Heat

car_mirror_heat

Package: Material Symbols
Category: Transit
Code Point: f335

auto heat automobile automotive car

Departure Board

departure_board

Package: Material Symbols
Category: Transit
Code Point: e576

airport arrival board arrivals automobile

Directions Bike

directions_bike

Package: Material Symbols
Category: Transit
Code Point: e52f

activity bicycle bike cycling

Directions Boat

directions_boat

Package: Material Symbols
Category: Transit
Code Point: e532

automobile boat boating car

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

770 icons

List Alt Add

Location Chip

Markdown

Markdown Copy

Markdown Paste

Merge Type

Note Stack

Note Stack Add

Pageless

Pentagon

Pen Size 1

Pen Size 2

Pen Size 3

Pen Size 4

Pen Size 5

Percent

Person Book

Plagiarism

Post

Process Chart

Rectangle

Regular Expression

Remove Selection

Script

Space Bar

Stock Media

Stylus Fountain Pen

Table Chart

Task

Text Compare

Text Format

Text Select Start

Two Pager

Variables

Variable Add

Variable Insert

Variable Remove

Vertical Align Bottom

Vertical Align Center

Vertical Align Top

Voting Chip

Wrap Text

Auto Transmission

Bike Scooter

Car Mirror Heat

Departure Board

Directions Bike

Directions Boat

Add Material Symbols to your website or app

1. Load the icon library

2. Copy an icon

3. Keep icons accessible

Icon Implementation Checklist

Label important controls

Keep style consistent

Load only what you need

Related References