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.

Zoom In Map

Class: zoom_in_map
Category: maps
Code Point: eb2d

Zoom Out Map

Class: zoom_out_map
Category: maps
Code Point: e56b

Blood Pressure

Class: blood_pressure
Category: other
Code Point: e097

Contrast Rtl Off

Class: contrast_rtl_off
Category: other
Code Point: ec72

Keyboard Tab Rtl

Class: keyboard_tab_rtl
Category: other
Code Point: ec73

10Mp

Class: 10mp
Category: photo_image
Code Point: e952

11Mp

Class: 11mp
Category: photo_image
Code Point: e953

12Mp

Class: 12mp
Category: photo_image
Code Point: e954

13Mp

Class: 13mp
Category: photo_image
Code Point: e955

14Mp

Class: 14mp
Category: photo_image
Code Point: e956

15Mp

Class: 15mp
Category: photo_image
Code Point: e957

16Mp

Class: 16mp
Category: photo_image
Code Point: e958

16Mp

Class: 16mp
Category: photo_image
Code Point: e958

17Mp

Class: 17mp
Category: photo_image
Code Point: e959

18Mp

Class: 18mp
Category: photo_image
Code Point: e95a

19Mp

Class: 19mp
Category: photo_image
Code Point: e95b

20Mp

Class: 20mp
Category: photo_image
Code Point: e95e

21Mp

Class: 21mp
Category: photo_image
Code Point: e95f

22Mp

Class: 22mp
Category: photo_image
Code Point: e960

23Mp

Class: 23mp
Category: photo_image
Code Point: e961

24Mp

Class: 24mp
Category: photo_image
Code Point: e962

2Mp

Class: 2mp
Category: photo_image
Code Point: e965

30Fps Select

Class: 30fps_select
Category: photo_image
Code Point: efcf

3Mp

Class: 3mp
Category: photo_image
Code Point: e968

4Mp

Class: 4mp
Category: photo_image
Code Point: e96a

50Mp

Class: 50mp
Category: photo_image
Code Point: f6f3

5Mp

Class: 5mp
Category: photo_image
Code Point: e96d

60Fps Select

Class: 60fps_select
Category: photo_image
Code Point: efd5

6Mp

Class: 6mp
Category: photo_image
Code Point: e970

7Mp

Class: 7mp
Category: photo_image
Code Point: e973

8Mp

Class: 8mp
Category: photo_image
Code Point: e976

9Mp

Class: 9mp
Category: photo_image
Code Point: e979

Add A Photo

Class: add_a_photo
Category: photo_image
Code Point: e439

Add Photo Alternate

Class: add_photo_alternate
Category: photo_image
Code Point: e43e

Add To Photos

Class: add_to_photos
Category: photo_image
Code Point: e39d

Adjust

Class: adjust
Category: photo_image
Code Point: e39e

Animation

Class: animation
Category: photo_image
Code Point: e71c

Aspect Ratio

Class: aspect_ratio
Category: photo_image
Code Point: e85b

Astrophotography Auto

Class: astrophotography_auto
Category: photo_image
Code Point: f1d9

Astrophotography Off

Class: astrophotography_off
Category: photo_image
Code Point: f1da

Auto Awesome

Class: auto_awesome
Category: photo_image
Code Point: e65f

Auto Awesome Mosaic

Class: auto_awesome_mosaic
Category: photo_image
Code Point: e660

Auto Awesome Motion

Class: auto_awesome_motion
Category: photo_image
Code Point: e661

Auto Fix

Class: auto_fix
Category: photo_image
Code Point: e662

Auto Fix High

Class: auto_fix_high
Category: photo_image
Code Point: e663

Auto Fix Normal

Class: auto_fix_normal
Category: photo_image
Code Point: e664

Auto Fix Off

Class: auto_fix_off
Category: photo_image
Code Point: e665

Auto Stories

Class: auto_stories
Category: photo_image
Code Point: e666

Autofps Select

