Ionicons is a completely open-source icon set with 1,100+ icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.
Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.
Using the Web Component
The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.
Also note that only visible icons are loaded, and icons which are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource.
If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following
<script> near the end of your page, right before the closing tag, to enable them.
To use a built-in icon from the Ionicons package, populate the
name attribute on the ion-icon component:
To use a custom SVG, provide its url in the
src attribute to request the external SVG file. The
src attribute works the same as
<img src="..."> in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.
To specify the icon size, you can use the size attribute for our pre-defined font sizes.
Or you can set a specific size by applying the
font-size CSS property on the
ion-icon component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)
Ionicons is licensed under the MIT license.