Latest web development tutorials
 

jQuery Mobile Icons


jQuery Icons

To add an icon to your <a> and <button> elements in jQuery Mobile, use the icon class and position the icon as shown below (the only exception is buttons in navbars, which are shown further down):

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</a> Try it

<button class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</button> Try it

To add an icon to your <input> buttons, use the data-icon attribute:

<input type="button" value="Refresh page" data-icon="refresh"> Try it

To add an icon to your navbar buttons, use the data-icon attribute:

<a href="#anylink" data-icon="refresh">Refresh Page</a> Try it

To add an icon to your list buttons, use the data-icon attribute on <li>:

<li data-icon="refresh"><a href="#">Click me</a></li> Try it

Below we have listed all available icons that jQuery Mobile provides:

Value Description Icon Example
action Action (arrow pointing clockwise out of a box) Try it
alert alert Try it
audio Audio / Sound / Speakers Try it
arrow-d-l Arrow pointing downwards to the left Try it
arrow-d-r Arrow pointing downwards to the right Try it
arrow-u-l Arrow pointing upwards to the left Try it
arrow-u-r Arrow pointing upwards to the right Try it
arrow-l Arrow pointing left Try it
arrow-r Arrow pointing right Try it
arrow-u Arrow pointing up Try it
arrow-d Arrow pointing down Try it
back Back (curved arrow pointing counterclockwise upwards) Try it
bars Bars (three horizontal bars over each other) Try it
bullets Bullets (three horizontal bullets over each other) Try it
calendar calendar Try it
camera camera Try it
carat-d Carat pointing down Try it
carat-l Carat pointing left Try it
carat-r Carat pointing right Try it
carat-u Carat pointing up Try it
check Checkmark 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 sign Try it
forward forward Try it
gear gear Try it
grid grid Try it
heart Heart / Love symbol Try it
home home Try it
info Information Try it
location Location / GPS Try it
lock Lock / Padlock Try it
mail Mail / Letter Try it
minus minus Try it
navigation navigation Try it
phone Telephone Try it
power Power (On/off) Try it
plus plus Try it
recycle recycle Try it
refresh refresh Try it
search search Try it
shop Shop / Pag / Purse Try it
star star Try it
tag tag Try it
user User / Person Try it
video Video Camera Try it