Ionic Icons
Ionic Icons
Use Ionic Icons in any Project!

Alex Patterson

 | Published:  January 20, 2019
 | Updated:  September 30, 2019
#ionic
Ever want to just use Ionic Icons?
You can just add the unpkg tag to your head 😺
Ionic Icon Links
<html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="https://unpkg.com/ionicons@latest/dist/ionicons.js" ></script> <style> .flexcontainer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: row wrap; flex-direction: column; /* tweak the where items line up on the row */ /* valid values are: flex-start, flex-end, space-between, space-around, stretch */ -webkit-align-content: space-around; align-content: space-around; flex-shrink: 0; } .flex{ flex-shrink: 0; } </style> </head> <body class="flexcontainer"> <span class="flex"><p style="float:left">add</p><ion-icon name="add" size="small"></ion-icon></span> <span class="flex"><p style="float:left">add-circle</p><ion-icon name="add-circle" size="small"></ion-icon></span> <span class="flex"><p style="float:left">alarm</p><ion-icon name="alarm" size="small"></ion-icon></span> <span class="flex"><p style="float:left">albums</p><ion-icon name="albums" size="small"></ion-icon></span> <span class="flex"><p style="float:left">alert</p><ion-icon name="alert" size="small"></ion-icon></span> <span class="flex"><p style="float:left">american-football</p><ion-icon name="american-football" size="small"></ion-icon></span> <span class="flex"><p style="float:left">analytics</p><ion-icon name="analytics" size="small"></ion-icon></span> <span class="flex"><p style="float:left">aperture</p><ion-icon name="aperture" size="small"></ion-icon></span> <span class="flex"><p style="float:left">apps</p><ion-icon name="apps" size="small"></ion-icon></span> <span class="flex"><p style="float:left">appstore</p><ion-icon name="appstore" size="small"></ion-icon></span> <span class="flex"><p style="float:left">archive</p><ion-icon name="archive" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-back</p><ion-icon name="arrow-back" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-down</p><ion-icon name="arrow-down" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropdown</p><ion-icon name="arrow-dropdown" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropdown-circle</p><ion-icon name="arrow-dropdown-circle" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropleft</p><ion-icon name="arrow-dropleft" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropleft-circle</p><ion-icon name="arrow-dropleft-circle" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropright</p><ion-icon name="arrow-dropright" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropright-circle</p><ion-icon name="arrow-dropright-circle" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropup</p><ion-icon name="arrow-dropup" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-dropup-circle</p><ion-icon name="arrow-dropup-circle" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-forward</p><ion-icon name="arrow-forward" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-round-back</p><ion-icon name="arrow-round-back" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-round-down</p><ion-icon name="arrow-round-down" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-round-forward</p><ion-icon name="arrow-round-forward" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-round-up</p><ion-icon name="arrow-round-up" size="small"></ion-icon></span> <span class="flex"><p style="float:left">arrow-up</p><ion-icon name="arrow-up" size="small"></ion-icon></span> <span class="flex"><p style="float:left">at</p><ion-icon name="at" size="small"></ion-icon></span> <span class="flex"><p style="float:left">attach</p><ion-icon name="attach" size="small"></ion-icon></span> <span class="flex"><p style="float:left">backspace</p><ion-icon name="backspace" size="small"></ion-icon></span> <span class="flex"><p style="float:left">barcode</p><ion-icon name="barcode" size="small"></ion-icon></span> <span class="flex"><p style="float:left">baseball</p><ion-icon name="baseball" size="small"></ion-icon></span> <span class="flex"><p style="float:left">basket</p><ion-icon name="basket" size="small"></ion-icon></span> <span class="flex"><p style="float:left">basketball</p><ion-icon name="basketball" size="small"></ion-icon></span> <span class="flex"><p style="float:left">battery-charging</p><ion-icon name="battery-charging" size="small"></ion-icon></span> <span class="flex"><p style="float:left">battery-dead</p><ion-icon name="battery-dead" size="small"></ion-icon></span> <span class="flex"><p style="float:left">battery-full</p><ion-icon name="battery-full" size="small"></ion-icon></span> <span class="flex"><p style="float:left">beaker</p><ion-icon name="beaker" size="small"></ion-icon></span> <span class="flex"><p style="float:left">beer</p><ion-icon name="beer" size="small"></ion-icon></span> <span class="flex"><p style="float:left">bicycle</p><ion-icon name="bicycle" size="small"></ion-icon></span> <span class="flex"><p style="float:left">bluetooth</p><ion-icon name="bluetooth" size="small"></ion-icon></span> <span class="flex"><p style="float:left">boat</p><ion-icon name="boat" size="small"></ion-icon></span> <span class="flex"><p style="float:left">body</p><ion-icon name="body" size="small"></ion-icon></span> <span class="flex"><p style="float:left">bonfire</p><ion-icon name="bonfire" size="small"></ion-icon></span> <span class="flex"><p style="float:left">book</p><ion-icon name="book" size="small"></ion-icon></span> <span class="flex"><p style="float:left">bookmark</p><ion-icon name="bookmark" size="small"></ion-icon></span> <span class="flex"><p style="float:left">bookmarks</p><ion-icon name="bookmarks" size="small"></ion-icon></span> <span class="flex"><p style="float:left">bowtie</p><ion-icon name="bowtie" size="small"></ion-icon></span> <span class="flex"><p style="float:left">briefcase</p><ion-icon name="briefcase" size="small"></ion-icon></span> <span class="flex"><p style="float:left">browsers</p><ion-icon name="browsers" size="small"></ion-icon></span> <span class="flex"><p style="float:left">brush</p><ion-icon name="brush" size="small"></ion-icon></span> <span class="flex"><p style="float:left">bug</p><ion-icon name="bug" size="small"></ion-icon></span> <span class="flex"><p style