Arrow SVG Icons
Arrows are the most reused directional icon on the web: carousels, accordions, dropdowns, breadcrumbs, and "next/back" buttons all lean on the same handful of shapes. This page pulls arrow icons from 200+ open-source libraries in outline, filled, chevron, and caret styles, so you can match the exact stroke weight and corner radius your design system already uses instead of settling for whatever ships with your component library.
Showing top 150 (of many)·21 icon packs·Free & open source
Showing top 150 results, many more icons available
Search all Arrow Icons iconsRelated icons
Arrow Icons by library
The icons above come from 21 open-source libraries. Open one to see its full set in a matching style.
Frequently Asked Questions
Are these arrow icons free for commercial use?
Yes. Every arrow icon shown comes from an open-source library (MIT, Apache 2.0, or ISC license). You can use them in commercial projects without attribution in most cases, check the source pack for exact terms.
How do I use an SVG arrow in React or HTML?
Click any icon to open its detail view. From there you can copy the raw SVG, copy a JSX snippet, or download the file. Paste the SVG directly into your markup, or use the JSX form inside a React component.
What is the difference between an arrow and a chevron icon?
A chevron is a simple angled line (like a > or ^ shape) with no shaft, commonly used for expand/collapse toggles and pagination. An arrow includes a shaft plus an arrowhead, and reads more strongly as "move in this direction," better suited to carousel navigation and directional CTAs. Both styles are included here; use the search box to filter for "chevron" specifically.
How do I rotate an arrow icon to point a different direction?
Rather than downloading four separate up/down/left/right SVGs, download one arrow and rotate it with CSS: transform: rotate(90deg) on the SVG or its wrapper. This keeps your bundle smaller and guarantees every direction shares identical stroke weight and proportions.
Which arrow style should I use for a carousel or slider?
Filled arrows inside a circular button background tend to have the best tap-target visibility on carousels, especially over photo content. Outline arrows work better inside already-bordered UI controls like pagination bars, where a filled shape would look heavier than the surrounding elements.