Icon Libraries

Font icons

A font icon is a graphic symbol or glyph that is created using font characters. Font icons are typically created using scalable vector graphics (SVGs) and are used as a font rather than an image. As a SVG character, the font icons can be easily resized and styled using CSS, and can also be loaded more efficiently than traditional image icons. Font icons are commonly used in web design to provide simple and scalable icons for buttons, navigation bars, symbols, and other user interface elements. They are often used in conjunction with web fonts, which are a collection of font files that can be loaded onto a web page and used to display text in a particular typeface. Some popular font icon libraries include Font Awesome, Material Design Icons, and Ionicons. These libraries provide a wide range of icons that can be easily integrated into a web project, and are typically free to use under an open source license.

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.

Delete Sweep

Class: delete_sweep
Category: ui-actions
Code Point: e16c

Density Large

Class: density_large
Category: ui-actions
Code Point: eba9

Density Medium

Class: density_medium
Category: ui-actions
Code Point: eb9e

Density Small

Class: density_small
Category: ui-actions
Code Point: eba8

Deployed Code

Class: deployed_code
Category: ui-actions
Code Point: f720

Disabled By Default

Class: disabled_by_default
Category: ui-actions
Code Point: f230

Do Not Disturb Off

Class: do_not_disturb_off
Category: ui-actions
Code Point: e643

Do Not Disturb On

Class: do_not_disturb_on
Category: ui-actions
Code Point: e644

Done

Class: done
Category: ui-actions
Code Point: e876

Done All

Class: done_all
Category: ui-actions
Code Point: e877

Done Outline

Class: done_outline
Category: ui-actions
Code Point: e92f

Double Arrow

Class: double_arrow
Category: ui-actions
Code Point: ea50

Download

Class: download
Category: ui-actions
Code Point: f090

Download Done

Class: download_done
Category: ui-actions
Code Point: f091

Download For Offline

Class: download_for_offline
Category: ui-actions
Code Point: f000

Downloading

Class: downloading
Category: ui-actions
Code Point: f001

Drag Click

Class: drag_click
Category: ui-actions
Code Point: f71f

Drag Indicator

Class: drag_indicator
Category: ui-actions
Code Point: e945

Drag Pan

Class: drag_pan
Category: ui-actions
Code Point: f71e

Dynamic Form

Class: dynamic_form
Category: ui-actions
Code Point: f1bf

Eject

Class: eject
Category: ui-actions
Code Point: e8fb

Empty Dashboard

Class: empty_dashboard
Category: ui-actions
Code Point: f844

Enable

Class: enable
Category: ui-actions
Code Point: f188

Error Med

Class: error_med
Category: ui-actions
Code Point: e49b

Exit To App

Class: exit_to_app
Category: ui-actions
Code Point: e879

Expand

Class: expand
Category: ui-actions
Code Point: e94f

Expand Circle Down

Class: expand_circle_down
Category: ui-actions
Code Point: e7cd

Expand Content

Class: expand_content
Category: ui-actions
Code Point: f830

Expand Less

Class: expand_less
Category: ui-actions
Code Point: e5ce

Expand More

Class: expand_more
Category: ui-actions
Code Point: e5cf

Extension Off

Class: extension_off
Category: ui-actions
Code Point: e4f5

Favorite

Class: favorite
Category: ui-actions
Code Point: e87d

File Download Done

Class: file_download_done
Category: ui-actions
Code Point: e9aa

File Download Off

Class: file_download_off
Category: ui-actions
Code Point: e4fe

File Open

Class: file_open
Category: ui-actions
Code Point: eaf3

File Upload Off

Class: file_upload_off
Category: ui-actions
Code Point: f886

Filter Alt Off

Class: filter_alt_off
Category: ui-actions
Code Point: eb32

Filter List

Class: filter_list
Category: ui-actions
Code Point: e152

Filter List Off

Class: filter_list_off
Category: ui-actions
Code Point: eb57

First Page

Class: first_page
Category: ui-actions
Code Point: e5dc

Fit Screen

Class: fit_screen
Category: ui-actions
Code Point: ea10

Forward

Class: forward
Category: ui-actions
Code Point: e154

Fullscreen

Class: fullscreen
Category: ui-actions
Code Point: e5d0

Fullscreen Exit

Class: fullscreen_exit
Category: ui-actions
Code Point: e5d1

