ionicons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Top Related Projects
Simply beautiful open-source icons
The iconic SVG, font, and CSS toolkit
Material Design icons by Google (Material Symbols)
A scalable set of icons handcrafted with <3 by GitHub
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Official open source SVG icon library for Bootstrap.
Quick Overview
Ionicons is a premium open-source icon set designed for web, iOS, Android, and desktop apps. It's part of the Ionic Framework ecosystem but can be used independently. Ionicons offers a comprehensive collection of high-quality, beautifully crafted icons suitable for various applications and design needs.
Pros
- Large collection of over 1,300 icons in multiple styles (outline, filled, and sharp)
- Regularly updated with new icons and improvements
- Easy integration with web projects and popular frameworks
- Customizable with CSS for color, size, and other properties
Cons
- May have a steeper learning curve for beginners compared to simpler icon sets
- Some users might find the icon styles too opinionated for certain projects
- Requires additional setup for optimal performance in non-Ionic projects
Code Examples
- Using Ionicons in HTML:
<ion-icon name="heart"></ion-icon>
<ion-icon name="heart" size="large"></ion-icon>
<ion-icon name="heart" color="danger"></ion-icon>
This code displays heart icons with different sizes and colors.
- Using Ionicons in JavaScript:
import { addIcons } from 'ionicons';
import { logoTwitter, logoFacebook, logoLinkedin } from 'ionicons/icons';
addIcons({
'logo-twitter': logoTwitter,
'logo-facebook': logoFacebook,
'logo-linkedin': logoLinkedin
});
This code imports specific icons and adds them to the project.
- Styling Ionicons with CSS:
ion-icon {
font-size: 24px;
color: #007bff;
}
ion-icon[name="heart"] {
color: red;
}
This CSS customizes the appearance of Ionicons, setting a default size and color, and a specific color for the heart icon.
Getting Started
To use Ionicons in your project, follow these steps:
-
Install Ionicons via npm:
npm install ionicons
-
Import the Ionicons module in your main JavaScript file:
import { defineCustomElements } from 'ionicons/dist/loader'; defineCustomElements(window);
-
Use Ionicons in your HTML:
<ion-icon name="heart"></ion-icon>
-
Optionally, import specific icons to reduce bundle size:
import { addIcons } from 'ionicons'; import { heart } from 'ionicons/icons'; addIcons({ 'heart': heart });
Now you can use Ionicons throughout your project!
Competitor Comparisons
Simply beautiful open-source icons
Pros of Feather
- Lightweight and minimalist design, offering a clean and modern aesthetic
- Consistent 24x24 grid system, making it easier to align and scale icons
- Customizable stroke width and color, providing flexibility in design
Cons of Feather
- Smaller icon set compared to Ionicons, limiting options for specific use cases
- Less frequent updates and additions to the icon library
- Limited built-in support for different icon styles (e.g., filled, outlined)
Code Comparison
Feather:
<i data-feather="user"></i>
<script>
feather.replace()
</script>
Ionicons:
<ion-icon name="person"></ion-icon>
<script type="module" src="https://unpkg.com/ionicons/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons/dist/ionicons/ionicons.js"></script>
Both Feather and Ionicons are popular icon libraries used in web development. Feather offers a minimalist design approach with consistent sizing and customizable attributes, making it ideal for projects requiring a clean, modern look. However, it has a smaller icon set and less frequent updates compared to Ionicons.
Ionicons, on the other hand, provides a larger and more diverse icon set with regular updates and additions. It also offers built-in support for different icon styles, making it more versatile for various design needs. The implementation of both libraries is straightforward, with Feather requiring a JavaScript call to replace icons, while Ionicons uses a custom element approach.
The iconic SVG, font, and CSS toolkit
Pros of Font-Awesome
- Larger icon set with over 7,000 icons
- Includes both free and paid premium icons
- Supports multiple file formats (SVG, webfonts, etc.)
Cons of Font-Awesome
- Larger file size due to extensive icon set
- Some advanced features require a paid subscription
- Steeper learning curve for customization
Code Comparison
Ionicons usage:
<ion-icon name="heart"></ion-icon>
Font-Awesome usage:
<i class="fas fa-heart"></i>
Both libraries offer simple HTML implementations, but Ionicons uses a custom element while Font-Awesome uses CSS classes.
Summary
Font-Awesome provides a vast collection of icons with various styles and formats, making it suitable for diverse projects. However, this comes at the cost of larger file sizes and potential complexity. Ionicons, on the other hand, offers a more streamlined approach with a focus on performance and ease of use, particularly for Ionic framework projects.
The choice between these libraries depends on the specific needs of your project, such as the variety of icons required, performance considerations, and integration with existing frameworks or design systems.
Material Design icons by Google (Material Symbols)
Pros of Material Design Icons
- Extensive collection with over 2,000 icons in various styles and themes
- Official Google design language, ensuring consistency with Android and other Google products
- Regular updates and additions to the icon set
Cons of Material Design Icons
- Larger file size due to the extensive collection, potentially impacting load times
- Less flexibility in customization compared to Ionicons
- Steeper learning curve for developers unfamiliar with Material Design principles
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Ionicons:
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<ion-icon name="heart"></ion-icon>
Both icon libraries offer easy integration, but Material Design Icons uses a more traditional approach with CSS classes, while Ionicons utilizes a custom element with a more modern JavaScript module import.
A scalable set of icons handcrafted with <3 by GitHub
Pros of Octicons
- Specifically designed for GitHub's UI, providing a cohesive look for GitHub-related projects
- Includes more GitHub-specific icons, such as git-related actions and UI elements
- Offers both SVG and PNG formats for broader compatibility
Cons of Octicons
- Smaller icon set compared to Ionicons, limiting options for general-purpose use
- Less frequent updates and additions to the icon library
- More focused on development-related icons, which may not suit all project types
Code Comparison
Ionicons usage:
<ion-icon name="heart"></ion-icon>
Octicons usage:
<svg class="octicon octicon-heart" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path>
</svg>
Ionicons offers a simpler implementation with custom elements, while Octicons requires more verbose SVG markup. However, Octicons provides more control over the icon's appearance and behavior directly in the markup.
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Pros of Tabler Icons
- Larger icon set with over 4,200 icons compared to Ionicons' 1,300+
- Includes both outline and solid styles for most icons
- Offers SVG sprite option for easier implementation
Cons of Tabler Icons
- Less established and potentially less stable than Ionicons
- May have a steeper learning curve for newcomers
- Fewer pre-built component integrations for popular frameworks
Code Comparison
Ionicons usage:
<ion-icon name="heart"></ion-icon>
Tabler Icons usage:
<svg class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg>
Both icon libraries offer extensive collections of high-quality icons for web and mobile applications. Ionicons is more established and integrated with popular frameworks, while Tabler Icons provides a larger set of icons with more style options. The choice between the two depends on specific project requirements, design preferences, and framework compatibility.
Official open source SVG icon library for Bootstrap.
Pros of Icons
- Larger icon set with over 1,800 icons compared to Ionicons' ~1,300
- Designed specifically for Bootstrap, ensuring seamless integration with the framework
- Includes both SVG and web font versions for flexibility in implementation
Cons of Icons
- Less frequent updates compared to Ionicons
- Limited customization options for individual icons
- Heavier file size due to the larger icon set
Code Comparison
Ionicons usage:
<ion-icon name="heart"></ion-icon>
Icons usage:
<i class="bi bi-heart"></i>
Summary
Both Ionicons and Icons are popular icon libraries for web development. Ionicons offers a more streamlined and frequently updated set of icons with better customization options, while Icons provides a larger collection specifically tailored for Bootstrap projects. The choice between the two depends on the specific project requirements, framework preferences, and desired level of customization.
Ionicons may be preferred for projects requiring frequent updates and extensive icon customization, while Icons is ideal for Bootstrap-based projects that need a wide variety of pre-designed icons. Both libraries offer easy implementation, with Ionicons using a custom element approach and Icons utilizing CSS classes.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Ionicons
Ionicons is a completely open-source icon set with 1,300 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.
We intend for this icon pack to be used with Ionic, but itâs by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under MIT.
Contributing
Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.
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 that are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource.
Installation
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 </body>
tag, to enable them.
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>
Basic usage
To use a built-in icon from the Ionicons package, populate the name
attribute on the ion-icon component:
<ion-icon name="heart"></ion-icon>
Custom icons
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.
<ion-icon src="/path/to/external/file.svg"></ion-icon>
Custom Asset Path
If you have a different set of icons you would like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via:
import { setAssetPath } from '@stencil/core'
// set root path for loading icons to "<root>/public/svg"
setAssetPath(`${window.location.origin}/public/svg/`);
This allows the use of named icons like this:
<!-- now pulls the svg from "<root>/public/svg/heart.svg" -->
<ion-icon name="heart"></ion-icon>
Variants
Each app icon in Ionicons has a filled
, outline
and sharp
variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants.
<ion-icon name="heart"></ion-icon> <!--filled-->
<ion-icon name="heart-outline"></ion-icon> <!--outline-->
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->
Platform specificity
When using icons in Ionic Framework you can specify different icons per platform. Use the md
and ios
attributes and provide the platform-specific icon/variant name.
<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>
Size
To specify the icon size, you can use the size attribute for our pre-defined font sizes.
<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>
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.)
ion-icon {
font-size: 64px;
}
Color
Specify the icon color by applying the color
CSS property on the ion-icon
component.
ion-icon {
color: blue;
}
Stroke width
When using an outline
icon variant it is possible to adjust the stroke width, for improved visual balance relative to the icon's size or relative to the width of adjacent text. You can set a specific size by applying the --ionicon-stroke-width
CSS custom property to the ion-icon
component. The default value is 32px.
<ion-icon name="heart-outline"></ion-icon>
ion-icon {
--ionicon-stroke-width: 16px;
}
Migrating from v4
See the 5.0 release notes for a list of icon deletions/renames.
License
Ionicons is licensed under the MIT license.
Related
Top Related Projects
Simply beautiful open-source icons
The iconic SVG, font, and CSS toolkit
Material Design icons by Google (Material Symbols)
A scalable set of icons handcrafted with <3 by GitHub
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Official open source SVG icon library for Bootstrap.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot