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

Draw Collage

draw_collage

Package: Material Symbols
Category: Text
Code Point: f7f7

Drive File Move

drive_file_move

Package: Material Symbols
Category: Text
Code Point: e675

action arrange arrow button

Flex Direction

flex_direction

Package: Material Symbols
Category: Text
Code Point: f778

align arrangement arrow arrows

Flex No Wrap

flex_no_wrap

Package: Material Symbols
Category: Text
Code Point: f777

3x3 align arrangement code

Flex Wrap

flex_wrap

Package: Material Symbols
Category: Text
Code Point: f776

6x6 alignment arrangement block

Flip To Back

flip_to_back

Package: Material Symbols
Category: Text
Code Point: e882

arrange arrangement back bring forward

Flip To Front

flip_to_front

Package: Material Symbols
Category: Text
Code Point: e883

arrange arrangement ascend back

Folder Managed

folder_managed

Package: Material Symbols
Category: Text
Code Point: f775

application archive arrange business

Format Align Justify

format_align_justify

Package: Material Symbols
Category: Text
Code Point: e235

adjust align alignment arrange

Format Image Back

format_image_back

Package: Material Symbols
Category: Text
Code Point: eeb0

align alignment arrange arrangement

Format Image Break Left

format_image_break_left

Package: Material Symbols
Category: Text
Code Point: eeaf

adjust align alignment arrange

Format Image Break Right

format_image_break_right

Package: Material Symbols
Category: Text
Code Point: eeae

align alignment break content arrangement

Format Image Inline Right

format_image_inline_right

Package: Material Symbols
Category: Text
Code Point: ffffd

align align right alignment arrangement

Format Image Left

format_image_left

Package: Material Symbols
Category: Text
Code Point: f863

align alignment arrangement article

Format Image Right

format_image_right

Package: Material Symbols
Category: Text
Code Point: f864

align alignment arrange article

Format Letter Spacing 2

format_letter_spacing_2

Package: Material Symbols
Category: Text
Code Point: f618

adjustment align alphabet arrangement

Format List Bulleted

format_list_bulleted

Package: Material Symbols
Category: Text
Code Point: e241

align alignment arrangement bullet list

Format List Bulleted Add

format_list_bulleted_add

Package: Material Symbols
Category: Text
Code Point: f849

+ add align alignment

Format List Numbered

format_list_numbered

Package: Material Symbols
Category: Text
Code Point: e242

align alignment arrangement bullet points

Format Shapes

format_shapes

Package: Material Symbols
Category: Text
Code Point: e25e

align alphabet arrange character

Format Textdirection Vertical

format_textdirection_vertical

Package: Material Symbols
Category: Text
Code Point: f4b8

align alignment arrangement arrows

Format Text Wrap

format_text_wrap

Package: Material Symbols
Category: Text
Code Point: f828

adjust text align alignment auto wrap

Grid Layout Side

grid_layout_side

Package: Material Symbols
Category: Text
Code Point: fff8d

arrangement blocks cells column

Grid View

grid_view

Package: Material Symbols
Category: Text
Code Point: e9b0

app application square arrangement block layout

Heap Snapshot Multiple

heap_snapshot_multiple

Package: Material Symbols
Category: Text
Code Point: f76d

archive arrangement backup collection

Horizontal Align Center

horizontal_align_center

Package: Material Symbols
Category: Text
Code Point: fff9c

adjust align alignment arrange

Horizontal Align Left

horizontal_align_left

Package: Material Symbols
Category: Text
Code Point: fff9b

align alignment arrangement arrow

Horizontal Distribute

horizontal_distribute

Package: Material Symbols
Category: Text
Code Point: e014

align alignment application arrangement

Horizontal Split

horizontal_split

Package: Material Symbols
Category: Text
Code Point: e947

arrangement bars content organization display

Ink Highlighter Move

ink_highlighter_move

Package: Material Symbols
Category: Text
Code Point: f524

annotation arrow color cursor

Low Priority

low_priority

Package: Material Symbols
Category: Text
Code Point: e16d

arrange arrow arrow down backward

Padding

padding

Package: Material Symbols
Category: Text
Code Point: e9c8

adjust alignment arrangement arrows

Perm Media

perm_media

Package: Material Symbols
Category: Text
Code Point: e8a7

archive arrangement collection content

Reorder

reorder

Package: Material Symbols
Category: Text
Code Point: e8fe

adjust arrows bars burger

Shapes

shapes

Package: Material Symbols
Category: Text
Code Point: e602

abstract abstract shapes arrangement basic shapes

Sheets Column Swap

sheets_column_swap

Package: Material Symbols
Category: Text
Code Point: ffe9d

alternate arrow arrows cell

Sheets Rtl

sheets_rtl

Package: Material Symbols
Category: Text
Code Point: f823

archives arrangement arrow arrows

Slide Library

slide_library

Package: Material Symbols
Category: Text
Code Point: f822

archive arrangement asset library assets

Space Dashboard

space_dashboard

Package: Material Symbols
Category: Text
Code Point: e66b

analytics arrangement blocks cards

Space Dashboard 2

space_dashboard_2

Package: Material Symbols
Category: Text
Code Point: fff8c

analysis applications arrange blocks

Stack Hexagon

stack_hexagon

Package: Material Symbols
Category: Text
Code Point: f41c

architecture arrangement base block

Table Chart

table_chart

Package: Material Symbols
Category: Text
Code Point: e265

analytics arrange bar bars

Table Rows Narrow

table_rows_narrow

Package: Material Symbols
Category: Text
Code Point: f73f

adjust analytics arrange background

Table View

table_view

Package: Material Symbols
Category: Text
Code Point: f1be

arrangement cell chart columns

Text Rotate Up

text_rotate_up

Package: Material Symbols
Category: Text
Code Point: e93a

A adjustment alphabet arrange

Text Rotate Vertical

text_rotate_vertical

Package: Material Symbols
Category: Text
Code Point: e93b

A alignment alphabet arrange

Text Rotation Angleup

text_rotation_angleup

Package: Material Symbols
Category: Text
Code Point: e93d

A adjustment alphabet angle

Text Select Move Down

text_select_move_down

Package: Material Symbols
Category: Text
Code Point: f739

adjust application arrow content

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

203 icons

Draw Collage

Drive File Move

Flex Direction

Flex No Wrap

Flex Wrap

Flip To Back

Flip To Front

Folder Managed

Format Align Justify

Format Image Back

Format Image Break Left

Format Image Break Right

Format Image Inline Right

Format Image Left

Format Image Right

Format Letter Spacing 2

Format List Bulleted

Format List Bulleted Add

Format List Numbered

Format Shapes

Format Textdirection Vertical

Format Text Wrap

Grid Layout Side

Grid View

Heap Snapshot Multiple

Horizontal Align Center

Horizontal Align Left

Horizontal Distribute

Horizontal Split

Ink Highlighter Move

Low Priority

Padding

Perm Media

Reorder

Shapes

Sheets Column Swap

Sheets Rtl

Slide Library

Space Dashboard

Space Dashboard 2

Stack Hexagon

Table Chart

Table Rows Narrow

Table View

Text Rotate Up

Text Rotate Vertical

Text Rotation Angleup

Text Select Move Down

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