イオン-アイコン

以上のものがあります 700 premium iconsIonicによって提供されます。AndroidとIOS用に提供されているアイコンの異なるセットもあります。必要なものはほとんど何でも見つけることができますが、使用したくない場合は、それらを使用する必要はありません。代わりに、独自のカスタムアイコンまたはその他のアイコンセットを使用できます。ここですべてのイオンアイコンを確認できます。

アイコンの使い方は？

Ionicアイコンを使用する場合は、ページで必要なアイコンを見つけてください（https://ionicons.com/）。Ionic要素を追加するときは、常に最初にメインクラスを追加してから、必要なサブクラスを追加します。すべてのアイコンのメインクラスはicon。サブクラスは、必要なアイコンの名前です。以下に示す例では、6つのアイコンを追加します-

<i class = "icon icon ion-happy-outline"></i>
<i class = "icon icon ion-star"></i>
<i class = "icon icon ion-compass"></i>
<i class = "icon icon ion-planet"></i>
<i class = "icon icon ion-ios-analytics"></i>
<i class = "icon icon ion-ios-eye"></i>

上記のコードは次の画面を生成します-

これらのアイコンのサイズは、 font-size IonicCSSファイルのプロパティ。

.icon {
   font-size: 50px;
}

アイコンサイズを設定すると、同じコードで次のスクリーンショットが出力として生成されます-

デフォルトのアイコン

