Next icon

Use the Next 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 { Next24Regular, Next24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Next24Regular aria-label="Next" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_next_24_regular.svg" width="24" height="24" alt="Next">

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="M3.00012 4.753C3.00012 3.34519 4.57793 2.51363 5.73928 3.30937L16.2377 10.5028C17.2479 11.1949 17.2531 12.6839 16.2478 13.3831L5.74932 20.6847C4.58899 21.4917 3.00012 20.6613 3.00012 19.248V4.753ZM4.89143 4.54677C4.72552 4.43309 4.50012 4.55189 4.50012 4.753V19.248C4.50012 19.4499 4.72711 19.5685 4.89287 19.4532L15.3913 12.1517C15.5349 12.0518 15.5342 11.8391 15.3899 11.7402L4.89143 4.54677ZM21 3.75C21 3.33579 20.6642 3 20.25 3C19.8358 3 19.5 3.33579 19.5 3.75V20.25C19.5 20.6642 19.8358 21 20.25 21C20.6642 21 21 20.6642 21 20.25V3.75Z" 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/next_24_regular.svg";

Details

Keywords

videoskipjumpfastforwardplay