Slide Arrow Forward icon

Use the Slide Arrow Forward 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 { SlideArrowForward24Regular, SlideArrowForward24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SlideArrowForward24Regular aria-label="Slide Arrow Forward" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_slide_arrow_forward_24_regular.svg" width="24" height="24" alt="Slide Arrow Forward">

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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM19.25 4C20.7688 4 22 5.23122 22 6.75V12.8115C21.5556 12.3849 21.0512 12.0208 20.5 11.7334V6.75C20.5 6.05964 19.9404 5.5 19.25 5.5H4.75C4.05964 5.5 3.5 6.05964 3.5 6.75V17.25C3.5 17.9404 4.05964 18.5 4.75 18.5H11.0771C11.158 19.0233 11.3012 19.5258 11.499 20H4.75C3.23122 20 2 18.7688 2 17.25V6.75C2 5.23122 3.23122 4 4.75 4H19.25ZM19.3535 14.6465C19.1583 14.4512 18.8417 14.4512 18.6465 14.6465C18.4512 14.8417 18.4512 15.1583 18.6465 15.3535L19.293 16H17.25C15.4551 16 14 17.4551 14 19.25V19.5C14 19.7761 14.2239 20 14.5 20C14.7761 20 15 19.7761 15 19.5V19.25C15 18.0074 16.0074 17 17.25 17H19.293L18.6465 17.6465C18.4512 17.8417 18.4512 18.1583 18.6465 18.3535C18.8417 18.5488 19.1583 18.5488 19.3535 18.3535L20.8535 16.8535C21.0488 16.6583 21.0488 16.3417 20.8535 16.1465L19.3535 14.6465ZM12.0244 14C11.7276 14.4635 11.4869 14.9662 11.3145 15.5H6.75C6.33579 15.5 6 15.1642 6 14.75C6 14.3358 6.33579 14 6.75 14H12.0244ZM15.25 11C15.4616 11 15.6517 11.0886 15.7881 11.2295C14.88 11.4768 14.0512 11.9151 13.3477 12.5H6.75C6.33579 12.5 6 12.1642 6 11.75C6 11.3358 6.33579 11 6.75 11H15.25ZM11.25 8C11.6642 8 12 8.33579 12 8.75C12 9.16421 11.6642 9.5 11.25 9.5H6.75C6.33579 9.5 6 9.16421 6 8.75C6 8.33579 6.33579 8 6.75 8H11.25Z" 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/slide_arrow_forward_24_regular.svg";

Details