Arrow Circle Down icon

Use the Arrow Circle Down 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 { ArrowCircleDown24Regular, ArrowCircleDown24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M16.5297 11.7199L16.4456 11.6473C16.152 11.4294 15.7353 11.4536 15.4691 11.7199L12.7497 14.4392L12.7494 7.74951L12.7425 7.64774C12.6929 7.28167 12.3791 6.99951 11.9994 6.99951L11.8976 7.00636C11.5315 7.05602 11.2494 7.36982 11.2494 7.74951L11.2497 14.4412L8.529 11.7193L8.44489 11.6466C8.15132 11.4287 7.73466 11.4529 7.46834 11.7191C7.17539 12.0119 7.1753 12.4868 7.46814 12.7797L11.4681 16.7813L11.5523 16.8539C11.8459 17.0718 12.2626 17.0477 12.5289 16.7814L16.5297 12.7805L16.6023 12.6964C16.8202 12.4028 16.796 11.9862 16.5297 11.7199ZM1.99902 12C1.99902 17.5228 6.47617 22 11.999 22C17.5219 22 21.999 17.5228 21.999 12C21.999 6.47715 17.5219 2 11.999 2C6.47618 2 1.99902 6.47715 1.99902 12ZM20.499 12C20.499 16.6944 16.6934 20.5 11.999 20.5C7.3046 20.5 3.49902 16.6944 3.49902 12C3.49902 7.30558 7.3046 3.5 11.999 3.5C16.6934 3.5 20.499 7.30558 20.499 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_down_24_regular.svg";

Details

Keywords

pointdirectionverticalcircle