Easy Tutorial
Jquerymobile Pages Event Pageload Jquerymobile Grids Jquerymobile List Views Jquerymobile Events Page Jquerymobile Popups Event Pagebeforeshow Event Pagebeforehide Jquerymobile Events Scroll Jquerymobile Tutorial Jquerymobile List Content Jquerymobile Tables Jquerymobile Install Jquerymobile Themes Jquerymobile Collapsibles Jquerymobile Navbars Event Pageinit Event Pagebeforecreate Event Pagecreate Jquerymobile Ref Data Jquerymobile Ref Css Event Scrollstop Jquerymobile Panels Event Pagecontainerload Event Pagecontainerloadfailed Jquerymobile Form Basic Jquerymobile Transitions Event Swipeleft Jquerymobile Ref Icons Jquerymobile Events Event Pagebeforeload Jquerymobile Form Select Jquerymobile Icons Event Pageshow Jquerymobile Form Sliders Event Swiperight Event Pagehide Jquerymobile Events Touch Jquerymobile Toolbars Jquerymobile Events Orientation Event Swipe Jquerymobile Intro Jquerymobile Buttons Event Taphold Event Tap Jquerymobile Ref Events Event Scrollstart Jquerymobile Form Inputs Event Pageloadfailed Event Pagecontainerbeforeload Jquerymobile Examples Jquerymobile Filters Event Orientationchange
❮ Event Swipeleft Jquerymobile Events ❯

jQuery Mobile Icons

We can add icons to <a> and <button> elements in jQuery Mobile using icon classes and position the icons as shown below:

To add icons to an <input> button, use the data-icon attribute:

We can use the data-icon attribute to add icons to navigation buttons:

To add icons to list buttons, use the data-icon attribute within <li>:

Below is a list of all available icons provided by jQuery Mobile:

Value Description Icon Example
action Action Try it
alert Alert Try it
audio Audio/Video/Speaker Try it
arrow-d-l Down-Left Try it
arrow-d-r Down-Right Try it
arrow-u-l Up-Left Try it
arrow-u-r Up-Right Try it
arrow-l Left Arrow Try it
arrow-r Right Arrow Try it
arrow-u Up Arrow Try it
arrow-d Down Arrow Try it
back Back Try it
bars Bars Try it
bullets Bullets Try it
calendar Calendar Try it
camera Camera Try it
carat-d Down Try it
carat-l Left Try it
carat-r Right Try it
carat-u Up Try it
check Check Mark Try it
clock Clock Try it
cloud Cloud Try it
comment Comment Try it
delete Delete (X) Try it
edit Edit/Pencil Try it
eye Eye Try it
forbidden Forbidden Mark Try it
forward Forward Try it
gear Gear Try it
grid Grid Try it
heart Heart/Love Sign Try it
home Home (Main Page) Try it
info Information Try it
location Location/GPS Try it
lock Lock/Padlock Try it
mail Mail/Envelope Try it
minus Minus Sign Try it
navigation Navigation Try it
phone Phone Try it
power Power (On/Off) Try it
plus Plus Sign Try it
recycle Recycle Try it
refresh Refresh Try it
search Search Try it
shop Shop/Wallet/Handbag Try it
star Star Try it
tag Tag Try it
user User Try it
video Camera Try it
❮ Event Swipeleft Jquerymobile Events ❯