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.

Sentiment Extremely Dissatisfied

Class: sentiment_extremely_dissatisfied
Category: social
Code Point: f194

Sentiment Frustrated

Class: sentiment_frustrated
Category: social
Code Point: f6a4

Sentiment Neutral

Class: sentiment_neutral
Category: social
Code Point: e812

Sentiment Sad

Class: sentiment_sad
Category: social
Code Point: f6a3

Sentiment Satisfied

Class: sentiment_satisfied
Category: social
Code Point: e813

Sentiment Stressed

Class: sentiment_stressed
Category: social
Code Point: f6a2

Sentiment Very Dissatisfied

Class: sentiment_very_dissatisfied
Category: social
Code Point: e814

Sentiment Very Satisfied

Class: sentiment_very_satisfied
Category: social
Code Point: e815

Sentiment Worried

Class: sentiment_worried
Category: social
Code Point: f6a1

Severe Cold

Class: severe_cold
Category: social
Code Point: ebd3

Class: share
Category: social
Code Point: e80d

Share Off

Class: share_off
Category: social
Code Point: f6cb

Short Stay

Class: short_stay
Category: social
Code Point: e4d0

Sick

Class: sick
Category: social
Code Point: f220

Sign Language

Class: sign_language
Category: social
Code Point: ebe5

Skeleton

Class: skeleton
Category: social
Code Point: f899

Skull

Class: skull
Category: social
Code Point: f89a

Snowing

Class: snowing
Category: social
Code Point: e80f

Social Distance

Class: social_distance
Category: social
Code Point: e1cb

Social Leaderboard

Class: social_leaderboard
Category: social
Code Point: f6a0

Solar Power

Class: solar_power
Category: social
Code Point: ec0f

South America

Class: south_america
Category: social
Code Point: e7e4

Specific Gravity

Class: specific_gravity
Category: social
Code Point: f872

Stethoscope

Class: stethoscope
Category: social
Code Point: f805

Stethoscope Arrow

Class: stethoscope_arrow
Category: social
Code Point: f807

Stethoscope Check

Class: stethoscope_check
Category: social
Code Point: f806

Sunny

Class: sunny
Category: social
Code Point: e81a

Sunny Snowing

Class: sunny_snowing
Category: social
Code Point: e819

Support Agent

Class: support_agent
Category: social
Code Point: f0e2

Surgical

Class: surgical
Category: social
Code Point: e131

Symptoms

Class: symptoms
Category: social
Code Point: e132

Syringe

Class: syringe
Category: social
Code Point: e133

Taunt

Class: taunt
Category: social
Code Point: f69f

Thumb Down

Class: thumb_down
Category: social
Code Point: e8db

Thumb Up

Class: thumb_up
Category: social
Code Point: e8dc

Thumbs Up Down

Class: thumbs_up_down
Category: social
Code Point: e8dd

Thunderstorm

Class: thunderstorm
Category: social
Code Point: ebdb

Tibia

Class: tibia
Category: social
Code Point: f89b

Tibia Alt

Class: tibia_alt
Category: social
Code Point: f89c

Tornado

Class: tornado
Category: social
Code Point: e199

Total Dissolved Solids

Class: total_dissolved_solids
Category: social
Code Point: f877

Transgender

Class: transgender
Category: social
Code Point: e58d

Travel Explore

Class: travel_explore
Category: social
Code Point: e2db

Tsunami

Class: tsunami
Category: social
Code Point: ebd8

Ulna Radius

Class: ulna_radius
Category: social
Code Point: f89d

Ulna Radius Alt

Class: ulna_radius_alt
Category: social
Code Point: f89e

Urology

Class: urology
Category: social
Code Point: e137

Vaccines

Class: vaccines
Category: social
Code Point: e138

Vape Free

Class: vape_free
Category: social
Code Point: ebc6

Vaping Rooms

Class: vaping_rooms
Category: social
Code Point: ebcf

Vital Signs

Class: vital_signs
Category: social
Code Point: e650

Volcano

Class: volcano
Category: social
Code Point: ebda

Ward

Class: ward
Category: social
Code Point: e13c

Water Bottle

Class: water_bottle
Category: social
Code Point: f69d

Water Bottle Large

Class: water_bottle_large
Category: social
Code Point: f69e

Water Do

Class: water_do
Category: social
Code Point: f870

Water Drop

Class: water_drop
Category: social
Code Point: e798

Water Ec

Class: water_ec
Category: social
Code Point: f875

Water Lux

Class: water_lux
Category: social
Code Point: f874

Water Orp

Class: water_orp
Category: social
Code Point: f878

Water Ph

Class: water_ph
Category: social
Code Point: f87a

Water Voc

Class: water_voc
Category: social
Code Point: f87b

Waving Hand

Class: waving_hand
Category: social
Code Point: e766

Wc

Class: wc
Category: social
Code Point: e63d

Weather Hail

Class: weather_hail
Category: social
Code Point: f67f

Weight

Class: weight
Category: social
Code Point: e13d

Whatshot

Class: whatshot
Category: social
Code Point: e80e

Wind Power

Class: wind_power
Category: social
Code Point: ec0c

Woman

Class: woman
Category: social
Code Point: e13e

Woman 2

Class: woman_2
Category: social
Code Point: f8e7

Workspace Premium

Class: workspace_premium
Category: social
Code Point: e7af

Workspaces

Class: workspaces
Category: social
Code Point: e1a0

Wounds Injuries

Class: wounds_injuries
Category: social
Code Point: e13f

Wrist

Class: wrist
Category: social
Code Point: f69c

Add Link

Class: add_link
Category: text_formatting
Code Point: e178

Add Notes

Class: add_notes
Category: text_formatting
Code Point: e091

Add To Drive

Class: add_to_drive
Category: text_formatting
Code Point: e65c

Align Center

Class: align_center
Category: text_formatting
Code Point: e356

Align End

Class: align_end
Category: text_formatting
Code Point: f797

Align Flex Center

Class: align_flex_center
Category: text_formatting
Code Point: f796

Align Flex End

Class: align_flex_end
Category: text_formatting
Code Point: f795

Align Flex Start

Class: align_flex_start
Category: text_formatting
Code Point: f794

Align Horizontal Center

Class: align_horizontal_center
Category: text_formatting
Code Point: e00f

Align Horizontal Left

Class: align_horizontal_left
Category: text_formatting
Code Point: e00d

Align Horizontal Right

Class: align_horizontal_right
Category: text_formatting
Code Point: e010

Align Items Stretch

Class: align_items_stretch
Category: text_formatting
Code Point: f793

Align Justify Center

Class: align_justify_center
Category: text_formatting
Code Point: f792

Align Justify Flex End

Class: align_justify_flex_end
Category: text_formatting
Code Point: f791

Align Justify Flex Start

Class: align_justify_flex_start
Category: text_formatting
Code Point: f790

Align Justify Space Around

Class: align_justify_space_around
Category: text_formatting
Code Point: f78f

Align Justify Space Between

Class: align_justify_space_between
Category: text_formatting
Code Point: f78e

Align Justify Space Even

Class: align_justify_space_even
Category: text_formatting
Code Point: f78d

Align Justify Stretch

Class: align_justify_stretch
Category: text_formatting
Code Point: f78c

Align Self Stretch

Class: align_self_stretch
Category: text_formatting
Code Point: f78b

Align Space Around

Class: align_space_around
Category: text_formatting
Code Point: f78a

Align Space Between

Class: align_space_between
Category: text_formatting
Code Point: f789