Arrow 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 100 (of many) · 19 icon packs · Free & open source
Showing top 100 results, many more icons available
Search all Arrow Icons iconsSource libraries
| Library | Icons | Total in pack | |
|---|---|---|---|
| Material Symbols | 27 | 15,597 | View → |
| Tabler Icons | 19 | 6,184 | View → |
| Material Design Icons | 17 | 7,447 | View → |
| Phosphor | 13 | 9,072 | View → |
| IconPark Outline | 4 | 2,658 | View → |
| Myna UI Icons | 3 | 2,620 | View → |
| Carbon | 3 | 2,590 | View → |
| TDesign Icons | 3 | 2,356 | View → |
| Reicon | 1 | 6,586 | View → |
| Glyphs | 1 | 3,452 | View → |
| Unicons | 1 | 1,215 | View → |
| Glyphs Poly | 1 | 863 | View → |
| Memory Icons | 1 | 651 | View → |
| Font-GIS | 1 | 367 | View → |
| Maki | 1 | 215 | View → |
| Flat UI Icons | 1 | 100 | View → |
| Bootstrap Icons | 1 | 2,078 | View → |
| Lucide | 1 | 1,775 | View → |
| HeroIcons | 1 | 1,288 | View → |
Related icons
Frequently Asked Questions
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.
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.
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.
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.
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.
Related collections
Browse more