Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
The ionicons npm package provides a collection of premium icons for use in web, iOS, Android, and desktop apps. These icons are designed to be used with Ionic Framework but can also be used in any web project. The package includes a variety of icons for different purposes such as user interface design, branding, and visual indicators.
Using Ionicons in a Web Project
This code sample demonstrates how to include an Ionicon in your HTML. The 'name' attribute specifies which icon to display.
<ion-icon name="heart"></ion-icon>
Styling Ionicons with CSS
This CSS code sets the size and color of all Ionicons in a web page. You can customize the icons further using standard CSS properties.
ion-icon {
font-size: 50px;
color: blue;
}
Using Ionicons in JavaScript Frameworks
This code sample shows how to import an Ionicon into a JavaScript framework like Vue or React and use it within the framework's template syntax.
import { heart } from 'ionicons/icons';
<ion-icon :icon="heart"></ion-icon>
Font Awesome is a widely used icon set and toolkit that offers a similar range of icons for web development. It has both free and pro versions, and it's comparable to Ionicons in terms of the variety of icons available. However, Font Awesome icons are primarily distributed as a font, whereas Ionicons are available as web components.
Material Icons are Google's icon set designed to work with Material Design components. They offer a different aesthetic compared to Ionicons, which is more in line with Google's Material Design philosophy. Material Icons are also available as a font and can be easily integrated into web projects.
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability. Feather provides a more minimalistic and simple design compared to Ionicons, which may be more detailed and varied in design.
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.
Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.
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.
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
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>
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>
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-->
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>
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;
}
Specify the icon color by applying the color
CSS property on the ion-icon
component.
ion-icon {
color: blue;
}
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;
}
See the 5.0 release notes for a list of icon deletions/renames.
Ionicons is licensed under the MIT license.
FAQs
Premium icons for Ionic.
The npm package ionicons receives a total of 1,926,169 weekly downloads. As such, ionicons popularity was classified as popular.
We found that ionicons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.