jQuery Mobile Button Icons

The set of icons provided by jQuery Mobile can make your buttons more attractive.

Add Icons to jQuery Mobile Buttons

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

<a href="#anylink" data-role="button" data-icon="search">Search</a>

Tip:You can also use the data-icon attribute in <button> or <input> elements.

Below, we list some of the available icons provided by jQuery Mobile:

Attribute Value Description Icon Example
data-icon="arrow-l" Left Arrow Test
data-icon="arrow-r" Right Arrow Test
data-icon="delete" Delete Test
data-icon="info" Information Test
data-icon="home" Home Test
data-icon="back" Back Test
data-icon="search" Search Test
data-icon="grid" Grid Test

For complete information about jQuery Mobile button icons, please visit our jQuery Mobile Icon Reference Manual.

Position the Icon

You can also specify the position where the icon is placed: up, right, down, or left.

Use the data-iconpos attribute to specify the position:

Icon Position:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">up</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">right</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">down</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Left</a>

Try It Yourself

Tip:By default, all icons in the buttons are placed on the left.

Show Icon Only

If only the icon is to be displayed, please set data-iconpos to "notext":

Back:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Search</a>

Try It Yourself