Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Last update: Jun 30, 2022

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 which 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 tag, to enable them.

<script src="https://unpkg.com/[email protected]/dist/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>

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

GitHub

https://github.com/ionic-team/ionicons
Comments
  • 1. Ionicons - Missing Save Icon

    From @baltazaroliveira on October 4, 2016 15:9

    I am missing Save Icons in Ionicons. Please implement in a next release.

    Copied from original issue: driftyco/ionic#8480

    Reviewed by brandyscarney at 2016-10-04 16:43
  • 2. Ionicons v4 - Web Component Testing

    Ionicons v4 is being built to also work as a web component. Instead of using an icon font that includes every icon, and a css file that includes every icon's css, the web component version will lazy load the icon as an svg. This means all 900+ icons are available on-demand, but without having to download them all. Additionally, the icon font file itself is a culprit to holding up TTI, so this new way will help speed up startup times.

    Another thing that's unique is that instead of just using just an img tag that requests an svg file, such as: <img src="star.svg"> it actually sets the svg elements within the DOM, which allows developers to customize any svg element with css. It will also work cross-origin and on the file:// protocol.

    To test out Ionicons as a web component:

    Add this script to any webpage: 
    https://unpkg.com/[email protected]/dist/ionicons.js
    
    Add this element to the DOM:
    <ion-icon name="star"></ion-icon>
    

    Note that you can add <ion-icon> to the DOM however you want, whether it's just written within an index.html file, appended to the DOM using jQuery, or apart of an angular/react/vue/etc. component.

    Please give it a test and let us know how it goes. Additionally, the npm package still includes the icon font, optimized svgs, and PNGs, so you still have many options for how you'd like to use these icons.

    Reviewed by adamdbradley at 2017-09-20 13:46
  • 3. How do I get the outlined Icons back?

    I use the font icon set with <i class="icon ion-ios-chatboxes-outline"></i> but I do not see anything. When I remove the -outline the icon appears.

    Do I have to add something else?

    Reviewed by muuvmuuv at 2018-05-23 10:23
  • 4. [cli v4] App size too big, all ionicons v4 packed into bundle

    Description: In an Ionic v4 app, when building it with the cli v4, all ionicons will be integrated in the bundle regardless of their use or not which leads to a too big app size

    When I run ionic cordova build android --prod --release the app-release.apk will contains a folder www/svg with all ionicons

    Steps to Reproduce:

     ionic start test-icons --type=angular
     cd test-icons
     ionic cordova build android --prod
     cd platforms/android/app/build/outputs/apk/debug/
     unzip app-debug.apk
     cd assets/www/svg/
     ls -ltr
    

    or

    ls -ltr | wc -l 
    

    which will count 697 icons

    Output:

    capture d ecran 2018-08-16 a 21 11 41

    My ionic info:

    Ionic:

    ionic (Ionic CLI) : 4.0.3 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.0.0-beta.3 @angular-devkit/core : 0.7.3 @angular-devkit/schematics : 0.7.3 @angular/cli : 6.1.3 @ionic/ng-toolkit : 1.0.6 @ionic/schematics-angular : 1.0.5

    Cordova:

    cordova (Cordova CLI) : 8.0.0 Cordova Platforms : android 7.0.0

    System:

    Android SDK Tools : 26.1.1 ios-deploy : 1.9.2 ios-sim : 5.0.13 NodeJS : v10.4.0 (/usr/local/bin/node) npm : 6.2.0 OS : macOS High Sierra Xcode : Xcode 9.4.1 Build version 9F2000

    Reviewed by peterpeterparker at 2018-08-16 19:13
  • 5. Beaker icon is actually an erlenmeyer flask

    Hello,

    Thank you for the wonderful icons, this is my goto icon font for most all of my projects. However, I have discovered a critical error. The ion-beaker icon is actually an icon of an erlenmeyer flask. This has caused me much emotional distress.

    ion-beaker

    image

    Actual beaker

    http://en.wikipedia.org/wiki/Beaker_(glassware) image

    Actual erlenmeyer flask

    http://en.wikipedia.org/wiki/Erlenmeyer_flask image

    Reviewed by austinpray at 2014-11-07 19:28
  • 6. ionicons errors on typescript >= 4.4.x

    Prerequisites

    Ionic Framework Version

    • [ ] v4.x
    • [ ] v5.x
    • [x] v6.x

    Current Behavior

    Attempting to use Ionic 6 RC.0 with Angular 13 beta fails due to the latter requiring TypeScript >= 4.4.3.

    Looking at the Ionic/Angular 6 package.json, some of the dependencies are quite out of date. It was my impression that moving forward Ionic was only going to support the last 2 major versions of Angular, which would mean the oldest supported version would be Angular 11, not Angular 8 as things currently stand.

    Expected Behavior

    That Ionic 6 supports TypeScript >= 4.4.3

    Steps to Reproduce

    Install Ionic 6 RC + Angular Beta

    Code Reproduction URL

    No response

    Ionic Info

    No response

    Additional Information

    No response

    Reviewed by godenji at 2021-10-07 17:27
  • 7. Any option to serve ionicons locally?

    My React application is using the font-icon version of Ionicons (using CSS). The style of the page breaks when the icons won't load (i.e., when there is no internet). As my app will be deployed on a local intranet where internet won't be available for most of the time. Is there any possibility to use Ionicons (Font icon, to be exact) offline?

    Reviewed by arkn98 at 2018-11-03 09:40
  • 8. Adding of VK social icon

    Hello guys! I offer you to add an icon of one of most popular social network in the world. It is vk.com, here is a vector file: http://www.flaticon.com/free-icon/vk-social-network-logo_25684 Thank you.

    Reviewed by Almaz at 2015-07-21 23:25
  • 9. Could not resolve './components' from ./node_modules/ionicons/dist/collection/index.js

    Hello, after the update to @ ionic / core ":" ^ 5.2.2 " ionicons was updated too, unfortunately there is now a build error from stenciljs.

    [ERROR] Rollup: Unresolved import
               Could not resolve './components' from ./node_modules/ionicons/dist/collection/index.js
    

    an export has apparently been added here export * from './components';

    in the directory components, there are only sub directories.

    if i remove the export from index.js, it works!

    Best greetings

    Reviewed by Scan0815 at 2020-06-24 10:03
  • 10. setting the stroke color

    I am using the icon people-outline using the HTML: <ion-icon name="people-outline" class="overviewIcon" style="color: blue;"></ion-icon>

    The color remains black even with the style. How can I change the border color or the fill color of the icon ?

    Reviewed by noorbakerally at 2020-02-18 12:38
  • 11. many icons missing

    I'm assuming this is really an Ionicons issues vs. Ionic.

    There are many missing Ionicons.

    Sample Codepen : http://codepen.io/calendee/pen/emJxyv

    Releases : Ionic Nightly and Beta 13.

    Reviewed by calendee at 2014-12-09 22:24
  • 12. fix: Make pricetag dot themable

    The change proposed addresses https://github.com/ionic-team/ionicons/issues/1076, originally observed in https://github.com/jenkinsci/jenkins/pull/6686.

    Reviewed by NotMyFault at 2022-06-23 14:07
