Article

Button Icons

Icons that indicate the function of a button.

Overview

Button icons are badges that are added to a button element as a visual clue to what the button is used for.

button-add

The resource name for the add button icon is button-add. Place an add button icon next to content to indicate that the user can add the item. Place the add icon using <badge src="resource://button-add" />.

A white plus sign inside a black-filled circle.

button-checkmark

The resource name for the checkmark button icon is button-checkmark. Place a checkmark button icon next to content to indicate that an item has been selected. Place the checkmark icon using <badge src="resource://button-checkmark" />.

A black check mark.

button-dropdown

The resource name for the dropdown button icon is button-dropdown. Place a dropdown button icon to indicate that there are more options for the user underneath the button. Place the dropdown icon using <badge src="resource://button-dropdown" />.

A black chevron pointing down.

button-more

The resource name for the more button icon is button-more. Place a more button icon to indicate that there is more text that is not currently displayed. Place the more icon using <badge src="resource://button-more" />.

Three black dots oriented horizontally.

button-play

The resource name for the play button icon is button-play. Place a play button icon to indicate that the user can play the associated media item. Place the play icon using <badge src="resource://button-play" />.

A black-filled triangle pointing to the right.

button-preview

The resource name for the preview button icon is button-preview. Place a preview that button icon to indicate that the user can play a short preview of the associated media item. Place the preview icon using <badge src="resource://button-preview" />.

A white triangle pointing to the right, inside a stylized black television.

button-rate

The resource name for the rate button icon is button-rate. Place a rate button icon to indicate that the user can rate the associated media item. Place the rate icon using <badge src="resource://button-rate" />.

A black outline of a heart.

button-rated

The resource name for the rated button icon is button-rated. Place a rated button icon to indicate that the user has rated the associated media item. Place the rated icon using <badge src="resource://button-rated" />.

A black-filled heart.

button-remove

The resource name for the remove button icon is button-remove. Place a remove button icon to indicate that the user can remove the media item. Place the remove icon using <badge src="resource://button-remove" />.

A horizontal white line inside a black-filled circle.

See Also

Resource Icons

Adding Resource Icons

Add Apple-provided icons to buttons and as independent images.

Movie Rating Icons (United States)

Icons that pertain to United States movie ratings.

Television Rating Icons (United States)

Icons that pertain to United States television ratings.

Rating Icons (New Zealand)

Icons that pertain to New Zealand movie ratings.

Rating Icons (United Kingdom)

Icons that pertain to United Kingdom movie ratings.

Rating Icons (Brazil)

Icons that pertain to Brazil movie ratings.

Rotten Tomatoes Rating Icons

Icons pertaining to the Rotten Tomatoes rating system.

Miscellaneous Icons

Miscellaneous icons that don't fall into a specific category.