Arrow Circle Right icon

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" />;
}

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>

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_circle_right_24_regular.svg";

Details

Keywords

pointdirectionhorizontalcircle