Icons

A set of built-in icons in jQuery Mobile can be applied to buttons, collapsibles, listview buttons and more. There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons.

Icon set

The text in the buttons below show the name of the icon used in that button.

In widgets where you set the icon with a data-icon attribute you use the name of the icon as value. For example: data-icon="arrow-r".

To add an icon to link buttons and button elements, use the name prefixed with ui-icon- as class. For example: ui-icon-arrow-r. See also button markup.

Custom Icons

Icons are displayed as background image of :after pseudo elements. Target the pseudo element to set a custom icon.

You can safely use SVG icons. The framework contains a SVG support test and adds class ui-nosvg to the html element on platforms that don't support SVG. Use this class in your CSS to provide a PNG image as fallback.


.ui-icon-myicon:after {
	background-image: url("iconimg.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-myicon:after {
	background-image: url("iconimg.png");
}

Icon positioning

By default, icons in input buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute to set the icon position to "right", "top", or "bottom". In case of link buttons or button elements you have to add an icon position class (ui-btn-icon-[value]).

Left Right Top Bottom

Icon-only

Use "notext" as value for icon position if you want to create an icon-only button.

Delete

Icon shadow

Set data-iconshadow="true" to enable icon shadow for input buttons, or add class ui-shadow-icon to your button markup.

Note: Icon shadow (option iconShadow in the button widget and class ui-shadow-icon) is deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.

Icon shadow Icon shadow

Removing the disc

The semi-transparent dark circle behind the icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. If you prefer to not have this disc, it can be removed by adding the class ui-nodisc-icon to the element or its container.

No disc No disc

Example of the class being applied to a wrapper.

Delete Plus Minus Check

Black vs. white icon sets

Icons are white by default but you can switch to black icons by adding the ui-alt-icon class to the element or its container. This also changes the color that is used for the discs.

Alt icon Alt icon

Example of the class being applied to a wrapper.

Delete Plus Minus Check

Combining alt and nodisc

Example of the classes being applied to a wrapper.

Delete Plus Minus Check

Example of the classes applied to the UL or OL to change to the black icons for each list item.

Example of the classes being applied to a collapsible.

Heading

I'm the collapsible content. By default I'm closed, but you can click the header to open me.