Icons

API Documentation

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.

You can set the icon with a data-icon attribute, using the name of the icon as value. For example: data-icon="ui-icon-arrow-r".

Custom Icons

Icons are displayed as background image of a span element and have a background size of 18x18px. The example below shows the custom CSS that you would need to use to add your own icons.

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 {
	background-image: url("iconimg.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-myicon {
	background-image: url("iconimg.png");
}

Icon positioning

In case of link buttons and button elements there are four possible icon positions; "beginning" (left), "end" (right), "top", and "bottom". By default the icon is placed at the beginning, but this can be overridden by using the data-iconpos attribute.

Block buttons

Beginning End Top Bottom

Mini buttons

Beginning End Top Bottom

Inline buttons

Beginning End Top Bottom

Inline mini buttons

Beginning End Top Bottom

Float icons

The framework offers helper classes, ui-widget-icon-floatbeginning and ui-widget-icon-floatend to make icons inside block buttons float to the beginning or end.

Beginning End Beginning End

Examples of adding the helper class to icons in pre-enhanced buttons.

Beginning

Examples of adding the helper class to icons in CSS-only buttons.

Beginning

Icon-only

Add data-show-label="false" if you want to create an icon-only button.

Icon only

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.

Black versus 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.

Combining alt and nodisc

Alt icon without disc Alt icon without disc Alt icon without disc No disc

Example of the classes being applied to a wrapper.

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.

CSS only buttons with icons

Examples of buttons with icons that don't use the Button widget.

Link

Enhanced buttons with icons

Examples of buttons with icons that do use the Button widget, but are pre-enhanced.

Link