Class: autofps_select
Category: photo_image
Code Point: efdc

Background Dot Large

Class: background_dot_large
Category: photo_image
Code Point: f79e

Background Grid Small

Class: background_grid_small
Category: photo_image
Code Point: f79d

Blur Circular

Class: blur_circular
Category: photo_image
Code Point: e3a2

Blur Linear

Class: blur_linear
Category: photo_image
Code Point: e3a3

Blur Medium

Class: blur_medium
Category: photo_image
Code Point: e84c

Blur Off

Class: blur_off
Category: photo_image
Code Point: e3a4

Blur On

Class: blur_on
Category: photo_image
Code Point: e3a5

Blur Short

Class: blur_short
Category: photo_image
Code Point: e8cf

Brightness 1

Class: brightness_1
Category: photo_image
Code Point: e3a6

Brightness 2

Class: brightness_2
Category: photo_image
Code Point: e3a7

Brightness 3

Class: brightness_3
Category: photo_image
Code Point: e3a8

Brightness 4

Class: brightness_4
Category: photo_image
Code Point: e3a9

Brightness 5

Class: brightness_5
Category: photo_image
Code Point: e3aa

Brightness 6

Class: brightness_6
Category: photo_image
Code Point: e3ab

Brightness 7

Class: brightness_7
Category: photo_image
Code Point: e3ac

Broken Image

Class: broken_image
Category: photo_image
Code Point: e3ad

Brush

Class: brush
Category: photo_image
Code Point: e3ae

Burst Mode

Class: burst_mode
Category: photo_image
Code Point: e43c

Camera

Class: camera
Category: photo_image
Code Point: e3af

Camera Enhance

Class: camera_enhance
Category: photo_image
Code Point: e8fc

Camera Front

Class: camera_front
Category: photo_image
Code Point: e3b1

Camera Rear

Class: camera_rear
Category: photo_image
Code Point: e3b2

Camera Roll

Class: camera_roll
Category: photo_image
Code Point: e3b3

Center Focus Strong

Class: center_focus_strong
Category: photo_image
Code Point: e3b4

Center Focus Weak

Class: center_focus_weak
Category: photo_image
Code Point: e3b5

Circle

Class: circle
Category: photo_image
Code Point: ef4a

Colorize

Class: colorize
Category: photo_image
Code Point: e3b8

Compare

Class: compare
Category: photo_image
Code Point: e3b9

Contrast

Class: contrast
Category: photo_image
Code Point: eb37

Control Point Duplicate

Class: control_point_duplicate
Category: photo_image
Code Point: e3bb

Crop

Class: crop
Category: photo_image
Code Point: e3be

Crop 16 9

Class: crop_16_9
Category: photo_image
Code Point: e3bc

Crop 3 2

Class: crop_3_2
Category: photo_image
Code Point: e3bd

Crop 5 4

Class: crop_5_4
Category: photo_image
Code Point: e3bf

Crop 7 5

Class: crop_7_5
Category: photo_image
Code Point: e3c0

Crop Free

Class: crop_free
Category: photo_image
Code Point: e3c2

Crop Landscape

Class: crop_landscape
Category: photo_image
Code Point: e3c3

Crop Portrait

Class: crop_portrait
Category: photo_image
Code Point: e3c5

Crop Rotate

Class: crop_rotate
Category: photo_image
Code Point: e437

Crop Square

Class: crop_square
Category: photo_image
Code Point: e3c6

Deblur

Class: deblur
Category: photo_image
Code Point: eb77

Dehaze

Class: dehaze
Category: photo_image
Code Point: e3c7

Details

Class: details
Category: photo_image
Code Point: e3c8

Dirty Lens

Class: dirty_lens
Category: photo_image
Code Point: ef4b

Edit

Class: edit
Category: photo_image
Code Point: e3c9

Ev Shadow

Class: ev_shadow
Category: photo_image
Code Point: ef8f

Exposure

Class: exposure
Category: photo_image
Code Point: e3ca