Run icon

Use the Run 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 { Run24Regular, Run24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M8.97916 3.56998C8.87609 3.1688 8.46616 2.92253 8.06356 3.01993C7.73345 3.09979 7.51076 3.38592 7.4981 3.70752C5.54827 4.34528 4.39217 5.35947 3.74306 6.52141C3.13224 7.61481 3.01854 8.75768 3.00248 9.63408L2.49605 10.2672C1.67554 11.293 1.90457 12.8006 2.99271 13.5365L12.0602 19.6683C13.3421 20.5352 14.8541 20.9984 16.4016 20.9984H18.6099C20.4835 20.9984 22.0023 19.4796 22.0023 17.6061C22.0023 15.6955 20.4021 14.3807 19.0179 13.7133C18.6035 13.5135 18.2601 13.2524 18.0318 12.9171L15.4492 8.47258C15.7937 8.38225 16.0312 8.05648 15.9971 7.69012C15.9587 7.2786 15.5922 6.97169 15.1784 7.00463C12.2286 7.23942 9.57799 5.90071 8.97916 3.56998ZM13.723 8.48764L16.7471 13.6918C16.7547 13.7047 16.7626 13.7174 16.7708 13.7299C17.1913 14.363 17.7844 14.7839 18.3665 15.0645C19.1352 15.4351 19.769 15.9328 20.1413 16.4966H16.3708C15.7231 16.4966 15.0901 16.3031 14.5532 15.9409L12.7015 14.6917L13.1248 14.4472C13.9619 13.964 14.2486 12.8937 13.7654 12.0567L13.0833 10.8753C12.6001 10.0383 11.5298 9.75151 10.6928 10.2348L8.21517 11.6652L7.00402 10.8481L7.124 10.7789C7.96101 10.2956 8.24779 9.22534 7.76454 8.38833L6.32938 5.90255C6.76155 5.61258 7.30338 5.34737 7.98533 5.12634C9.0679 7.17005 11.3473 8.27719 13.723 8.48764ZM5.62054 9.91485L4.52431 9.17533C4.57218 8.53695 4.7063 7.87282 5.05258 7.25296C5.10305 7.16261 5.15873 7.072 5.2203 6.98157L6.46551 9.13833C6.53454 9.25791 6.49357 9.4108 6.374 9.47984L5.62054 9.91485ZM11.318 13.7584L9.59865 12.5985L11.4428 11.5338C11.5623 11.4648 11.7152 11.5057 11.7843 11.6253L12.4663 12.8067C12.5354 12.9263 12.4944 13.0792 12.3748 13.1482L11.318 13.7584ZM3.66743 11.2042L4.08175 10.6862L13.7143 17.1844C14.4991 17.7138 15.4241 17.9966 16.3708 17.9966H20.462C20.282 18.8544 19.5212 19.4984 18.6099 19.4984H16.4016C15.1536 19.4984 13.9343 19.1248 12.9005 18.4258L3.83298 12.2939C3.47027 12.0487 3.39392 11.5461 3.66743 11.2042Z" 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/run_24_regular.svg";

Details

Keywords

exercisejogmarathonclothingspeedquick