コード	結果
<i class = "icon ion-ionic"> </ i>
<i class = "icon ion-arrow-up-a"> </ i>
<i class = "icon ion-arrow-right-a"> </ i>
<i class = "icon ion-arrow-down-a"> </ i>
<i class = "icon ion-arrow-left-a"> </ i>
<i class = "icon ion-arrow-up-b"> </ i>
<i class = "icon ion-arrow-right-b"> </ i>
<i class = "icon ion-arrow-down-b"> </ i>
<i class = "icon ion-arrow-left-b"> </ i>
<i class = "icon ion-arrow-up-c"> </ i>
<i class = "icon ion-arrow-right-c"> </ i>
<i class = "icon ion-arrow-down-c"> </ i>
<i class = "icon ion-arrow-left-c"> </ i>
<i class = "iconion-arrow-return-right"> </ i>
<i class = "iconion-arrow-return-left"> </ i>
<i class = "icon ion-arrow-swap"> </ i>
<i class = "icon ion-arrow-shrink"> </ i>
<i class = "icon ion-arrow-expand"> </ i>
<i class = "icon ion-arrow-move"> </ i>
<i class = "icon ion-arrow-resize"> </ i>
<i class = "icon ion-chevron-up"> </ i>
<i class = "icon ion-chevron-right"> </ i>
<i class = "icon ion-chevron-down"> </ i>
<i class = "icon ion-chevron-left"> </ i>
<i class = "icon ion-navicon-round">​​ </ i>
<i class = "icon ion-navicon"> </ i>
<i class = "icon ion-drag"> </ i>
<i class = "icon ion-log-in"> </ i>
<i class = "icon ion-log-out"> </ i>
<i class = "icon ion-checkmark-round">​​ </ i>
<i class = "icon ion-checkmark"> </ i>
<i class = "icon ion-checkmark-circled"> </ i>
<i class = "icon ion-close-round">​​ </ i>
<i class = "icon ion-close"> </ i>
<i class = "icon ion-close-circled"> </ i>
<i class = "icon ion-plus-round">​​ </ i>
<i class = "icon ion-plus"> </ i>
<i class = "icon ion-plus-circled"> </ i>
<i class = "icon ion-minus-round">​​ </ i>
<i class = "icon ion-minus"> </ i>
<i class = "icon ion-minus-circled"> </ i>
<i class = "icon ion-information"> </ i>
<i class = "icon ion-informaticon ion-circled"> </ i>
<i class = "icon ion-help"> </ i>
<i class = "icon ion-help-circled"> </ i>
<i class = "icon ion-backspace-outline"> </ i>
<i class = "icon ion-backspace"> </ i>
<i class = "icon ion-help-buoy"> </ i>
<i class = "icon ion-asterisk"> </ i>
<i class = "icon ion-alert"> </ i>
<i class = "icon ion-alert-circled"> </ i>
<i class = "icon ion-refresh"> </ i>
<i class = "icon ion-loop"> </ i>
<i class = "icon ion-shuffle"> </ i>
<i class = "icon ion-home"> </ i>
<i class = "icon ion-search"> </ i>
<i class = "icon ion-flag"> </ i>
<i class = "icon ion-star"> </ i>
<i class = "icon ion-heart"> </ i>
<i class = "icon ion-heart-broken"> </ i>
<i class = "icon ion-gear-a"> </ i>
<i class = "icon ion-gear-b"> </ i>
<i class = "icon ion-toggle-filled"> </ i>
<i class = "icon ion-toggle"> </ i>
<i class = "icon ion-settings"> </ i>
<i class = "iconion-wrench"> </ i>
<i class = "icon ion-hammer"> </ i>
<i class = "icon ion-edit"> </ i>
<i class = "icon ion-trash-a"> </ i>
<i class = "icon ion-trash-b"> </ i>
<i class = "icon ion-document"> </ i>
<i class = "icon ion-document-text"> </ i>
<i class = "icon ion-clipboard"> </ i>
<i class = "icon ion-scissors"> </ i>
<i class = "icon ion-funnel"> </ i>
<i class = "icon ion-bookmark"> </ i>
<i class = "icon ion-email"> </ i>
<i class = "icon ion-email-unread"> </ i>
<i class = "icon ion-folder"> </ i>
<i class = "icon ion-filing"> </ i>
<i class = "icon ion-archive"> </ i>
<i class = "icon ion-reply"> </ i>
<i class = "icon ion-reply-all"> </ i>
<i class = "icon ion-forward"> </ i>
<i class = "icon ion-share"> </ i>
<i class = "icon ion-paper-airplane"> </ i>
<i class = "icon ion-link"> </ i>
<i class = "icon ion-paperclip"> </ i>
<i class = "icon ion-compose"> </ i>
<i class = "icon ion-briefcase"> </ i>
<i class = "icon ion-medkit"> </ i>
<i class = "icon ion-at"> </ i>
<i class = "icon ion-pound">​​ </ i>
<i class = "icon ion-quote"> </ i>
<i class = "icon ion-cloud"> </ i>
<i class = "icon ion-upload"> </ i>
<i class = "icon ion-more"> </ i>
<i class = "icon ion-grid"> </ i>
<i class = "icon ion-calendar"> </ i>
<i class = "icon ion-clock"> </ i>
<i class = "icon ion-compass"> </ i>
<i class = "icon ion-pinpoint"> </ i>
<i class = "icon ion-pin"> </ i>
<i class = "icon ion-navigate"> </ i>
<i class = "icon ion-location"> </ i>
<i class = "icon ion-map"> </ i>
<i class = "icon ion-lock-combination"> </ i>
<i class = "icon ion-locked"> </ i>
<i class = "icon ion-unlocked"> </ i>
<i class = "iconion-key"> </ i>
<i class = "iconion-arrow-graph-up​​-right"> </ i>
<i class = "iconion-arrow-graph-down-right"> </ i>
<i class = "iconion-arrow-graph-up​​-left"> </ i>
<i class = "iconion-arrow-graph-down-left"> </ i>
<i class = "icon ion-stats-bars"> </ i>
<i class = "icon ion-connecticonion-bars"> </ i>
<i class = "icon ion-pie-graph"> </ i>
<i class = "icon ion-chatbubble"> </ i>
<i class = "icon ion-chatbubble-working"> </ i>
<i class = "icon ion-chatbubbles"> </ i>
<i class = "icon ion-chatbox"> </ i>
<i class = "icon ion-chatbox-working"> </ i>
<i class = "icon ion-chatboxes"> </ i>
<i class = "icon ion-person"> </ i>
<i class = "icon ion-person-add"> </ i>
<i class = "icon ion-person-stalker"> </ i>
<i class = "icon ion-woman"> </ i>
<i class = "icon ion-man"> </ i>
<i class = "icon ion-female"> </ i>
<i class = "icon ion-male"> </ i>
<i class = "icon ion-transgender"> </ i>
<i class = "icon ion-fork"> </ i>
<i class = "icon ion-knife"> </ i>
<i class = "icon ion-spoon"> </ i>
<i class = "icon ion-soup-can-outline"> </ i>
<i class = "icon ion-soup-can"> </ i>
<i class = "icon ion-beer"> </ i>
<i class = "icon ion-wineglass"> </ i>
<i class = "iconion-coffee"> </ i>
<i class = "iconion-icecream"> </ i>
<i class = "iconion-pizza"> </ i>
<i class = "icon ion-power"> </ i>
<i class = "icon ion-mouse"> </ i>
<i class = "icon ion-battery-full"> </ i>
<i class = "icon ion-battery-half"> </ i>
<i class = "icon ion-battery-low"> </ i>
<i class = "icon ion-battery-empty"> </ i>
<i class = "icon ion-battery-chargeing"> </ i>
<i class = "icon ion-wifi"> </ i>
<i class = "icon ion-bluetooth"> </ i>
<i class = "icon ion-calculator"> </ i>
<i class = "icon ion-camera"> </ i>
<i class = "icon ion-eye"> </ i>
<i class = "icon ion-eye-disabled"> </ i>
<i class = "icon ion-flash"> </ i>
<i class = "icon ion-flash-off"> </ i>
<i class = "icon ion-qr-scanner"> </ i>
<i class = "icon ion-image"> </ i>
<i class = "icon ion-images"> </ i>
<i class = "icon ion-wand"> </ i>
<i class = "icon ion-contrast"> </ i>
<i class = "icon ion-aperture"> </ i>
<i class = "icon ion-crop"> </ i>
<i class = "icon ion-easel"> </ i>
<i class = "icon ion-paintbrush"> </ i>
<i class = "icon ion-paintbucket"> </ i>
<i class = "icon ion-monitor"> </ i>
<i class = "icon ion-laptop"> </ i>
<i class = "icon ion-ipad"> </ i>
<i class = "icon ion-iphone"> </ i>
<i class = "icon ion-ipod"> </ i>
<i class = "icon ion-printer"> </ i>
<i class = "icon ion-usb"> </ i>
<i class = "icon ion-outlet"> </ i>
<i class = "icon ion-bug"> </ i>
<i class = "icon ion-code"> </ i>
<i class = "icon ion-code-working"> </ i>
<i class = "icon ion-code-download"> </ i>
<i class = "icon ion-fork-repo"> </ i>
<i class = "icon ion-network"> </ i>
<i class = "icon ion-pull-request"> </ i>
<i class = "icon ion-merge"> </ i>
<i class = "icon ion-xbox"> </ i>
<i class = "icon ion-playstation"> </ i>
<i class = "icon ion-steam"> </ i>
<i class = "icon ion-closed-captioning"> </ i>
<i class = "icon ion-videocamera"> </ i>
<i class = "icon ion-film-marker"> </ i>
<i class = "icon ion-disc"> </ i>
<i class = "icon ion-headphone"> </ i>
<i class = "icon ion-music-note"> </ i>
<i class = "icon ion-radio-waves"> </ i>
<i class = "icon ion-speakerphone"> </ i>
<i class = "icon ion-mic-a"> </ i>
<i class = "icon ion-mic-b"> </ i>
<i class = "icon ion-mic-c"> </ i>
<i class = "icon ion-volume-high"> </ i>
<i class = "icon ion-volume-medium"> </ i>
<i class = "icon ion-volume-low"> </ i>
<i class = "icon ion-volume-mute"> </ i>
<i class = "icon ion-levels"> </ i>
<i class = "icon ion-play"> </ i>
<i class = "icon ion-pause"> </ i>
<i class = "icon ion-stop"> </ i>
<i class = "icon ion-record"> </ i>
<i class = "icon ion-skip-forward"> </ i>
<i class = "icon ion-skip-backward"> </ i>
<i class = "icon ion-eject"> </ i>
<i class = "icon ion-bag"> </ i>
<i class = "iconion-card"> </ i>
<i class = "icon ion-cash"> </ i>
<i class = "icon ion-pricetag"> </ i>
<i class = "icon ion-pricetags"> </ i>
<i class = "icon ion-thumbsup"> </ i>
<i class = "icon ion-thumbsdown"> </ i>
<i class = "icon ion-happy-outline"> </ i>
<i class = "icon ion-happy"> </ i>
<i class = "icon ion-sad-outline"> </ i>
<i class = "icon ion-sad"> </ i>
<i class = "icon ion-bowtie"> </ i>
<i class = "iconion-tshirt-outline"> </ i>
<i class = "iconion-tshirt"> </ i>
<i class = "icon ion-trophy"> </ i>
<i class = "icon ion-podium"> </ i>
<i class = "icon ion-ribbon-a"> </ i>
<i class = "icon ion-ribbon-b"> </ i>
<i class = "icon ion-university"> </ i>
<i class = "icon ion-magnet"> </ i>
<i class = "icon ion-beaker"> </ i>
<i class = "iconion-erlenmeyer-flask"> </ i>
<i class = "icon ion-egg"> </ i>
<i class = "icon ion-earth"> </ i>
<i class = "icon ion-planet"> </ i>
<i class = "icon ion-lightbulb"> </ i>
<i class = "icon ion-cube"> </ i>
<i class = "icon ion-leaf"> </ i>
<i class = "icon ion-waterdrop"> </ i>
<i class = "icon ion-flame"> </ i>
<i class = "icon ion-fireball"> </ i>
<i class = "icon ion-bonfire"> </ i>
<i class = "icon ion-umbrella"> </ i>
<i class = "icon ion-nuclear"> </ i>
<i class = "iconion-no-smoking"> </ i>
<i class = "icon ion-thermometer"> </ i>
<i class = "icon ion-speedometer"> </ i>
<i class = "icon ion-model-s"> </ i>
<i class = "icon ion-plane"> </ i>
<i class = "iconion-jet"> </ i>
<i class = "icon ion-load-a"> </ i>
<i class = "icon ion-load-b"> </ i>
<i class = "icon ion-load-c"> </ i>
<i class = "icon ion-load-d"> </ i>

