Arrow Circle Right icon
Used for directional indicators. The Arrow Circle Right icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 7 sizes from 12 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 24 px
ic_fluent_arrow_circle_right_24_regular.svg
Arrow Circle Right icon in React
npm install @fluentui/react-icons
import { ArrowCircleRight24Regular } from "@fluentui/react-icons";
export function Example() {
return <ArrowCircleRight24Regular aria-label="Arrow Circle Right" />;
}Use the Arrow Circle Right 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 { ArrowCircleRight24Regular, ArrowCircleRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowCircleRight24Regular aria-label="Arrow Circle Right" />;
}Coding agents can look up this component through the Fluent Icons MCP server.
Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_circle_right_24_regular.svg" width="24" height="24" alt="Arrow Circle Right"> 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="M12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2ZM12.001 3.5C7.30656 3.5 3.50098 7.30558 3.50098 12C3.50098 16.6944 7.30656 20.5 12.001 20.5C16.6954 20.5 20.501 16.6944 20.501 12C20.501 7.30558 16.6954 3.5 12.001 3.5ZM11.648 7.55308L11.7206 7.46897C11.9869 7.2027 12.4036 7.17849 12.6972 7.39635L12.7813 7.46897L16.7821 11.4698C17.0484 11.7361 17.0726 12.1528 16.8547 12.4464L16.782 12.5306L12.7805 16.5306C12.4876 16.8234 12.0127 16.8233 11.7198 16.5303C11.4536 16.264 11.4295 15.8474 11.6474 15.5538L11.72 15.4697L14.442 12.749L7.75027 12.7493C7.37058 12.7493 7.05678 12.4671 7.00712 12.1011L7.00027 11.9993C7.00027 11.6196 7.28243 11.3058 7.6485 11.2561L7.75027 11.2493L14.44 11.249L11.7206 8.52963C11.4544 8.26336 11.4302 7.8467 11.648 7.55308L11.7206 7.46897L11.648 7.55308Z" fill="currentColor"/></svg>Details
| Name | Arrow Circle Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 12 px, 16 px, 20 px, 24 px, 28 px, 32 px, 48 px |
| Regular (outlined) file | ic_fluent_arrow_circle_right_24_regular.svg |
| Filled file | ic_fluent_arrow_circle_right_24_filled.svg |
| React (Regular) | ArrowCircleRight12Regular, ArrowCircleRight16Regular, ArrowCircleRight20Regular, ArrowCircleRight24Regular, ArrowCircleRight28Regular, ArrowCircleRight32Regular, ArrowCircleRight48Regular |
| React (Filled) | ArrowCircleRight12Filled, ArrowCircleRight16Filled, ArrowCircleRight20Filled, ArrowCircleRight24Filled, ArrowCircleRight28Filled, ArrowCircleRight32Filled, ArrowCircleRight48Filled |
| License | MIT (© Microsoft Corporation) |