Fast Acceleration icon

Use the Fast Acceleration 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 { FastAcceleration24Regular, FastAcceleration24Filled } from "@fluentui/react-icons";

export function Example() {
  return <FastAcceleration24Regular aria-label="Fast Acceleration" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_fast_acceleration_24_regular.svg" width="24" height="24" alt="Fast Acceleration">

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="M13.5 4C18.1944 4 22 7.80558 22 12.5C22 17.1944 18.1944 21 13.5 21C11.7093 21 10.0479 20.4463 8.67779 19.5007L1.75159 19.5C1.33737 19.5 1.00159 19.1642 1.00159 18.75C1.00159 18.3703 1.28374 18.0565 1.64982 18.0068L1.75159 18L7.01989 18.001C6.62849 17.5404 6.28533 17.0376 5.99821 16.5002L3.74705 16.5C3.33284 16.5 2.99705 16.1642 2.99705 15.75C2.99705 15.3703 3.27921 15.0565 3.64528 15.0068L3.74705 15L5.37391 15.0011C5.13082 14.2103 4.99998 13.3705 4.99998 12.5C4.99998 10.4025 5.75972 8.48241 7.01904 6.99997L2.74998 7C2.33577 7 1.99998 6.66421 1.99998 6.25C1.99998 5.8703 2.28213 5.55651 2.64821 5.50685L2.74998 5.5L8.6768 5.49999C10.0471 4.554 11.7089 4 13.5 4ZM13.5 5.5C9.63399 5.5 6.49998 8.63401 6.49998 12.5C6.49998 16.366 9.63399 19.5 13.5 19.5C17.366 19.5 20.5 16.366 20.5 12.5C20.5 8.63401 17.366 5.5 13.5 5.5ZM13.5031 7.00169C16.5415 7.00169 19.0046 9.46479 19.0046 12.5032C19.0046 15.5416 16.5415 18.0047 13.5031 18.0047C10.4648 18.0047 8.00167 15.5416 8.00167 12.5032C8.00167 9.46479 10.4648 7.00169 13.5031 7.00169ZM14.6544 14.7161C14.3091 14.8963 13.9164 14.9982 13.5 14.9982C13.0879 14.9982 12.6991 14.8984 12.3565 14.7218L11.2606 15.8177C11.9003 16.2513 12.6721 16.5047 13.5031 16.5047C14.3368 16.5047 15.1109 16.2497 15.7517 15.8136L14.6544 14.7161ZM9.50167 12.5032C9.50167 13.3394 9.75818 14.1157 10.1968 14.7577L11.2897 13.6665C11.1053 13.318 11.0009 12.9208 11.0009 12.4991C11.0009 12.0822 11.103 11.6892 11.2835 11.3436L10.1927 10.2546C9.75658 10.8955 9.50167 11.6695 9.50167 12.5032ZM16.8177 10.2606L15.7227 11.3556C15.8993 11.6983 15.9991 12.087 15.9991 12.4991C15.9991 12.916 15.897 13.309 15.7165 13.6545L16.8136 14.7517C17.2497 14.1109 17.5046 13.3368 17.5046 12.5032C17.5046 11.6722 17.2513 10.9003 16.8177 10.2606ZM13.5 11.5C12.9482 11.5 12.5009 11.9473 12.5009 12.4991C12.5009 13.0509 12.9482 13.4982 13.5 13.4982C14.0518 13.4982 14.4991 13.0509 14.4991 12.4991C14.4991 11.9473 14.0518 11.5 13.5 11.5ZM13.5031 8.50169C12.6691 8.50169 11.8946 8.75687 11.2536 9.19342L12.3435 10.2831C12.6893 10.1023 13.0827 10 13.5 10C13.9212 10 14.3182 10.1042 14.6664 10.2883L15.7577 9.19684C15.1157 8.7582 14.3394 8.50169 13.5031 8.50169Z" 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/fast_acceleration_24_regular.svg";

Details

Keywords

drivequickwheel