.png)
Ionicons: Beautiful Free Icons for Your Apps
Imagine a toolbox filled with amazing icons ready to make your web and mobile apps look fantastic. That's what Ionicons is all about! In this article, we'll explore Ionicons, a collection of icons you can use without restrictions in your projects. It's easy to use, and we'll show you how.
Icons Crafted with Care
Ionicons is a collection of 1,300 icons designed with love. These icons are perfect for your websites, iOS, Android apps, and even desktop programs. They were made by the Ionic Framework, which is a toolkit for building apps for different platforms.
How to Use Ionicons
1. The Web Component
This is a smart way to use Ionicons in your app. It loads only the icons you need, so your app stays fast and efficient. Plus, it doesn't waste data on icons that aren't visible to users.
Example:
<ion-icon name="heart"></ion-icon>
2. Installation
If you're using the Ionic Framework, Ionicons comes automatically, so you don't need to install anything. But if you're not using Ionic, you can easily add Ionicons to your project by copying and pasting a couple of lines of code at the end of your webpage.
3. Basic Usage
Now, let's use an icon. If you want to use one of Ionicons' built-in icons, you just need to specify its name using the name attribute. Easy, right?
Example:
4. Custom Icons
But what if you want a unique icon? No problem! Just provide the URL of your custom SVG icon using the src attribute.
Example:
<ion-icon src="/path/to/external/file.svg"></ion-icon>
Different Styles for Different Tastes
Ionicons offers three styles for each icon: filled, outline, and sharp. These styles help your app look great on various devices and platforms.
Customize Your Icons
Icon Size
You can make your icons bigger or smaller. Use the size attribute and pick from pre-defined sizes like "small" or "large." Or, you can be precise and set a specific size using CSS.
<ion-icon size="large"></ion-icon>
Icon Color
Icons don't have to be one color. You can change their color with CSS.
<ion-icon style="color: blue;"></ion-icon>
Outline Icons' Stroke Width
If you're using outline icons and want to change how thick the lines are, you can do that too!
<ion-icon name="heart-outline"></ion-icon>
ion-icon { --ionicon-stroke-width: 16px; }
Making Icons Accessible
Accessibility Examples
It's important that everyone can use your app, including people who rely on screen readers. For decorative icons, hide them from screen readers using aria-hidden="true".
Example:
<ion-icon name="heart" aria-hidden="true"></ion-icon>
For interactive icons, give them a name using aria-label.
Example:
<ion-icon name="heart" aria-label="Favorite"></ion-icon>
If the icon describes another element, apply aria-label to the parent element and hide the icon with aria-hidden.
Example:
<ion-button aria-label="Favorite"> <ion-icon name="heart" aria-hidden="true"></ion-icon> </ion-button>
Browser Support
Ionicons works well on modern browsers like Chrome, Safari, Edge, and Firefox. However, it's not compatible with Internet Explorer 11.
To download this article as a PDF, click the button above.
Note:
If you need updates or help, visit the Ionicons GitHub repository.
