Ionic - Icons

How to use Icons?

If you want to use Ionic icons find the icon you need on the page (https://ionicons.com/). When you are adding Ionic elements, you always add the main class first and then you add the subclass you want. The main class for all icons is icon. The Subclass is the name of the icon you want. We will add six icons in our example that is given below −

<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>

The above code will produce the following screen −

The size of these icons can be changed with the font-size property in your Ionic CSS file.

.icon {
   font-size: 50px;
}

Once the icon size is setup, the same code will produce the following screenshot as the output −

Default Icons

Code	Result
<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="icon ion-arrow-return-right"></i>
<i class="icon ion-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="icon ion-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="icon ion-key"></i>
<i class="icon ion-arrow-graph-up-right"></i>
<i class="icon ion-arrow-graph-down-right"></i>
<i class="icon ion-arrow-graph-up-left"></i>
<i class="icon ion-arrow-graph-down-left"></i>
<i class="icon ion-stats-bars"></i>
<i class="icon ion-connecticon ion-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="icon ion-coffee"></i>
<i class="icon ion-icecream"></i>
<i class="icon ion-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-charging"></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="icon ion-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="icon ion-tshirt-outline"></i>
<i class="icon ion-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="icon ion-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="icon ion-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="icon ion-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 Style Icons

Code	Result
<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="icon ion-ios-arrow-right"></i>
<i class="icon ion-ios-arrow-down"></i>
<i class="icon ion-ios-arrow-left"></i>
<i class="icon ion-ios-arrow-thin-up"></i>
<i class="icon ion-ios-arrow-thin-right"></i>
<i class="icon ion-ios-arrow-thin-down"></i>
<i class="icon ion-ios-arrow-thin-left"></i>
<i class="icon ion-ios-circle-filled"></i>
<i class="icon ion-ios-circle-outline"></i>
<i class="icon ion-ios-checkmark-empty"></i>
<i class="icon ion-ios-checkmark-outline"></i>
<i class="icon ion-ios-checkmark"></i>
<i class="icon ion-ios-plus-empty"></i>
<i class="icon ion-ios-plus-outline"></i>
<i class="icon ion-ios-plus"></i>
<i class="icon ion-ios-close-empty"></i>
<i class="icon ion-ios-close-outline"></i>
<i class="icon ion-ios-close"></i>
<i class="icon ion-ios-minus-empty"></i>
<i class="icon ion-ios-minus-outline"></i>
<i class="icon ion-ios-minus"></i>
<i class="icon ion-ios-informaticon ion-empty"></i>
<i class="icon ion-ios-informaticon ion-outline"></i>
<i class="icon ion-ios-information"></i>
<i class="icon ion-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="icon ion-ios-cloud-upload-outline"></i>
<i class="icon ion-ios-cloud-download"></i>
<i class="icon ion-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="icon ion-ios-download-outline"></i>
<i class="icon ion-ios-refresh"></i>
<i class="icon ion-ios-refresh-outline"></i>
<i class="icon ion-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="icon ion-ios-pricetag-outline"></i>
<i class="icon ion-ios-pricetags"></i>
<i class="icon ion-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="icon ion-ios-chatbubble"></i>
<i class="icon ion-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="icon ion-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="icon ion-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="icon ion-ios-speedometer-outline"></i>
<i class="icon ion-ios-stopwatch"></i>
<i class="icon ion-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="icon ion-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="icon ion-ios-reverse-camera"></i>
<i class="icon ion-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>

Previous Page Print Page