- Package
- Ionicons
- Category
- Uncategorized
Font Icon Library
Ionicons Search
108 icons
Matching "ar"
Checkmark Circle
checkmark-circle
- Package
- Ionicons
- Category
- Uncategorized
Checkmark Done
checkmark-done
- Package
- Ionicons
- Category
- Uncategorized
Checkmark Done Circle
checkmark-done-circle
- Package
- Ionicons
- Category
- Uncategorized
Chevron Back
chevron-back
- Package
- Ionicons
- Category
- Uncategorized
Chevron Back Circle
chevron-back-circle
- Package
- Ionicons
- Category
- Uncategorized
Chevron Down
chevron-down
- Package
- Ionicons
- Category
- Uncategorized
Chevron Down Circle
chevron-down-circle
- Package
- Ionicons
- Category
- Uncategorized
Chevron Forward
chevron-forward
- Package
- Ionicons
- Category
- Uncategorized
Chevron Forward Circle
chevron-forward-circle
- Package
- Ionicons
- Category
- Uncategorized
Chevron Up
chevron-up
- Package
- Ionicons
- Category
- Uncategorized
Chevron Up Circle
chevron-up-circle
- Package
- Ionicons
- Category
- Uncategorized
Clipboard
clipboard
- Package
- Ionicons
- Category
- Uncategorized
Cog
cog
- Package
- Ionicons
- Category
- Uncategorized
Contrast
contrast
- Package
- Ionicons
- Category
- Uncategorized
Cube
cube
- Package
- Ionicons
- Category
- Uncategorized
Ear
ear
- Package
- Ionicons
- Category
- Uncategorized
Earth
earth
- Package
- Ionicons
- Category
- Uncategorized
Flag
flag
- Package
- Ionicons
- Category
- Uncategorized
Git Compare
git-compare
- Package
- Ionicons
- Category
- Uncategorized
Hardware Chip
hardware-chip
- Package
- Ionicons
- Category
- Uncategorized
Heart
heart
- Package
- Ionicons
- Category
- Uncategorized
Heart Circle
heart-circle
- Package
- Ionicons
- Category
- Uncategorized
Heart Dislike
heart-dislike
- Package
- Ionicons
- Category
- Uncategorized
Heart Dislike Circle
heart-dislike-circle
- Package
- Ionicons
- Category
- Uncategorized
Heart Half
heart-half
- Package
- Ionicons
- Category
- Uncategorized
Id Card
id-card
- Package
- Ionicons
- Category
- Uncategorized
Library
library
- Package
- Ionicons
- Category
- Uncategorized
Logo Angular
logo-angular
- Package
- Ionicons
- Category
- Uncategorized
Logo Apple Ar
logo-apple-ar
- Package
- Ionicons
- Category
- Uncategorized
Logo Deviantart
logo-deviantart
- Package
- Ionicons
- Category
- Uncategorized
Logo Foursquare
logo-foursquare
- Package
- Ionicons
- Category
- Uncategorized
Logo Laravel
logo-laravel
- Package
- Ionicons
- Category
- Uncategorized
Logo Markdown
logo-markdown
- Package
- Ionicons
- Category
- Uncategorized
Moon
moon
- Package
- Ionicons
- Category
- Uncategorized
Nuclear
nuclear
- Package
- Ionicons
- Category
- Uncategorized
Partly Sunny
partly-sunny
- Package
- Ionicons
- Category
- Uncategorized
Pie Chart
pie-chart
- Package
- Ionicons
- Category
- Uncategorized
Play
play
- Package
- Ionicons
- Category
- Uncategorized
Play Circle
play-circle
- Package
- Ionicons
- Category
- Uncategorized
Play Forward
play-forward
- Package
- Ionicons
- Category
- Uncategorized
Play Forward Circle
play-forward-circle
- Package
- Ionicons
- Category
- Uncategorized
Play Skip Forward
play-skip-forward
- Package
- Ionicons
- Category
- Uncategorized
Play Skip Forward Circle
play-skip-forward-circle
- Package
- Ionicons
- Category
- Uncategorized
Podium
podium
- Package
- Ionicons
- Category
- Uncategorized
Return Down Forward
return-down-forward
- Package
- Ionicons
- Category
- Uncategorized
Return Up Forward
return-up-forward
- Package
- Ionicons
- Category
- Uncategorized
Search
search
- Package
- Ionicons
- Category
- Uncategorized
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.