Replay icon

Use the Replay 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 { Replay24Regular, Replay24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 3.5C9.40308 3.5 7.07817 4.66459 5.51903 6.5H7.25C7.66421 6.5 8 6.83579 8 7.25C8 7.66421 7.66421 8 7.25 8H3.75C3.33579 8 3 7.66421 3 7.25V3.75C3 3.33579 3.33579 3 3.75 3C4.16421 3 4.5 3.33579 4.5 3.75V5.38544C6.33236 3.30939 9.01327 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.5224 2.03348 11.0527 2.09821 10.593C2.14703 10.2463 2.45167 10 2.8018 10C3.27821 10 3.62807 10.4464 3.56809 10.919C3.52316 11.273 3.5 11.6338 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM11.2284 8.18997C10.2286 7.63459 9 8.35755 9 9.50124V14.4992C9 15.6429 10.2286 16.3658 11.2284 15.8104L15.727 13.3115C16.7558 12.74 16.7558 11.2604 15.727 10.6889L11.2284 8.18997ZM10.5 9.50124L14.9986 12.0002L10.5 14.4992V9.50124Z" 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/replay_24_regular.svg";

Details

Keywords

controlplaybackagainarrowcounterclockwise