iOSスタイルのアイコン

コード	結果
<i class = "icon ion-ios-ionic-outline"> </ i>
<i class = "icon ion-ios-arrow-back"> </ i>
<i class = "icon ion-ios-arrow-forward"> </ i>
<i class = "icon ion-ios-arrow-up"> </ i>
<i class = "iconion-ios-arrow-right"> </ i>
<i class = "icon ion-ios-arrow-down"> </ i>
<i class = "iconion-ios-arrow-left"> </ i>
<i class = "icon ion-ios-arrow-thin-up"> </ i>
<i class = "iconion-ios-arrow-thin-right"> </ i>
<i class = "icon ion-ios-arrow-thin-down"> </ i>
<i class = "iconion-ios-arrow-thin-left"> </ i>
<i class = "icon ion-ios-circle-filled"> </ i>
<i class = "icon ion-ios-circle-outline"> </ i>
<i class = "iconion-ios-checkmark-empty"> </ i>
<i class = "icon ion-ios-checkmark-outline"> </ i>
<i class = "icon ion-ios-checkmark"> </ i>
<i class = "iconion-ios-plus-empty"> </ i>
<i class = "icon ion-ios-plus-outline"> </ i>
<i class = "icon ion-ios-plus"> </ i>
<i class = "iconion-ios-close-empty"> </ i>
<i class = "icon ion-ios-close-outline"> </ i>
<i class = "icon ion-ios-close"> </ i>
<i class = "iconion-ios-minus-empty"> </ i>
<i class = "icon ion-ios-minus-outline"> </ i>
<i class = "icon ion-ios-minus"> </ i>
<i class = "icon ion-ios-informaticonion-empty"> </ i>
<i class = "icon ion-ios-informaticonion-outline"> </ i>
<i class = "icon ion-ios-information"> </ i>
<i class = "iconion-ios-help-empty"> </ i>
<i class = "icon ion-ios-help-outline"> </ i>
<i class = "icon ion-ios-help"> </ i>
<i class = "icon ion-ios-search"> </ i>
<i class = "icon ion-ios-search-strong"> </ i>
<i class = "icon ion-ios-star"> </ i>
<i class = "icon ion-ios-star-half"> </ i>
<i class = "icon ion-ios-star-outline"> </ i>
<i class = "icon ion-ios-heart"> </ i>
<i class = "icon ion-ios-heart-outline"> </ i>
<i class = "icon ion-ios-more"> </ i>
<i class = "icon ion-ios-more-outline"> </ i>
<i class = "icon ion-ios-home"> </ i>
<i class = "icon ion-ios-home-outline"> </ i>
<i class = "icon ion-ios-cloud"> </ i>
<i class = "icon ion-ios-cloud-outline"> </ i>
<i class = "icon ion-ios-cloud-upload"> </ i>
<i class = "iconion-ios-cloud-upload-outline"> </ i>
<i class = "iconion-ios-cloud-download"> </ i>
<i class = "iconion-ios-cloud-download-outline"> </ i>
<i class = "icon ion-ios-upload"> </ i>
<i class = "icon ion-ios-upload-outline"> </ i>
<i class = "icon ion-ios-download"> </ i>
<i class = "iconion-ios-download-outline"> </ i>
<i class = "icon ion-ios-refresh"> </ i>
<i class = "icon ion-ios-refresh-outline"> </ i>
<i class = "iconion-ios-refresh-empty"> </ i>
<i class = "icon ion-ios-reload"> </ i>
<i class = "icon ion-ios-loop-strong"> </ i>
<i class = "icon ion-ios-loop"> </ i>
<i class = "icon ion-ios-bookmarks"> </ i>
<i class = "icon ion-ios-bookmarks-outline"> </ i>
<i class = "icon ion-ios-book"> </ i>
<i class = "icon ion-ios-book-outline"> </ i>
<i class = "icon ion-ios-flag"> </ i>
<i class = "icon ion-ios-flag-outline"> </ i>
<i class = "icon ion-ios-glasses"> </ i>
<i class = "icon ion-ios-glasses-outline"> </ i>
<i class = "icon ion-ios-browsers"> </ i>
<i class = "icon ion-ios-browsers-outline"> </ i>
<i class = "icon ion-ios-at"> </ i>
<i class = "icon ion-ios-at-outline"> </ i>
<i class = "icon ion-ios-pricetag"> </ i>
<i class = "iconion-ios-pricetag-outline"> </ i>
<i class = "icon ion-ios-pricetags"> </ i>
<i class = "iconion-ios-pricetags-outline"> </ i>
<i class = "icon ion-ios-cart"> </ i>
<i class = "icon ion-ios-cart-outline"> </ i>
<i class = "icon ion-ios-chatboxes"> </ i>
<i class = "icon ion-ios-chatboxes-outline"> </ i>
<i class = "iconion-ios-chatbubble"> </ i>
<i class = "iconion-ios-chatbubble-outline"> </ i>
<i class = "icon ion-ios-cog"> </ i>
<i class = "icon ion-ios-cog-outline"> </ i>
<i class = "icon ion-ios-gear"> </ i>
<i class = "icon ion-ios-gear-outline"> </ i>
<i class = "icon ion-ios-settings"> </ i>
<i class = "icon ion-ios-settings-strong"> </ i>
<i class = "icon ion-ios-toggle"> </ i>
<i class = "icon ion-ios-toggle-outline"> </ i>
<i class = "icon ion-ios-analytics"> </ i>
<i class = "icon ion-ios-analytics-outline"> </ i>
<i class = "icon ion-ios-pie"> </ i>
<i class = "icon ion-ios-pie-outline"> </ i>
<i class = "icon ion-ios-pulse"> </ i>
<i class = "icon ion-ios-pulse-strong"> </ i>
<i class = "icon ion-ios-filing"> </ i>
<i class = "icon ion-ios-filing-outline"> </ i>
<i class = "icon ion-ios-box"> </ i>
<i class = "icon ion-ios-box-outline"> </ i>
<i class = "icon ion-ios-compose"> </ i>
<i class = "icon ion-ios-compose-outline"> </ i>
<i class = "icon ion-ios-trash"> </ i>
<i class = "icon ion-ios-trash-outline"> </ i>
<i class = "icon ion-ios-copy"> </ i>
<i class = "icon ion-ios-copy-outline"> </ i>
<i class = "icon ion-ios-email"> </ i>
<i class = "icon ion-ios-email-outline"> </ i>
<i class = "icon ion-ios-undo"> </ i>
<i class = "iconion-ios-undo-outline"> </ i>
<i class = "icon ion-ios-redo"> </ i>
<i class = "icon ion-ios-redo-outline"> </ i>
<i class = "icon ion-ios-paperplane"> </ i>
<i class = "iconion-ios-paperplane-outline"> </ i>
<i class = "icon ion-ios-folder"> </ i>
<i class = "icon ion-ios-folder-outline"> </ i>
<i class = "icon ion-ios-paper"> </ i>
<i class = "icon ion-ios-paper-outline"> </ i>
<i class = "icon ion-ios-list"> </ i>
<i class = "icon ion-ios-list-outline"> </ i>
<i class = "icon ion-ios-world"> </ i>
<i class = "icon ion-ios-world-outline"> </ i>
<i class = "icon ion-ios-alarm"> </ i>
<i class = "icon ion-ios-alarm-outline"> </ i>
<i class = "icon ion-ios-speedometer"> </ i>
<i class = "iconion-ios-speedometer-outline"> </ i>
<i class = "icon ion-ios-stopwatch"> </ i>
<i class = "iconion-ios-stopwatch-outline"> </ i>
<i class = "icon ion-ios-timer"> </ i>
<i class = "icon ion-ios-timer-outline"> </ i>
<i class = "icon ion-ios-clock"> </ i>
<i class = "icon ion-ios-clock-outline"> </ i>
<i class = "icon ion-ios-time"> </ i>
<i class = "icon ion-ios-time-outline"> </ i>
<i class = "icon ion-ios-calendar"> </ i>
<i class = "icon ion-ios-calendar-outline"> </ i>
<i class = "icon ion-ios-photos"> </ i>
<i class = "iconion-ios-photos-outline"> </ i>
<i class = "icon ion-ios-albums"> </ i>
<i class = "icon ion-ios-albums-outline"> </ i>
<i class = "icon ion-ios-camera"> </ i>
<i class = "icon ion-ios-camera-outline"> </ i>
<i class = "iconion-ios-reverse-camera"> </ i>
<i class = "iconion-ios-reverse-camera-outline"> </ i>
<i class = "icon ion-ios-eye"> </ i>
<i class = "icon ion-ios-eye-outline"> </ i>
<i class = "icon ion-ios-bolt"> </ i>
<i class="icon ion-ios-bolt-outline"></i>
<i class="icon ion-ios-color-wand"></i>
<i class="icon ion-ios-color-wand-outline"></i>
<i class="icon ion-ios-color-filter"></i>
<i class="icon ion-ios-color-filter-outline"></i>
<i class="icon ion-ios-grid-view"></i>
<i class="icon ion-ios-grid-view-outline"></i>
<i class="icon ion-ios-crop-strong"></i>
<i class="icon ion-ios-crop"></i>
<i class="icon ion-ios-barcode"></i>
<i class="icon ion-ios-barcode-outline"></i>
<i class="icon ion-ios-briefcase"></i>
<i class="icon ion-ios-briefcase-outline"></i>
<i class="icon ion-ios-medkit"></i>
<i class="icon ion-ios-medkit-outline"></i>
<i class="icon ion-ios-medical"></i>
<i class="icon ion-ios-medical-outline"></i>
<i class="icon ion-ios-infinite"></i>
<i class="icon ion-ios-infinite-outline"></i>
<i class="icon ion-ios-calculator"></i>
<i class="icon ion-ios-calculator-outline"></i>
<i class="icon ion-ios-keypad"></i>
<i class="icon ion-ios-keypad-outline"></i>
<i class="icon ion-ios-telephone"></i>
<i class="icon ion-ios-telephone-outline"></i>
<i class="icon ion-ios-drag"></i>
<i class="icon ion-ios-location"></i>
<i class="icon ion-ios-locaticon ion-outline"></i>
<i class="icon ion-ios-navigate"></i>
<i class="icon ion-ios-navigate-outline"></i>
<i class="icon ion-ios-locked"></i>
<i class="icon ion-ios-locked-outline"></i>
<i class="icon ion-ios-unlocked"></i>
<i class="icon ion-ios-unlocked-outline"></i>
<i class="icon ion-ios-monitor"></i>
<i class="icon ion-ios-monitor-outline"></i>
<i class="icon ion-ios-printer"></i>
<i class="icon ion-ios-printer-outline"></i>
<i class="icon ion-ios-game-controller-a"></i>
<i class="icon ion-ios-game-controller-a-outline"></i>
<i class="icon ion-ios-game-controller-b"></i>
<i class="icon ion-ios-game-controller-b-outline"></i>
<i class="icon ion-ios-americanfootball"></i>
<i class="icon ion-ios-americanfootball-outline"></i>
<i class="icon ion-ios-baseball"></i>
<i class="icon ion-ios-baseball-outline"></i>
<i class="icon ion-ios-basketball"></i>
<i class="icon ion-ios-basketball-outline"></i&gtgt;
<i class="icon ion-ios-tennisball"></i>
<i class="icon ion-ios-tennisball-outline"></i>
<i class="icon ion-ios-football"></i>
<i class="icon ion-ios-football-outline"></i>
<i class="icon ion-ios-body"></i>
<i class="icon ion-ios-body-outline"></i>
<i class="icon ion-ios-person"></i>
<i class="icon ion-ios-person-outline"></i>
<i class="icon ion-ios-personadd"></i>
<i class="icon ion-ios-personadd-outline"></i>
<i class="icon ion-ios-people"></i>
<i class="icon ion-ios-people-outline"></i>
<i class="icon ion-ios-musical-notes"></i>
<i class="icon ion-ios-musical-note"></i>
<i class="icon ion-ios-bell"></i>
<i class="icon ion-ios-bell-outline"></i>
<i class="icon ion-ios-mic"></i>
<i class="icon ion-ios-mic-outline"></i>
<i class="icon ion-ios-mic-off"></i>
<i class="icon ion-ios-volume-high"></i>
<i class="icon ion-ios-volume-low"></i>
<i class="icon ion-ios-play"></i>
<i class="icon ion-ios-play-outline"></i>
<i class="icon ion-ios-pause"></i>
<i class="icon ion-ios-pause-outline"></i>
<i class="icon ion-ios-recording"></i>
<i class="icon ion-ios-recording-outline"></i>
<i class="icon ion-ios-fastforward"></i>
<i class="icon ion-ios-fastforward-outline"></i>
<i class="icon ion-ios-rewind"></i>
<i class="icon ion-ios-rewind-outline"></i>
<i class="icon ion-ios-skipbackward"></i>
<i class="icon ion-ios-skipbackward-outline"></i>
<i class="icon ion-ios-skipforward"></i>
<i class="icon ion-ios-skipforward-outline"></i>
<i class="icon ion-ios-shuffle-strong"></i>
<i class="icon ion-ios-shuffle"></i>
<i class="icon ion-ios-videocam"></i>
<i class="icon ion-ios-videocam-outline"></i>
<i class="icon ion-ios-film"></i>
<i class="icon ion-ios-film-outline"></i>
<i class="icon ion-ios-flask"></i>
<i class="icon ion-ios-flask-outline"></i>
<i class="icon ion-ios-lightbulb"></i>
<i class="icon ion-ios-lightbulb-outline"></i>
<i class="icon ion-ios-wineglass"></i>
<i class="icon ion-ios-wineglass-outline"></i>
<i class="icon ion-ios-pint"></i>
<i class="icon ion-ios-pint-outline"></i>
<i class="icon ion-ios-nutrition"></i>
<i class="icon ion-ios-nutriticon ion-outline"></i>
<i class="icon ion-ios-flower"></i>
<i class="icon ion-ios-flower-outline"></i>
<i class="icon ion-ios-rose"></i>
<i class="icon ion-ios-rose-outline"></i>
<i class="icon ion-ios-paw"></i>
<i class="icon ion-ios-paw-outline"></i>
<i class="icon ion-ios-flame"></i>
<i class="icon ion-ios-flame-outline"></i>
<i class="icon ion-ios-sunny"></i>
<i class="icon ion-ios-sunny-outline"></i>
<i class="icon ion-ios-partlysunny"></i>
<i class="icon ion-ios-partlysunny-outline"></i>
<i class="icon ion-ios-cloudy"></i>
<i class="icon ion-ios-cloudy-outline"></i>
<i class="icon ion-ios-rainy"></i>
<i class="icon ion-ios-rainy-outline"></i>
<i class="icon ion-ios-thunderstorm"></i>
<i class="icon ion-ios-thunderstorm-outline"></i>
<i class="icon ion-ios-snowy"></i>
<i class="icon ion-ios-moon"></i>
<i class="icon ion-ios-moon-outline"></i>
<i class="icon ion-ios-cloudy-night"></i>
<i class="icon ion-ios-cloudy-night-outline"></i>

