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