IP Location.net
Sign In

Font Icon Library

Ionicons Search

Font Icons
Search and preview Ionicons icons, then copy the CSS class, HTML markup, or code point for your project. Ionicons provides filled, outline, and sharp icon variants through a lightweight web component. 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.
Ionicons

430 icons

Matching "on"

Reorder Four

reorder-four

Package
Ionicons
Category
Uncategorized
four reorder

Reorder Three

reorder-three

Package
Ionicons
Category
Uncategorized
reorder three

Reorder Two

reorder-two

Package
Ionicons
Category
Uncategorized
reorder two

Repeat

repeat

Package
Ionicons
Category
Uncategorized
repeat

Resize

resize

Package
Ionicons
Category
Uncategorized
resize

Restaurant

restaurant

Package
Ionicons
Category
Uncategorized
eat restaurant

Return Down Back

return-down-back

Package
Ionicons
Category
Uncategorized
back down left return

Return Down Forward

return-down-forward

Package
Ionicons
Category
Uncategorized
down forward return right

Return Up Back

return-up-back

Package
Ionicons
Category
Uncategorized
back left return up

Return Up Forward

return-up-forward

Package
Ionicons
Category
Uncategorized
forward return right up

Ribbon

ribbon

Package
Ionicons
Category
Uncategorized
ribbon

Rocket

rocket

Package
Ionicons
Category
Uncategorized
rocket

Rose

rose

Package
Ionicons
Category
Uncategorized
flower rose

Sad

sad

Package
Ionicons
Category
Uncategorized
bad cry no sad

Save

save

Package
Ionicons
Category
Uncategorized
save

Scale

scale

Package
Ionicons
Category
Uncategorized
scale

Scan

scan

Package
Ionicons
Category
Uncategorized
scan

Scan Circle

scan-circle

Package
Ionicons
Category
Uncategorized
circle scan

School

school

Package
Ionicons
Category
Uncategorized
school

Send

send

Package
Ionicons
Category
Uncategorized
email paper send

Server

server

Package
Ionicons
Category
Uncategorized
server

Settings

settings

Package
Ionicons
Category
Uncategorized
options settings

Shapes

shapes

Package
Ionicons
Category
Uncategorized
shapes

Share

share

Package
Ionicons
Category
Uncategorized
share

Share Social

share-social

Package
Ionicons
Category
Uncategorized
share social

Shield

shield

Package
Ionicons
Category
Uncategorized
shield

Shield Checkmark

shield-checkmark

Package
Ionicons
Category
Uncategorized
checkmark shield

Shield Half

shield-half

Package
Ionicons
Category
Uncategorized
half shield

Shirt

shirt

Package
Ionicons
Category
Uncategorized
shirt

Shuffle

shuffle

Package
Ionicons
Category
Uncategorized
random shuffle

Skull

skull

Package
Ionicons
Category
Uncategorized
skull

Snow

snow

Package
Ionicons
Category
Uncategorized
cold snow

Sparkles

sparkles

Package
Ionicons
Category
Uncategorized
sparkles

Square

square

Package
Ionicons
Category
Uncategorized
square

Star

star

Package
Ionicons
Category
Uncategorized
favorite star

Star Half

star-half

Package
Ionicons
Category
Uncategorized
favorite half rate star

Stats Chart

stats-chart

Package
Ionicons
Category
Uncategorized
chart stats

Stop

stop

Package
Ionicons
Category
Uncategorized
stop

Stop Circle

stop-circle

Package
Ionicons
Category
Uncategorized
circle stop

Stopwatch

stopwatch

Package
Ionicons
Category
Uncategorized
stopwatch time

Storefront

storefront

Package
Ionicons
Category
Uncategorized
storefront

Subway

subway

Package
Ionicons
Category
Uncategorized
subway

Add Ionicons 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

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ionicons/ionicons.esm.js"></script>

Reference version: 8.1.0

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.

Related References

Continue with nearby symbol, code, and web design resources.

Symbol Codes Search symbol codes by category or description, including Unicode, hex codes, HTML codes, HTML entities, and CSS entities. HTML Color Codes Browse common HTML color codes and convert between hex, RGB, and HSL color formats. Font Generator Create styled Unicode text variants for headings, profiles, bios, social posts, and design mockups.