Android Style Icons

Code	Result
<i class="icon ion-android-arrow-up"></i>
<i class="icon ion-android-arrow-forward"></i>
<i class="icon ion-android-arrow-down"></i>
<i class="icon ion-android-arrow-back"></i>
<i class="icon ion-android-arrow-dropup"></i>
<i class="icon ion-android-arrow-dropup-circle"></i>
<i class="icon ion-android-arrow-dropright"></i>
<i class="icon ion-android-arrow-dropright-circle"></i>
<i class="icon ion-android-arrow-dropdown"></i>
<i class="icon ion-android-arrow-dropdown-circle"></i>
<i class="icon ion-android-arrow-dropleft"></i>
<i class="icon ion-android-arrow-dropleft-circle"></i>
<i class="icon ion-android-add"></i>
<i class="icon ion-android-add-circle"></i>
<i class="icon ion-android-remove"></i>
<i class="icon ion-android-remove-circle"></i>
<i class="icon ion-android-close"></i>
<i class="icon ion-android-cancel"></i>
<i class="icon ion-android-radio-button-off"></i>
<i class="icon ion-android-radio-button-on"></i>
<i class="icon ion-android-checkmark-circle"></i>
<i class="icon ion-android-checkbox-outline-blank"></i>
<i class="icon ion-android-checkbox-outline"></i>
<i class="icon ion-android-checkbox-blank"></i>
<i class="icon ion-android-checkbox"></i>
<i class="icon ion-android-done"></i>
<i class="icon ion-android-done-all"></i>
<i class="icon ion-android-menu"></i>
<i class="icon ion-android-more-horizontal"></i>
<i class="icon ion-android-more-vertical"></i>
<i class="icon ion-android-refresh"></i>
<i class="icon ion-android-sync"></i>
<i class="icon ion-android-wifi"></i>
<i class="icon ion-android-call"></i>
<i class="icon ion-android-apps"></i>
<i class="icon ion-android-settings"></i>
<i class="icon ion-android-options"></i>
<i class="icon ion-android-funnel"></i>
<i class="icon ion-android-search"></i>
<i class="icon ion-android-home"></i>
<i class="icon ion-android-cloud-outline"></i>
<i class="icon ion-android-cloud"></i>
<i class="icon ion-android-download"></i>
<i class="icon ion-android-upload"></i>
<i class="icon ion-android-cloud-done"></i>
<i class="icon ion-android-cloud-circle"></i>
<i class="icon ion-android-favorite-outline"></i>
<i class="icon ion-android-favorite"></i>
<i class="icon ion-android-star-outline"></i>
<i class="icon ion-android-star-half"></i>
<i class="icon ion-android-star"></i>
<i class="icon ion-android-calendar"></i>
<i class="icon ion-android-alarm-clock"></i>
<i class="icon ion-android-time"></i>
<i class="icon ion-android-stopwatch"></i>
<i class="icon ion-android-watch"></i>
<i class="icon ion-android-locate"></i>
<i class="icon ion-android-navigate"></i>
<i class="icon ion-android-pin"></i>
<i class="icon ion-android-compass"></i>
<i class="icon ion-android-map"></i>
<i class="icon ion-android-walk"></i>
<i class="icon ion-android-bicycle"></i>
<i class="icon ion-android-car"></i>
<i class="icon ion-android-bus"></i>
<i class="icon ion-android-subway"></i>
<i class="icon ion-android-train"></i>
<i class="icon ion-android-boat"></i>
<i class="icon ion-android-plane"></i>
<i class="icon ion-android-restaurant"></i>
<i class="icon ion-android-bar"></i>
<i class="icon ion-android-cart"></i>
<i class="icon ion-android-camera"></i>
<i class="icon ion-android-image"></i>
<i class="icon ion-android-film"></i>
<i class="icon ion-android-color-palette"></i>
<i class="icon ion-android-create"></i>
<i class="icon ion-android-mail"></i>
<i class="icon ion-android-drafts"></i>
<i class="icon ion-android-send"></i>
<i class="icon ion-android-archive"></i>
<i class="icon ion-android-delete"></i>
<i class="icon ion-android-attach"></i>
<i class="icon ion-android-share"></i>
<i class="icon ion-android-share-alt"></i>
<i class="icon ion-android-bookmark"></i>
<i class="icon ion-android-document"></i>
<i class="icon ion-android-clipboard"></i>
<i class="icon ion-android-list"></i>
<i class="icon ion-android-folder-open"></i>
<i class="icon ion-android-folder"></i>
<i class="icon ion-android-print"></i>
<i class="icon ion-android-open"></i>
<i class="icon ion-android-exit"></i>
<i class="icon ion-android-contract"></i>
<i class="icon ion-android-expand"></i>
<i class="icon ion-android-globe"></i>
<i class="icon ion-android-chat"></i>
<i class="icon ion-android-textsms"></i>
<i class="icon ion-android-hangout"></i>
<i class="icon ion-android-happy"></i>
<i class="icon ion-android-sad"></i>
<i class="icon ion-android-person"></i>
<i class="icon ion-android-people"></i>
<i class="icon ion-android-person-add"></i>
<i class="icon ion-android-contact"></i>
<i class="icon ion-android-contacts"></i>
<i class="icon ion-android-playstore"></i>
<i class="icon ion-android-lock"></i>
<i class="icon ion-android-unlock"></i>
<i class="icon ion-android-microphone"></i>
<i class="icon ion-android-microphone-off"></i>
<i class="icon ion-android-notifications-none"></i>
<i class="icon ion-android-notifications"></i>
<i class="icon ion-android-notifications-off"></i>
<i class="icon ion-android-volume-mute"></i>
<i class="icon ion-android-volume-down"></i>
<i class="icon ion-android-volume-up"></i>
<i class="icon ion-android-volume-off"></i>
<i class="icon ion-android-hand"></i>
<i class="icon ion-android-desktop"></i>
<i class="icon ion-android-laptop"></i>
<i class="icon ion-android-phone-portrait"></i>
<i class="icon ion-android-phone-landscape"></i>
<i class="icon ion-android-bulb"></i>
<i class="icon ion-android-sunny"></i>
<i class="icon ion-android-alert"></i>
<i class="icon ion-android-warning"></i>

