Arrow Circle Down Double icon
Used for directional indicators, links. Contains directional variants. The Arrow Circle Down Double 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 Circle Down Double 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 { ArrowCircleDownDouble24Regular, ArrowCircleDownDouble24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowCircleDownDouble24Regular aria-label="Arrow Circle Down Double" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_circle_down_double_24_regular.svg" width="24" height="24" alt="Arrow Circle Down Double"> 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="M11.2496 13.7499L11.1655 13.6772C10.8719 13.4594 10.4552 13.4836 10.1889 13.7499L9.49951 14.4392L9.49922 7.74951L9.49237 7.64774C9.44271 7.28167 9.12891 6.99951 8.74922 6.99951L8.64745 7.00636C8.28137 7.05602 7.99922 7.36982 7.99922 7.74951L7.99951 14.4412L7.3096 13.7501L7.22549 13.6774C6.93192 13.4595 6.51525 13.4836 6.24894 13.7499C5.95599 14.0427 5.9559 14.5176 6.24873 14.8105L8.21796 16.7813L8.30208 16.8539C8.59569 17.0718 9.01242 17.0477 9.27872 16.7814L11.2496 14.8105L11.3222 14.7264C11.5401 14.4328 11.5158 14.0161 11.2496 13.7499ZM1.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 12ZM17.7495 13.7499L17.6654 13.6772C17.3718 13.4594 16.9551 13.4836 16.6889 13.7499L15.9995 14.4392L15.9992 7.74945L15.9924 7.64768C15.9427 7.28161 15.6289 6.99945 15.2492 6.99945L15.1474 7.0063C14.7814 7.05596 14.4992 7.36975 14.4992 7.74945L14.4995 14.4412L13.8097 13.7501L13.7256 13.6774C13.432 13.4595 13.0153 13.4836 12.749 13.7499C12.456 14.0427 12.456 14.5176 12.7488 14.8105L14.718 16.7812L14.8021 16.8538C15.0957 17.0718 15.5124 17.0476 15.7787 16.7813L17.7495 14.8105L17.8221 14.7264C18.04 14.4328 18.0158 14.0161 17.7495 13.7499Z" 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_double_24_regular.svg";Details
| Name | Arrow Circle Down Double |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_circle_down_double_24_regular.svg |
| Filled file | ic_fluent_arrow_circle_down_double_24_filled.svg |
| React components | ArrowCircleDownDouble24Regular, ArrowCircleDownDouble24Filled |
| License | MIT (© Microsoft Corporation) |