Iconography
In addition to layout and alignment, it is also important to consider icons. When using icons for RTL web and native app development, consider factors such as icon direction and context. For example, you should use CSS transforms or SVG attributes to flip icons depending on the text direction. Additionally, it is important to make sure the icons are appropriate and relevant for the context and culture of your target audience.
Instead of going out to find your own icons, please leverage existing icons and components as they are consistent with our design language and can often handle RTL needs out-of-the-box.
Leverage existing components and icons
Our Icon component handles CSS transforms and SVG attributes to mirror icons for RTL. Additionally, we have a robust icon library that should be used in all Pinterest products. If you find issues with icons, or need to adapt an icon, submit a request
Icon types that need to be mirrored
- Directional icons
- Question marks
- Sound
- Icons with progress bars
Directional icons
Icons that provide directional details or depict either movement or text direction should undergo mirroring to make sense of your new format.
Back and forward buttons and arrows are mirrored:
Directional icons that need to be mirrored
Icon | LTR | RTL |
|---|---|---|
arrow-back | ||
arrow-forward | ||
arrow-circle-back | ||
arrow-circle-forward | ||
arrow-start | ||
arrow-end | ||
arrow-left-curved | ||
chevron-down-circle | ||
chevron-left-circle | ||
directional-arrow-left | ||
directional-arrow-right | ||
list-numbered | ||
indent | ||
outdent | ||
move-pin | ||
reorder-images | ||
send | ||
visit |
Question marks
Question marks are mirrored.
Sound and audio icons
Icons representing sound as well as sound control bars are mirrored.
Icons with sliders and progress bars
Sliders and progress bars are mirrored—progression is displayed from right to left.
A volume icon with a slider at its right side should be mirrored. The slider should progress RTL, and the sound waves should emerge from the right.
Representation of time
Mirror linear representation of time. Linear time advances from right to left.
Mirror circular representation of time. To align with international conventions, use clockwise when going forward in time and counter-clockwise when going back in time.
Sometimes, both the horizontal and circular direction of time are implied in an icon.
For example, the redo and undo buttons have both a horizontal direction and a circular
direction. In LTR, these point to the same direction in both circular and horizontal
representations of time. In RTL, decide whether to show circular or horizontal direction.
Icons that don’t need to be mirrored
- Media play buttons and media progress indicator bar
- Checkmarks
- Icons referring to physical objects that don’t depict movement
When in the context of music, audio and video players, media playback buttons and media progress indicators shouldn't be mirrored as they refer to the direction of the tape being played, not the direction of time.
Checkmarks
Checkmarks aren't mirrored.
Icons referring to physical objects that don't depict movement
Physical icons that don’t indicate movement or a direction don’t need to be mirrored. Examples include filter, icons with slashes across them, key and link.
Related
Icon localization
Desing considerations for design icons with cross-cultural and linguistic differences in mind.
Iconography guidelines
Usage guidelines and best practices for our product icon library
Icon component
A component for using icons in product interfaces
Icon requests
How to request an icon if it doesn't exist in our library