Arrow Up Right Dashes icon

Use the Arrow Up Right Dashes 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 { ArrowUpRightDashes24Regular, ArrowUpRightDashes24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowUpRightDashes24Regular aria-label="Arrow Up Right Dashes" />;
}

Use it in HTML

Reference the SVG file directly:

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

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="M10.7507 3C10.3365 3 10.0007 3.33579 10.0007 3.75C10.0007 4.16421 10.3365 4.5 10.7507 4.5H18.4198L16.9198 6H16.9393L15.2197 7.71967C14.9268 8.01256 14.9268 8.48744 15.2197 8.78033C15.5126 9.07322 15.9874 9.07322 16.2803 8.78033L18 7.06066V7.08227L19.5007 5.58158V13.25C19.5007 13.6642 19.8365 14 20.2507 14C20.6649 14 21.0007 13.6642 21.0007 13.25V3.75C21.0007 3.33579 20.6649 3 20.2507 3H10.7507ZM3 20.3178C2.99479 20.2663 2.99479 20.2144 3 20.163V20.25V20.3178ZM3.75 21C3.55806 21 3.36612 20.9268 3.21967 20.7803C3.07322 20.6339 3 20.4419 3 20.25C3 20.0581 3.07322 19.8661 3.21967 19.7197L6.46967 16.4697C6.76256 16.1768 7.23744 16.1768 7.53033 16.4697C7.82322 16.7626 7.82322 17.2374 7.53033 17.5303L4.28033 20.7803C4.13388 20.9268 3.94194 21 3.75 21ZM3.75 21H3.67361C3.73143 21.0066 3.78986 21.0066 3.84768 21H3.75ZM13.5303 11.5303C13.8232 11.2374 13.8232 10.7626 13.5303 10.4697C13.2374 10.1768 12.7626 10.1768 12.4697 10.4697L9.21967 13.7197C8.92678 14.0126 8.92678 14.4874 9.21967 14.7803C9.51256 15.0732 9.98744 15.0732 10.2803 14.7803L13.5303 11.5303Z" 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_up_right_dashes_24_regular.svg";

Details

Keywords

hintpotentialpoint