Engine icon
Used for a more technical view of car internals. The Engine icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Engine 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 { Engine24Regular, Engine24Filled } from "@fluentui/react-icons";
export function Example() {
return <Engine24Regular aria-label="Engine" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_engine_24_regular.svg" width="24" height="24" alt="Engine"> 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="M9.75 9C10.1642 9 10.5 9.33579 10.5 9.75V12.25C10.5 12.9404 11.0596 13.5 11.75 13.5H12.5V9.75C12.5 9.33579 12.8358 9 13.25 9C13.6642 9 14 9.33579 14 9.75V13.5H18.25C18.6642 13.5 19 13.8358 19 14.25C19 14.6642 18.6642 15 18.25 15H11.75C10.2312 15 9 13.7688 9 12.25V9.75C9 9.33579 9.33579 9 9.75 9ZM9.75 3C10.1642 3 10.5 3.33579 10.5 3.75V5H12.5V3.75C12.5 3.33579 12.8358 3 13.25 3C13.6642 3 14 3.33579 14 3.75V5H16.75C17.0567 5 17.3325 5.18671 17.4464 5.47146L18.2578 7.5H19.25C20.7688 7.5 22 8.73122 22 10.25V15.75C22 17.2688 20.7688 18.5 19.25 18.5H18.2578L17.4464 20.5285C17.3325 20.8133 17.0567 21 16.75 21H9.25C9.04211 21 8.84355 20.9137 8.70171 20.7617L5.7396 17.588C5.26433 17.0788 5 16.4082 5 15.7117L5 12.5H3.5V16.25C3.5 16.6642 3.16421 17 2.75 17C2.33579 17 2 16.6642 2 16.25V7.75C2 7.33579 2.33579 7 2.75 7C3.16421 7 3.5 7.33579 3.5 7.75V11H5V7.75C5 6.23122 6.23122 5 7.75 5H9V3.75C9 3.33579 9.33579 3 9.75 3ZM7.75 6.5C7.05964 6.5 6.5 7.05964 6.5 7.75V15.7117C6.5 16.0283 6.62015 16.3331 6.83618 16.5646L9.57591 19.5H16.2422L17.0536 17.4715C17.1675 17.1867 17.4433 17 17.75 17H19.25C19.9404 17 20.5 16.4404 20.5 15.75V10.25C20.5 9.55964 19.9404 9 19.25 9H17.75C17.4433 9 17.1675 8.81329 17.0536 8.52854L16.2422 6.5H7.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/engine_24_regular.svg";Details
| Name | Engine |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_engine_24_regular.svg |
| Filled file | ic_fluent_engine_24_filled.svg |
| React components | Engine24Regular, Engine24Filled |
| License | MIT (© Microsoft Corporation) |