Go To Line

Class: go_to_line
Category: ui-actions
Code Point: f71d

Grade

Class: grade
Category: ui-actions
Code Point: e885

Heart Minus

Class: heart_minus
Category: ui-actions
Code Point: f883

Heart Plus

Class: heart_plus
Category: ui-actions
Code Point: f884

Hide

Class: hide
Category: ui-actions
Code Point: ef9e

Hide Source

Class: hide_source
Category: ui-actions
Code Point: f023

Hls

Class: hls
Category: ui-actions
Code Point: eb8a

Hls Off

Class: hls_off
Category: ui-actions
Code Point: eb8c

Home

Class: home
Category: ui-actions
Code Point: e88a

Html

Class: html
Category: ui-actions
Code Point: eb7e

Iframe

Class: iframe
Category: ui-actions
Code Point: f71b

Iframe Off

Class: iframe_off
Category: ui-actions
Code Point: f71c

Indeterminate Check Box

Class: indeterminate_check_box
Category: ui-actions
Code Point: e909

Input Circle

Class: input_circle
Category: ui-actions
Code Point: f71a

Install Desktop

Class: install_desktop
Category: ui-actions
Code Point: eb71

Install Mobile

Class: install_mobile
Category: ui-actions
Code Point: eb72

Ios Share

Class: ios_share
Category: ui-actions
Code Point: e6b8

Javascript

Class: javascript
Category: ui-actions
Code Point: eb7c

Jump To Element

Class: jump_to_element
Category: ui-actions
Code Point: f719

Key

Class: key
Category: ui-actions
Code Point: e73c

Key Off

Class: key_off
Category: ui-actions
Code Point: eb84

Keyboard Command Key

Class: keyboard_command_key
Category: ui-actions
Code Point: eae7

Keyboard Control Key

Class: keyboard_control_key
Category: ui-actions
Code Point: eae6

Keyboard Double Arrow Down

Class: keyboard_double_arrow_down
Category: ui-actions
Code Point: ead0

Keyboard Double Arrow Left

Class: keyboard_double_arrow_left
Category: ui-actions
Code Point: eac3

Keyboard Double Arrow Right

Class: keyboard_double_arrow_right
Category: ui-actions
Code Point: eac9

Keyboard Double Arrow Up

Class: keyboard_double_arrow_up
Category: ui-actions
Code Point: eacf

Keyboard Option Key

Class: keyboard_option_key
Category: ui-actions
Code Point: eae8

Keyboard Voice

Class: keyboard_voice
Category: ui-actions
Code Point: e31d

Last Page

Class: last_page
Category: ui-actions
Code Point: e5dd

Left Click

Class: left_click
Category: ui-actions
Code Point: f718

Left Panel Close

Class: left_panel_close
Category: ui-actions
Code Point: f717

Left Panel Open

Class: left_panel_open
Category: ui-actions
Code Point: f716

Library Add

Class: library_add
Category: ui-actions
Code Point: e02e

Login

Class: login
Category: ui-actions
Code Point: ea77

Logout

Class: logout
Category: ui-actions
Code Point: e9ba

Lose

Class: close
Category: ui-actions
Code Point: e5cd

Magic Exchange

Class: magic_exchange
Category: ui-actions
Code Point: f7f4

Magnification Large

Class: magnification_large
Category: ui-actions
Code Point: f83d

Magnification Small

Class: magnification_small
Category: ui-actions
Code Point: f83c

Manage Search

Class: manage_search
Category: ui-actions
Code Point: f02f

Maximize

Class: maximize
Category: ui-actions
Code Point: e930

Menu Open

Class: menu_open
Category: ui-actions
Code Point: e9bd

Minimize

Class: minimize
Category: ui-actions
Code Point: e931

More Down

Class: more_down
Category: ui-actions
Code Point: f196

More Horiz

Class: more_horiz
Category: ui-actions
Code Point: e5d3

More Up

Class: more_up
Category: ui-actions
Code Point: f197

More Vert

Class: more_vert
Category: ui-actions
Code Point: e5d4

Move Down

Class: move_down
Category: ui-actions
Code Point: eb61

Move Group

Class: move_group
Category: ui-actions
Code Point: f715

Move Selection Down

Class: move_selection_down
Category: ui-actions
Code Point: f714