Images and Glyphs

Typically, the only type of image you need to flip in the right-to-left context is a glyph, which is a simple, graphic image that expresses a specific concept. Unlike illustrations, photographs, diagrams, and other artwork, a glyph often helps people understand an app. For example, if you use a glyph to represent user interactions like app navigation, directional movement, or working with text, you likely need to flip it in the right-to-left (RTL) version of your app. In addition to flipping glyphs when necessary, you also need to ensure that the positions of all glyphs and images continue to make sense in the RTL context.

Images

Avoid flipping images like photographs, illustrations, and general artwork. Flipping an image often changes the image’s meaning; flipping a copyrighted image could be a violation. If an image’s content is strongly connected to reading direction, consider creating a new version of the image instead of flipping the original.

Simplified diagram of a globe that uses solid black shapes to show most of Africa, Europe, Asia, Australia, and Antarctica on a solid blue background.
White check in a green circle to indicate a correct example.

Simplified diagram of a blue globe that shows a horizontally flipped Eastern hemisphere with Africa on the far right and Australia on the far left.
White X in a gray circle to indicate incorrect usage.

Reverse the positions of images when their order is meaningful. For example, if you display multiple images in a specific order like chronological, alphabetical, or favorite, you need to reverse their positions to preserve the order’s meaning in the RTL context.

Diagram showing a layout of text and images within a rounded rectangle. A short bar representing text is left-aligned in the upper-left corner. Below the bar is an area that contains four squares, including a blue square with a placeholder image on the left side. From the left, a row of five square areas at the bottom of the rectangle contain the following shapes: triangle, square, star, circle, and heart.

LTR

Diagram showing a layout of text and images within a rounded rectangle. A short bar representing text is right-aligned in the upper-right corner. Below the bar is an area that contains four squares, including a blue square with a placeholder image on the right side. From the right, a row of five square areas at the bottom of the rectangle contain the following shapes: triangle, square, star, circle, and heart.

RTL

Glyphs

When you use SF Symbols 2 to supply glyphs for your app, you get variants for the RTL context and localized symbols for Arabic and Hebrew, among other languages. If you create custom symbols, you can specify their directionality. For developer guidance, see Creating Custom Symbol Images for Your App.

Three horizontal lines, stacked evenly on top of each other. Each line is preceded by a bullet on left.

The shape of a closed book with its spine on the left.

A rounded rectangle containing a left-aligned row of three dots. A pencil is slanted at about forty-five degrees, with its point right of the rightmost dot and its eraser extending out of the top-right corner of the rectangle.

A rounded rectangle with a black bar across the top that occupies about a quarter of the rectangle's height. A left-aligned row of white dots is in the left side of the bar.

A rounded rectangle that contains a smaller, solid-black rounded rectangle near the left side. Outside the rectangle and to the right is a solid-black semicircle with a vertical straight edge that's close to the vertical right side of the rectangle.

LTR

Three horizontal lines, stacked evenly on top of each other. Each line is preceded by a bullet on right.

The shape of a closed book with its spine on the right.

A rounded rectangle containing a right-aligned row of three dots. A pencil is slanted at about forty-five degrees, with its point left of the leftmost dot and its eraser extending out of the middle of the rectangle's top.

A rounded rectangle with a black bar across the top that occupies about a quarter of the rectangle's height. A right-aligned row of white dots is in the right side of the bar.

A rounded rectangle that contains a smaller, solid-black rounded rectangle near the right side. Outside the rectangle and to the left is a solid-black semicircle with a vertical straight edge that's close to the vertical left side of the rectangle.

RTL

Flip glyphs that represent text or reading direction. For example, if a glyph uses left-aligned bars to represent text in the LTR context, the bars need to be right-aligned in the RTL context.

A rounded rectangle that contains three horizontal left-aligned lines.

LTR

A rounded rectangle that contains three horizontal right-aligned lines.

RTL

Consider creating a localized version of a glyph that displays text. Some glyphs include letters or words to help communicate a script-related concept, such as font-size choice or a signature. If you have a custom glyph that needs to display actual text, consider creating a localized version. For example, SF Symbols offers different versions of the signature, rich-text, and I-beam cursor glyphs for use with Latin, Hebrew, and Arabic text, among others.

A small X left-aligned above a horizontal line. A stylized signature begins at the X and finishes at the right end of the line.

A rounded rectangle containing a capital letter A in the top-left corner and a stack of two horizontal lines in the top-right corner. A placeholder image appears in the bottom half of the rectangle.

