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

Text Rotation Angledown

text_rotation_angledown

Package: Material Symbols
Category: Text
Code Point: e93c

Text Rotation Angleup

text_rotation_angleup

Package: Material Symbols
Category: Text
Code Point: e93d

A adjustment alphabet angle

Text Rotation Down

text_rotation_down

Package: Material Symbols
Category: Text
Code Point: e93e

A adjust alphabet arrow

Text Select End

text_select_end

Package: Material Symbols
Category: Text
Code Point: f73e

blinking cursor choose text cursor dash

Text Select Jump To Beginning

text_select_jump_to_beginning

Package: Material Symbols
Category: Text
Code Point: f73d

arrow back bar beginning

Text Select Jump To End

text_select_jump_to_end

Package: Material Symbols
Category: Text
Code Point: f73c

arrow cursor dash dashes

Text Select Move Back Character

text_select_move_back_character

Package: Material Symbols
Category: Text
Code Point: f73b

action arrow back caret

Text Select Move Back Word

text_select_move_back_word

Package: Material Symbols
Category: Text
Code Point: f73a

arrow back backspace caret

Text Select Move Down

text_select_move_down

Package: Material Symbols
Category: Text
Code Point: f739

adjust application arrow content

Text Select Move Forward Character

text_select_move_forward_character

Package: Material Symbols
Category: Text
Code Point: f738

arrow blinker caret character position

Text Select Move Forward Word

text_select_move_forward_word

Package: Material Symbols
Category: Text
Code Point: f737

advance arrow caret characters

Text Select Move Up

text_select_move_up

Package: Material Symbols
Category: Text
Code Point: f736

adjust arrange arrow ascend

Text Select Start

text_select_start

Package: Material Symbols
Category: Text
Code Point: f735

area beginning characters choosing

Text Snippet

text_snippet

Package: Material Symbols
Category: Text
Code Point: f1c6

article character communication content

Text Up

text_up

Package: Material Symbols
Category: Text
Code Point: f49e

7 A adjust alignment

Title

title

Package: Material Symbols
Category: Text
Code Point: e264

T action alphabet basic

Titlecase

titlecase

Package: Material Symbols
Category: Text
Code Point: f489

a access denied access restricted alert

Top Panel Close

top_panel_close

Package: Material Symbols
Category: Text
Code Point: f733

action add arithmetic arrow

Top Panel Open

top_panel_open

Package: Material Symbols
Category: Text
Code Point: f732

adjustment arrow aspect ratio control

Two Pager Store

two_pager_store

Package: Material Symbols
Category: Text
Code Point: f3c4

book books browse business

Type Specimen

type_specimen

Package: Material Symbols
Category: Text
Code Point: f8f0

characters creative design detail

Ungroup

ungroup

Package: Material Symbols
Category: Text
Code Point: f731

adjust arrangement arrow break apart

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 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

Vertical Distribute

vertical_distribute

Package: Material Symbols
Category: Text
Code Point: e076

align alignment bars design tools

Vertical Split

vertical_split

Package: Material Symbols
Category: Text
Code Point: e949

arrangement columns content layout design

View Agenda

view_agenda

Package: Material Symbols
Category: Text
Code Point: e8e9

agenda agenda view arrange blocks

View Array

view_array

Package: Material Symbols
Category: Text
Code Point: e8ea

arrange arrangement array blocks

View Carousel

view_carousel

Package: Material Symbols
Category: Text
Code Point: e8eb

cards carousel collection content

View Column

view_column

Package: Material Symbols
Category: Text
Code Point: e8ec

alignment arrangement column columns

View Column 2

view_column_2

Package: Material Symbols
Category: Text
Code Point: f847

arrangement column columns design

View Day

view_day

Package: Material Symbols
Category: Text
Code Point: e8ed

appointment arrangement bar blocks

View Headline

view_headline

Package: Material Symbols
Category: Text
Code Point: e8ee

area arrangement article bars

View List

view_list

Package: Material Symbols
Category: Text
Code Point: e8ef

arrangement bulleted catalog compact

View Module

view_module

Package: Material Symbols
Category: Text
Code Point: e8f0

arrange arrangement blocks collection

View Object Track

view_object_track

Package: Material Symbols
Category: Text
Code Point: f432

aim area assist box

View Quilt

view_quilt

Package: Material Symbols
Category: Text
Code Point: e8f1

arrangement blocks columns composition

View Stream

view_stream

Package: Material Symbols
Category: Text
Code Point: e8f2

arrangement block view blocks columns

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

Agriculture

agriculture

Package: Material Symbols
Category: Transit
Code Point: ea79

agriculture automobile botanical car

Airlines

airlines

Package: Material Symbols
Category: Transit
Code Point: e7ca

air air travel aircraft airlines

Airport Shuttle

airport_shuttle

Package: Material Symbols
Category: Transit
Code Point: eb3c

airport arrival automobile baggage

Ambulance

ambulance

Package: Material Symbols
Category: Transit
Code Point: f803

aid ambulance approve assistance

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

2,931 icons

Text Rotation Angledown

Text Rotation Angleup

Text Rotation Down

Text Select End

Text Select Jump To Beginning

Text Select Jump To End

Text Select Move Back Character

Text Select Move Back Word

Text Select Move Down

Text Select Move Forward Character

Text Select Move Forward Word

Text Select Move Up

Text Select Start

Text Snippet

Text Up

Title

Titlecase

Top Panel Close

Top Panel Open

Two Pager Store

Type Specimen

Ungroup

Variables

Variable Add

Variable Remove

Vertical Align Bottom

Vertical Align Center

Vertical Align Top

Vertical Distribute

Vertical Split

View Agenda

View Array

View Carousel

View Column

View Column 2

View Day

View Headline

View List

View Module

View Object Track

View Quilt

View Stream

Voting Chip

Wrap Text

Agriculture

Airlines

Airport Shuttle

Ambulance

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