Rewind icon

Use the Rewind 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 { Rewind24Regular, Rewind24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M12.5007 5.50289C12.5007 4.22384 11.0026 3.5316 10.0285 4.36058L2.61872 10.6668C1.79765 11.3656 1.79767 12.6334 2.61875 13.3322L10.0285 19.6381C11.0026 20.4671 12.5007 19.7748 12.5007 18.4958V14.5081L18.5295 19.6387C19.5035 20.4677 21.0016 19.7754 21.0016 18.4964V5.50352C21.0016 4.22446 19.5035 3.53223 18.5295 4.36121L12.5007 9.49209V5.50289ZM12.5007 12.5384V11.4618L19.5016 5.50352V18.4964L12.5007 12.5384ZM3.5909 11.8091L11.0007 5.50289V18.4958L3.5909 12.1899C3.47361 12.0901 3.4736 11.9089 3.5909 11.8091Z" 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/rewind_24_regular.svg";

Details

Keywords

controlplaybackback