Ionic - Padding

Ionic offers an easy way to add padding to elements. There are couple of classes that can be used and all of them will add 10px between border of element and its content. The following table displays all the available padding classes.

Padding Classes

Class Name	Class Info
padding	Adds padding around every side.
padding-vertical	Adds padding to the top and bottom.
padding-horizontal	Adds padding to the left and right.
padding-top	Adds padding to the top.
padding-right	Adds padding to the right.
padding-bottom	Adds padding to the bottom.
padding-left	Adds padding to the left.

Using Padding

When you want to apply some padding to your element, you just need to assign one of the classes from the table above. The following example shows two block buttons. The first one is using the padding class and the second one does not. You will notice that the first button is larger, since it has 10pxpadding applied.

<div class = "button button-block padding">Padding</div>
<div class = "button button-block">No padding</div>

The above code will produce the following screen −

Ionic - Icons

There are more than 700 premium icons provided by Ionic. There are also different sets of icons provided for Android and IOS. You can find almost anything you need but you are not bound to use them, if you do not want to. You can use your own custom icons or any other icon set instead. You can check all the Ionic icons here.

How to use Icons?

If you want to use Ionic icons find the icon you need on the page (http://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>gt;
<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>