Box Multiple Arrow Right icon

Use the Box Multiple Arrow 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 { BoxMultipleArrowRight24Regular, BoxMultipleArrowRight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BoxMultipleArrowRight24Regular aria-label="Box Multiple Arrow Right" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_box_multiple_arrow_right_24_regular.svg" width="24" height="24" alt="Box Multiple Arrow 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="M15.78 3.73716C15.2766 3.55115 14.7234 3.55115 14.22 3.73716L9.91334 5.32875C9.81518 5.36503 9.75 5.4586 9.75 5.56325V8.35645C9.25319 8.27702 8.7468 8.27702 8.25 8.35645V5.56325C8.25 4.83071 8.70625 4.17569 9.39337 3.92175L13.7001 2.33017C14.539 2.02015 15.461 2.02015 16.2999 2.33017L20.6066 3.92175C21.2937 4.17569 21.75 4.83071 21.75 5.56325V12.5808C21.2998 12.1914 20.7955 11.8628 20.25 11.6077V5.56325C20.25 5.4586 20.1848 5.36503 20.0867 5.32875L15.78 3.73716ZM14.6066 11.121C14.8077 11.1953 14.989 11.3039 15.1449 11.4388C14.5713 11.6619 14.0372 11.964 13.556 12.3319L9.77995 10.9364C9.27662 10.7504 8.72338 10.7504 8.22005 10.9364L3.91334 12.528C3.81518 12.5642 3.75 12.6578 3.75 12.7625V18.4325C3.75 18.5371 3.81518 18.6307 3.91334 18.667L8.22005 20.2586C8.72338 20.4446 9.27662 20.4446 9.77995 20.2586L11.3715 19.6704C11.5414 20.1498 11.7659 20.6033 12.0375 21.0234L10.2999 21.6656C9.46103 21.9756 8.53897 21.9756 7.70008 21.6656L3.39337 20.074C2.70625 19.8201 2.25 19.165 2.25 18.4325V12.7625C2.25 12.0299 2.70625 11.3749 3.39337 11.121L7.70008 9.52939C8.53897 9.21937 9.46103 9.21937 10.2999 9.52939L14.6066 11.121ZM11.7318 13.2499C11.9924 13.1595 12.269 13.2213 12.4647 13.3883C12.0907 13.8459 11.7778 14.3554 11.5385 14.9043L9.74989 15.5241V18.2234C9.74989 18.6376 9.4141 18.9734 8.99989 18.9734C8.58567 18.9734 8.24989 18.6376 8.24989 18.2234V15.5245L5.76921 14.6671C5.37772 14.5317 5.17006 14.1047 5.30538 13.7132C5.4407 13.3217 5.86776 13.114 6.25925 13.2494L8.99959 14.1966L11.7318 13.2499ZM11.7692 7.66706C11.3777 7.53174 11.1701 7.10468 11.3054 6.71319C11.4407 6.32171 11.8678 6.11404 12.2593 6.24936L14.9178 7.16832C14.9708 7.18663 15.0284 7.18661 15.0813 7.16826L17.7318 6.24986C18.1232 6.11424 18.5504 6.32158 18.686 6.71297C18.8216 7.10435 18.6143 7.53157 18.2229 7.66718L15.5725 8.58558C15.2017 8.71404 14.7986 8.7142 14.4278 8.58602L11.7692 7.66706ZM23 17.499C23 20.5366 20.5376 22.999 17.5 22.999C14.4624 22.999 12 20.5366 12 17.499C12 14.4615 14.4624 11.999 17.5 11.999C20.5376 11.999 23 14.4615 23 17.499ZM14.5 16.999C14.2239 16.999 14 17.2229 14 17.499C14 17.7752 14.2239 17.999 14.5 17.999L19.2929 17.999L17.6464 19.6455C17.4512 19.8407 17.4512 20.1573 17.6464 20.3526C17.8417 20.5478 18.1583 20.5478 18.3536 20.3526L20.8536 17.8526C21.0488 17.6573 21.0488 17.3407 20.8536 17.1455L18.3536 14.6455C18.1583 14.4502 17.8417 14.4502 17.6464 14.6455C17.4512 14.8407 17.4512 15.1573 17.6464 15.3526L19.2929 16.999L14.5 16.999Z" 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/box_multiple_arrow_right_24_regular.svg";

Details

Keywords

packageshippingcargoproduction