A large capital letter A to the left of a tall I-beam cursor.

Latin

A small X right-aligned above a horizontal line. A stylized signature begins at the X and finishes at the left end of the line.

A rounded rectangle containing the letter Alef in the top-right corner and a stack of two horizontal lines in the top-left corner. A placeholder image appears in the bottom half of the rectangle.

A large letter Alef to the right of a tall I-beam cursor.

Hebrew

A small X right-aligned above a horizontal line. A stylized signature begins at the X and finishes at the left end of the line.

A rounded rectangle containing the letter Ain in the top-right corner and a stack of two horizontal lines in the top-left corner. A placeholder image appears in the bottom half of the rectangle.

A large letter Dad to the right of a tall I-beam cursor.

Arabic

If you have a custom glyph that uses letters or words to communicate a concept unrelated to reading or writing, consider designing an alternative image that doesn’t use text.

Flip a glyph that shows forward or backward motion. When something moves in the same direction that people read, they typically interpret that direction as forward; when something moves in the opposite direction, people tend to interpret the direction as backward. A glyph that depicts an object moving forward or backward needs to flip in the RTL context to preserve the meaning of the motion. For example, a glyph that represents a speaker typically shows sound waves emanating forward from the speaker. In the LTR context the sound waves come from the left, so in the RTL context the glyph needs to flip to show the waves coming from the right.

The outline of a speaker with three concentric curved lines emanating to the right.

LTR

The outline of a speaker with three concentric curved lines emanating to the left.

RTL

Don’t flip logos or universal signs and marks. Displaying a flipped logo confuses people and can have legal repercussions. Always display a logo in its original form, even if it includes text. People expect universal symbols and marks like the checkmark to have a consistent appearance, so don’t flip them.

A rounded square that contains the black Apple TV logo, which consists of a solid black apple to the left of the lowercase letters T and V.

A logo

A checkmark.

A universal symbol or mark

In general, don’t flip glyphs that depict real-world objects. Unless you use the object to indicate directionality, it’s best to avoid flipping a glyph that represents a familiar item. For example, clocks work the same everywhere, so a traditional clock glyph needs to look the same regardless of language direction. Some glyphs might seem to reference language or reading direction because they represent items that are slanted for right-handed use. However, most people are right-handed, so flipping a glyph that shows a right-handed tool isn’t necessary and might be confusing.

A black disk with two white lines in the nine o'clock position.

A pencil with an eraser, slanted at about forty-five degrees with the point downward.

The silhouette of a game controller with a white plus sign on the left and two white buttons on the right.

Glyphs that represent physical objects don’t generally need to flip.

Before flipping a complex custom glyph, consider its individual components and the overall visual balance. In some cases, a component — like a badge, slash, or magnifying glass — needs to adhere to a visual design language regardless of localization. For example, SF Symbols maintains visual consistency by using the same backslash to represent the prohibition or negation of a symbol’s meaning in both LTR and RTL versions.

A silhouette of a speaker pointing right with a backslash on top of it.

LTR

A silhouette of a speaker pointing left with a backslash on top of it.

RTL

In other cases, you might need to flip a component (or its position) to ensure the localized version of the glyph still makes sense. For example, if a badge represents the actual UI that people see in your app, it needs to flip if your UI flips. Alternatively, if a badge modifies the meaning of the glyph, consider whether flipping the badge preserves both the modified meaning and the overall visual balance of the glyph.

A silhouette of a wheeled shopping cart that faces right. A white plus sign inside a black disk is in the top-right corner.
White check in a green circle to indicate a correct example.

A silhouette of a wheeled shopping cart that faces left. A white plus sign inside a black disk is in the top-right corner.
White X in a gray circle to indicate an incorrect example.

A silhouette of a wheeled shopping cart that faces left. A white plus sign inside a black disk is in the top-left corner.
White check in a green circle to indicate a correct example.

The badge doesn’t depict an object in the UI, but keeping it in the top-right corner visually unbalances the cart.

If your custom glyph includes a component that implies handedness, like a tool, consider preserving the orientation of the tool while flipping the base image if necessary.

A rounded rectangle that contains a black dot in the top-right corner. The outline of a magnifying glass that contains a stack of two left-aligned lines is on top of the rectangle and to the left of the dot, slanted at about 135 degrees.

LTR

A rounded rectangle that contains a black dot in the top-left corner. The outline of a magnifying glass that contains a stack of two rightt-aligned lines is on top of the rectangle and to the right of the dot, slanted at about 135 degrees.

RTL