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

Align Justify Flex End

align_justify_flex_end

Package: Material Symbols
Category: Text
Code Point: f791

Align Self Stretch

align_self_stretch

Package: Material Symbols
Category: Text
Code Point: f78b

adjust align alignment arrows

Align Space Even

align_space_even

Package: Material Symbols
Category: Text
Code Point: f788

adjust adjustment align alignment

Align Vertical Top

align_vertical_top

Package: Material Symbols
Category: Text
Code Point: e00c

adjust align alignment arrange

Border Color

border_color

Package: Material Symbols
Category: Text
Code Point: e22b

adjust all art border

Colors

colors

Package: Material Symbols
Category: Text
Code Point: e997

adjust appearance art brightness

Custom Typography

custom_typography

Package: Material Symbols
Category: Text
Code Point: e732

A adjust alphabet artistic

Dashboard 2 Edit

dashboard_2_edit

Package: Material Symbols
Category: Text
Code Point: fffd7

adjust blocks cards change

Dashboard 2 Gear

dashboard_2_gear

Package: Material Symbols
Category: Text
Code Point: fffd6

adjustments administration analytics cards

Dashboard Customize

dashboard_customize

Package: Material Symbols
Category: Text
Code Point: e99b

adjust arrange blocks boxes

Drive File Rename

drive_file_rename

Package: Material Symbols
Category: Text
Code Point: e676

adjust change cloud compose

Eraser Size 1

eraser_size_1

Package: Material Symbols
Category: Text
Code Point: f3fc

adjustment art brush brush size

Eraser Size 2

eraser_size_2

Package: Material Symbols
Category: Text
Code Point: f3fb

adjust art brush cancel

Eraser Size 3

eraser_size_3

Package: Material Symbols
Category: Text
Code Point: f3fa

adjust art bar clear

Eraser Size 5

eraser_size_5

Package: Material Symbols
Category: Text
Code Point: f3f8

5 adjustment amount clean

Fit Page

fit_page

Package: Material Symbols
Category: Text
Code Point: f77a

adjust adjust size area aspect ratio

Fit Page Height

fit_page_height

Package: Material Symbols
Category: Text
Code Point: f397

adjust height adjust view arrows content height

Fit Page Width

fit_page_width

Package: Material Symbols
Category: Text
Code Point: f396

adjust arrows content display

Fit Width

fit_width

Package: Material Symbols
Category: Text
Code Point: f779

adjust adjustment aspect ratio display

Format Align Justify

format_align_justify

Package: Material Symbols
Category: Text
Code Point: e235

adjust align alignment arrange

Format Align Right

format_align_right

Package: Material Symbols
Category: Text
Code Point: e237

adjust text align align right alignment

Format Image Break Left

format_image_break_left

Package: Material Symbols
Category: Text
Code Point: eeaf

adjust align alignment arrange

Format Image Front

format_image_front

Package: Material Symbols
Category: Text
Code Point: eead

adjust align alignment border

Format Italic

format_italic

Package: Material Symbols
Category: Text
Code Point: e23f

a abc adjust alphabet

Format Letter Spacing

format_letter_spacing

Package: Material Symbols
Category: Text
Code Point: f773

a adjust align alphabet

Format Letter Spacing 2

format_letter_spacing_2

Package: Material Symbols
Category: Text
Code Point: f618

adjustment align alphabet arrangement

Format Letter Spacing Standard

format_letter_spacing_standard

Package: Material Symbols
Category: Text
Code Point: f617

adjust align alignment alphabet

Format Letter Spacing Wide

format_letter_spacing_wide

Package: Material Symbols
Category: Text
Code Point: f616

adjust align alphabet character

Format Letter Spacing Wider

format_letter_spacing_wider

Package: Material Symbols
Category: Text
Code Point: f615

adjust align alphabet arrows

Format Line Spacing

format_line_spacing

Package: Material Symbols
Category: Text
Code Point: e240

adjust spacing align alignment arrows

Format Paint

format_paint

Package: Material Symbols
Category: Text
Code Point: e243

adjust adjustment art artist

Format Text Overflow

format_text_overflow

Package: Material Symbols
Category: Text
Code Point: f829

adjust alignment block box

Format Text Wrap

format_text_wrap

Package: Material Symbols
Category: Text
Code Point: f828

adjust text align alignment auto wrap

Functions

functions

Package: Material Symbols
Category: Text
Code Point: e24a

adjustments administration algorithms automation

Hexagon

hexagon

Package: Material Symbols
Category: Text
Code Point: eb39

adjust configuration defense filled

Highlighter Size 1

highlighter_size_1

Package: Material Symbols
Category: Text
Code Point: f76b

adjustment annotation art basic

Highlighter Size 3

highlighter_size_3

Package: Material Symbols
Category: Text
Code Point: f769

adjustment annotation art creative

Horizontal Align Center

horizontal_align_center

Package: Material Symbols
Category: Text
Code Point: fff9c

adjust align alignment arrange

Horizontal Align Right

horizontal_align_right

Package: Material Symbols
Category: Text
Code Point: fff9a

adjust align alignment arrow

Language Us Colemak

language_us_colemak

Package: Material Symbols
Category: Text
Code Point: f75b

adjustments alternate america character

Linear Scale

linear_scale

Package: Material Symbols
Category: Text
Code Point: e260

adjust adjustment app application

Line Style

line_style

Package: Material Symbols
Category: Text
Code Point: e919

adjust alignment bullet points content

Line Weight

line_weight

Package: Material Symbols
Category: Text
Code Point: e91a

adjust bars content different sizes

Margin

margin

Package: Material Symbols
Category: Text
Code Point: e9bb

adjust adjust text alignment border

Padding

padding

Package: Material Symbols
Category: Text
Code Point: e9c8

adjust alignment arrangement arrows

Pageless

pageless

Package: Material Symbols
Category: Text
Code Point: f509

adjust adjustments area concept

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

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,333 votes

Choose up to 3 options.

Codex

Claude Code

Cursor

GitHub Copilot

Gemini / Jules

Devin

OpenClaw

Hermes Agent

Other

View Result

350 icons

Align Justify Flex End

Align Self Stretch

Align Space Even

Align Vertical Top

Border Color

Colors

Custom Typography

Dashboard 2 Edit

Dashboard 2 Gear

Dashboard Customize

Drive File Rename

Eraser Size 1

Eraser Size 2

Eraser Size 3

Eraser Size 5

Fit Page

Fit Page Height

Fit Page Width

Fit Width

Format Align Justify

Format Align Right

Format Image Break Left

Format Image Front

Format Italic

Format Letter Spacing

Format Letter Spacing 2

Format Letter Spacing Standard

Format Letter Spacing Wide

Format Letter Spacing Wider

Format Line Spacing

Format Paint

Format Text Overflow

Format Text Wrap

Functions

Hexagon

Highlighter Size 1

Highlighter Size 3

Horizontal Align Center

Horizontal Align Right

Language Us Colemak

Linear Scale

Line Style

Line Weight

Margin

Padding

Pageless

Pen Size 1

Pen Size 2

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