CoreUI Icons (1500+ Free icons)- Simply beautiful open source icons
CoreUI Icons (1500+ Free icons)- Simply beautiful open source icons

CoreUI Free Icons - Premium designed free icon set with marks in SVG, Webfont and raster formats

Jun 25, 2022
A monorepo package of icons that includes svg icons and js components

This is a monorepo package of icons that includes svg icons and js components (e.g. Vue Components).

Sep 11, 2021
CoreUI Icons for Vue.js. Dedicated component used to implement CoreUI Icons SVG set in Vue.js.

CoreUI Icons Vue CIcon component Dedicated component used to implement CoreUI Icons SVG set in Vue.js. Features Can load icons in three ways: stored g

Jun 14, 2022
⛄️ Vue Icon Set Components from Ionic Team

β›„ Vue Ionicons Vue Icon Set Components from Ionic Team Design icons sourced from the Ionicons project. ?? Demo https://mazipan.github.io/vue-ionicons

Dec 29, 2021
A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects.
A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Tabler Icons A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid an

Jun 30, 2022
Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.

Vue-Awesome Awesome SVG icon component for Vue.js, with built-in Font Awesome icons. ???? δΈ­ζ–‡η‰ˆ Vue-Awesome an SVG icon component for Vue.js, with built

Jul 1, 2022
GitHub corner Icons built using Vue 3 (Vue 2 + Composition API) πŸ₯³

V-Github-Icon GitHub corners made easy! This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it ?? Demo here ->

Jan 10, 2022
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.

?? SVG - Simple Line Icons This is a Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop. By default componen

Apr 22, 2022
A library of free open source icons for science illustrations in biology and chemistry

Bioicons is a free library of open source icons for scientific illustrations using vector graphics software such as Inkscape or Adobe Illustrator.

Jul 1, 2022
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.
😸 Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop.

?? SVG - Simple Line Icons This is a Vue component for Simple Line Icons and you may choose a SVG or a Font icon just with a prop. By default componen

Apr 22, 2022
A clean and simple Vue wrapper for SweetAlert's fantastic status icons
A clean and simple Vue wrapper for SweetAlert's fantastic status icons

Animated SweetAlert Icons for Vue A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are i

Apr 28, 2022
iconic - Build svg icons that can be used in html, angular, react and vue

iconic - Build svg icons that can be used in html, angular, react and vue

Aug 25, 2019
Easy to use vue button with animations and icons

Easy to use vue button with animations and icons

Apr 11, 2020
Easy to use vue wrapper around feather icons, inheriting color and size from css cascade

feather-icons-vue Easy to use vue wrapper around feather icons, inheriting color and size from css cascade. The whole deal about feather-icons-vue is

Aug 1, 2020
Font icons and Vue components target IOT development

Font icons and Vue components target IOT development. (Generated by Sketch and outputs Web version and VueJS component version.)

Mar 13, 2020
Material Design Icons as Vue Single File Components

Vue Material Design Icon Components This library is a collection of Vue single-file components to render Material Design Icons, sourced from the Mater

Jun 16, 2022
Dead easy, Google Material Icons for Vue

vue-ico Dead easy, Google Material Icons for Vue. This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all

Nov 13, 2021
Material design icons for vue.js

Material Design Icons for Vue.js (reloaded ?? ) MDIVue came into life with the aim to provide an easy-to-use icon library for Vue with the use of Temp

May 24, 2022
A Vue.js plugin/component to help you manage your icons seamlessly

GraphIcon A Vue.js plugin/component to help you manage your icons seamlessly Installation npm install graphicon or yarn add graphicon Usage Install th

Jul 28, 2020