Arrows & navigation

Choosing arrows by their job

Use straight arrows for movement through a process, chevrons for compact previous/next controls, and external-link symbols where the destination needs to be distinguished from ordinary navigation. The shape should support the control's label. A button labeled Download should not use the same directional treatment as a menu that expands in place unless the surrounding interface makes the difference clear.

A carousel needs a pair of controls that look balanced and communicate their available states. Compare left and right shapes at the same size, then give their buttons accessible names. Keep the interactive target larger than the visible artwork. If there is no previous slide, use a deliberate disabled or wrapping behavior rather than leaving a control that appears functional but does nothing.

For calls to action, a trailing arrow can reinforce the next step without competing with the label. Match its stroke to the label's visual weight and keep the gap stable when the text wraps. Test the button with the longest realistic label. In right-to-left interfaces, review the meaning of directional symbols instead of mirroring every icon automatically.

The examples above let you try an arrow inside a button or navigation pattern. Start with a plain solid stroke, then add color or motion only when it improves the interaction. A hover effect should not be required to understand the action, and keyboard focus should remain equally clear. Export the chosen arrow and test it in the real page before applying the same treatment throughout a project.

For a product gallery, sketch the previous and next controls beside both a wide landscape photo and a tall portrait photo. Place the buttons against the busiest part of each image and check whether they disappear. A solid button surface may work better than a heavier arrow. Then move to the first and last slide and check what each arrow promises. If no previous photo exists, the interface should make that boundary clear before someone tries to move backward.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.