Arrow Repeat All icon
Used to turn on repeat actions. The Arrow Repeat All icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Arrow Repeat All icon in React
Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.
npm install @fluentui/react-icons
import { ArrowRepeatAll24Regular, ArrowRepeatAll24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowRepeatAll24Regular aria-label="Arrow Repeat All" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_repeat_all_24_regular.svg" width="24" height="24" alt="Arrow Repeat All"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6102 2.47047L14.5334 2.4031C14.2394 2.17855 13.818 2.20101 13.5495 2.47047L13.4824 2.54755C13.2587 2.84259 13.281 3.26552 13.5495 3.53498L15.521 5.5118H8.5L8.26687 5.51592C4.785 5.63911 2 8.51085 2 12.0354C2 13.7259 2.6407 15.2663 3.6917 16.4252L3.76407 16.4947C3.89496 16.6065 4.06463 16.674 4.25 16.674C4.66421 16.674 5 16.337 5 15.9213C5 15.7481 4.9417 15.5885 4.84373 15.4613L4.64439 15.2306C3.92953 14.3627 3.5 13.2494 3.5 12.0354C3.5 9.26396 5.73858 7.01725 8.5 7.01725H15.381L13.5495 8.85754L13.4824 8.93463C13.2587 9.22967 13.281 9.6526 13.5495 9.92206C13.8424 10.216 14.3173 10.216 14.6102 9.92206L17.7922 6.72852L17.8593 6.65144C18.083 6.3564 18.0606 5.93347 17.7922 5.66401L14.6102 2.47047ZM20.23 7.57108C20.0999 7.46224 19.9326 7.39677 19.75 7.39677C19.3358 7.39677 19 7.73378 19 8.14949C19 8.33618 19.0677 8.507 19.1791 8.63722C19.9992 9.53109 20.5 10.7246 20.5 12.0354C20.5 14.8069 18.2614 17.0536 15.5 17.0536H8.558L10.4634 15.1425L10.5365 15.0573C10.7339 14.7897 10.7319 14.4206 10.5305 14.155L10.4634 14.0779L10.3785 14.0045C10.1119 13.8065 9.74409 13.8085 9.47951 14.0106L9.40271 14.0779L6.22073 17.2715L6.14756 17.3566C5.95023 17.6242 5.95224 17.9934 6.15361 18.2589L6.22073 18.336L9.40271 21.5295L9.48683 21.6024C9.78044 21.8211 10.1971 21.7968 10.4634 21.5295C10.7319 21.2601 10.7542 20.8371 10.5305 20.5421L10.4634 20.465L8.564 18.559H15.5L15.7331 18.5549C19.215 18.4317 22 15.56 22 12.0354C22 10.342 21.3571 8.79923 20.3029 7.63965L20.23 7.57108Z" fill="currentColor"/></svg>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/arrow_repeat_all_24_regular.svg";Details
| Name | Arrow Repeat All |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_repeat_all_24_regular.svg |
| Filled file | ic_fluent_arrow_repeat_all_24_filled.svg |
| React components | ArrowRepeatAll24Regular, ArrowRepeatAll24Filled |
| License | MIT (© Microsoft Corporation) |