PHPackages driftyco/ionicons - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. driftyco/ionicons ActiveLibrary[Utility & Helpers](/categories/utility) driftyco/ionicons ================= The premium icon font for Ionic Framework. v2.0.1(11y ago)18.0k87.8k↓34%2.1k[47 issues](https://github.com/driftyco/ionicons/issues)[3 PRs](https://github.com/driftyco/ionicons/pulls)7MITTypeScriptCI passing Since Nov 6Pushed 9mo ago371 watchersCompare [ Source](https://github.com/driftyco/ionicons)[ Packagist](https://packagist.org/packages/driftyco/ionicons)[ Docs](http://ionicons.com/)[ RSS](/packages/driftyco-ionicons/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)DependenciesVersions (15)Used By (7) Ionicons ======== [](#ionicons) [Ionicons](http://ionicons.com/) 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](https://ionicframework.com/), 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](http://ionicframework.com/), 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](http://opensource.org/licenses/MIT). Contributing ------------ [](#contributing) Thanks for your interest in contributing! Read up on our guidelines for [contributing](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md)and then look through our issues with a [help wanted](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)label. Using the Web Component ----------------------- [](#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 [](#installation) If you're using [Ionic Framework](https://ionicframework.com/), Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following `` near the end of your page, right before the closing `` tag, to enable them. ``` ``` you can replace `latest` to pick any version of Ionicon, e.g.: ``` ``` ### Basic usage [](#basic-usage) To use a built-in icon from the Ionicons package, populate the `name` attribute on the ion-icon component: ``` ``` ### Custom icons [](#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 `` 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. ``` ``` #### Custom Asset Path [](#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, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // set root path for loading icons to "/public/svg" setAssetPath(`${window.location.origin}/public/svg/`); // only load specific icons addIcons({ add, logoIonic, save }); ``` This allows the use of named icons like this: ``` ``` Variants -------- [](#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. ``` ``` ### Platform specificity [](#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. ``` ``` Size ---- [](#size) 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.) ``` ion-icon { font-size: 64px; } ``` Color ----- [](#color) Specify the icon color by applying the `color` CSS property on the `ion-icon` component. ``` ion-icon { color: blue; } ``` Stroke width ------------ [](#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 { --ionicon-stroke-width: 16px; } ``` Migrating from v4 ----------------- [](#migrating-from-v4) See the [5.0 release notes](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) for a list of icon deletions/renames. License ------- [](#license) Ionicons is licensed under the [MIT license](http://opensource.org/licenses/MIT). Related ------- [](#related) - [Ionicons Homepage](http://ionicons.com/) - [Ionic Framework](https://ionicframework.com/) - [Ionic Discord](https://ionic.link/discord) - [Ionic Forum](https://forum.ionicframework.com/) - [Stencil](https://stenciljs.com/) - [Capacitor](https://capacitorjs.com/) ### Health Score 59 — FairBetter than 99% of packages Maintenance40 Moderate activity, may be stable Popularity67 Solid adoption and visibility Community49 Growing community involvement Maturity71 Established project with proven stability Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~30 days Recently: every ~51 days Total 15 Last Release 4153d ago Major Versions v1.5.2 → v2.0.02014-12-04 ### Community Maintainers ![](https://www.gravatar.com/avatar/d32c5755e4d29c1dde687d0bad973d1f573775b422cd2f66b0cf15b3b87d8d78?d=identicon)[demortis](/maintainers/demortis) --- Top Contributors [![adamdbradley](https://avatars.githubusercontent.com/u/452425?v=4)](https://github.com/adamdbradley "adamdbradley (189 commits)")[![liamdebeasi](https://avatars.githubusercontent.com/u/2721089?v=4)](https://github.com/liamdebeasi "liamdebeasi (107 commits)")[![manucorporat](https://avatars.githubusercontent.com/u/127379?v=4)](https://github.com/manucorporat "manucorporat (88 commits)")[![kevinports](https://avatars.githubusercontent.com/u/751207?v=4)](https://github.com/kevinports "kevinports (48 commits)")[![Ionitron](https://avatars.githubusercontent.com/u/6591344?v=4)](https://github.com/Ionitron "Ionitron (35 commits)")[![christian-bromann](https://avatars.githubusercontent.com/u/731337?v=4)](https://github.com/christian-bromann "christian-bromann (32 commits)")[![brandyscarney](https://avatars.githubusercontent.com/u/6577830?v=4)](https://github.com/brandyscarney "brandyscarney (31 commits)")[![mlynch](https://avatars.githubusercontent.com/u/11214?v=4)](https://github.com/mlynch "mlynch (14 commits)")[![sean-perkins](https://avatars.githubusercontent.com/u/13732623?v=4)](https://github.com/sean-perkins "sean-perkins (13 commits)")[![camwiegert](https://avatars.githubusercontent.com/u/2547860?v=4)](https://github.com/camwiegert "camwiegert (8 commits)")[![perrygovier](https://avatars.githubusercontent.com/u/571056?v=4)](https://github.com/perrygovier "perrygovier (8 commits)")[![thetaPC](https://avatars.githubusercontent.com/u/13530427?v=4)](https://github.com/thetaPC "thetaPC (6 commits)")[![mapsandapps](https://avatars.githubusercontent.com/u/14926794?v=4)](https://github.com/mapsandapps "mapsandapps (6 commits)")[![bensperry](https://avatars.githubusercontent.com/u/519526?v=4)](https://github.com/bensperry "bensperry (3 commits)")[![elylucas](https://avatars.githubusercontent.com/u/168135?v=4)](https://github.com/elylucas "elylucas (3 commits)")[![ianstormtaylor](https://avatars.githubusercontent.com/u/311752?v=4)](https://github.com/ianstormtaylor "ianstormtaylor (2 commits)")[![kensodemann](https://avatars.githubusercontent.com/u/1526846?v=4)](https://github.com/kensodemann "kensodemann (2 commits)")[![averyjohnston](https://avatars.githubusercontent.com/u/90629384?v=4)](https://github.com/averyjohnston "averyjohnston (2 commits)")[![peterennis](https://avatars.githubusercontent.com/u/140737?v=4)](https://github.com/peterennis "peterennis (2 commits)")[![peterpeterparker](https://avatars.githubusercontent.com/u/16886711?v=4)](https://github.com/peterpeterparker "peterpeterparker (2 commits)") --- Tags icon-packiconsiconsetionicioniconsstenciljswebcomponentsiconsionicicon fontfontsweb font ### Embed Badge ![Health badge](/badges/driftyco-ionicons/health.svg) ``` [![Health](https://phpackages.com/badges/driftyco-ionicons/health.svg)](https://phpackages.com/packages/driftyco-ionicons) ``` ### Alternatives [twbs/bootstrap-icons Official open source SVG icon library for Bootstrap 7.9k2.0M56](/packages/twbs-bootstrap-icons)[simple-icons/simple-icons SVG icons for popular brands 24.8k194.2k4](/packages/simple-icons-simple-icons)[mervick/material-design-icons Google Material Design Icons For Using With Bootstrap 10191.4k7](/packages/mervick-material-design-icons)[kenangundogan/fontisto Fontisto gives you scalable vector icons that can instantly be customized: size, color, drop shadow and anything that can be done with the power of CSS. 4901.6k](/packages/kenangundogan-fontisto)[codewithdennis/filament-lucide-icons A Filament plugin that integrates Lucide icons, allowing you to use them seamlessly across Filament forms, tables, actions, and more. 4529.4k2](/packages/codewithdennis-filament-lucide-icons)[quellenform/t3x-iconpack Provides an iconpack-registry for custom iconpacks. 1542.7k25](/packages/quellenform-t3x-iconpack) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)