Social Icons

Code	Result
<i class="icon ion-social-twitter"></i>
<i class="icon ion-social-twitter-outline"></i>
<i class="icon ion-social-facebook"></i>
<i class="icon ion-social-facebook-outline"></i>
<i class="icon ion-social-googleplus"></i>
<i class="icon ion-social-googleplus-outline"></i>
<i class="icon ion-social-google"></i>
<i class="icon ion-social-google-outline"></i>
<i class="icon ion-social-dribbble"></i>
<i class="icon ion-social-dribbble-outline"></i>
<i class="icon ion-social-octocat"></i>
<i class="icon ion-social-github"></i>
<i class="icon ion-social-github-outline"></i>
<i class="icon ion-social-instagram"></i>
<i class="icon ion-social-instagram-outline"></i>
<i class="icon ion-social-whatsapp"></i>
<i class="icon ion-social-whatsapp-outline"></i>
<i class="icon ion-social-snapchat"></i>
<i class="icon ion-social-snapchat-outline"></i>
<i class="icon ion-social-foursquare"></i>
<i class="icon ion-social-foursquare-outline"></i>
<i class="icon ion-social-pinterest"></i>
<i class="icon ion-social-pinterest-outline"></i>
<i class="icon ion-social-rss"></i>
<i class="icon ion-social-rss-outline"></i>
<i class="icon ion-social-tumblr"></i>
<i class="icon ion-social-tumblr-outline"></i>
<i class="icon ion-social-wordpress"></i>
<i class="icon ion-social-wordpress-outline"></i>
<i class="icon ion-social-reddit"></i>
<i class="icon ion-social-reddit-outline"></i>
<i class="icon ion-social-hackernews"></i>
<i class="icon ion-social-hackernews-outline"></i>
<i class="icon ion-social-designernews"></i>
<i class="icon ion-social-designernews-outline"></i>
<i class="icon ion-social-yahoo"></i>
<i class="icon ion-social-yahoo-outline"></i>
<i class="icon ion-social-buffer"></i>
<i class="icon ion-social-buffer-outline"></i>
<i class="icon ion-social-skype"></i>
<i class="icon ion-social-skype-outline"></i>
<i class="icon ion-social-linkedin"></i>
<i class="icon ion-social-linkedin-outline"></i>
<i class="icon ion-social-vimeo"></i>
<i class="icon ion-social-vimeo-outline"></i>
<i class="icon ion-social-twitch"></i>
<i class="icon ion-social-twitch-outline"></i>
<i class="icon ion-social-youtube"></i>
<i class="icon ion-social-youtube-outline"></i>
<i class="icon ion-social-dropbox"></i>
<i class="icon ion-social-dropbox-outline"></i>
<i class="icon ion-social-apple"></i>
<i class="icon ion-social-apple-outline"></i>
<i class="icon ion-social-android"></i>
<i class="icon ion-social-android-outline"></i>
<i class="icon ion-social-windows"></i>
<i class="icon ion-social-windows-outline"></i>
<i class="icon ion-social-html5"></i>
<i class="icon ion-social-html5-outline"></i>
<i class="icon ion-social-css3"></i>
<i class="icon ion-social-css3-outline"></i>
<i class="icon ion-social-javascript"></i>
<i class="icon ion-social-javascript-outline"></i>
<i class="icon ion-social-angular"></i>
<i class="icon ion-social-angular-outline"></i>
<i class="icon ion-social-nodejs"></i>
<i class="icon ion-social-sass"></i>
<i class="icon ion-social-python"></i>
<i class="icon ion-social-chrome"></i>
<i class="icon ion-social-chrome-outline"></i>
<i class="icon ion-social-codepen"></i>
<i class="icon ion-social-codepen-outline"></i>
<i class="icon ion-social-markdown"></i>
<i class="icon ion-social-tux"></i>
<i class="icon ion-social-freebsd-devil"></i>
<i class="icon ion-social-usd"></i>
<i class="icon ion-social-usd-outline"></i>
<i class="icon ion-social-bitcoin"></i>
<i class="icon ion-social-bitcoin-outline"></i>
<i class="icon ion-social-yen"></i>
<i class="icon ion-social-yen-outline"></i>
<i class="icon ion-social-euro"></i>
<i class="icon ion-social-euro-outline"></i>