Arrow Circle Up icon

Use the Arrow Circle Up 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 { ArrowCircleUp24Regular, ArrowCircleUp24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowCircleUp24Regular aria-label="Arrow Circle Up" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_circle_up_24_regular.svg" width="24" height="24" alt="Arrow Circle Up">

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="M7.47028 12.2801L7.5544 12.3527C7.84801 12.5706 8.26467 12.5464 8.53094 12.2801L11.2503 9.56078L11.2506 16.2505L11.2575 16.3523C11.3071 16.7183 11.6209 17.0005 12.0006 17.0005L12.1024 16.9936C12.4685 16.944 12.7506 16.6302 12.7506 16.2505L12.7503 9.55878L15.471 12.2807L15.5551 12.3534C15.8487 12.5713 16.2653 12.5471 16.5317 12.2809C16.8246 11.9881 16.8247 11.5132 16.5319 11.2203L12.5319 7.21873L12.4477 7.14609C12.1541 6.92816 11.7374 6.95233 11.4711 7.21863L7.47028 11.2195L7.39766 11.3036C7.17981 11.5972 7.20401 12.0138 7.47028 12.2801ZM22.001 12C22.001 6.47715 17.5238 2 12.001 2C6.47813 2 2.00098 6.47715 2.00098 12C2.00098 17.5228 6.47813 22 12.001 22C17.5238 22 22.001 17.5228 22.001 12ZM3.50098 12C3.50098 7.30558 7.30656 3.5 12.001 3.5C16.6954 3.5 20.501 7.30558 20.501 12C20.501 16.6944 16.6954 20.5 12.001 20.5C7.30656 20.5 3.50098 16.6944 3.50098 12Z" 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_up_24_regular.svg";

Details

Keywords

pointdirectionverticalcircle