Gas icon

Use the Gas 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 { Gas24Regular, Gas24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.21967 10.2197C8.51256 9.92678 8.98744 9.92678 9.28033 10.2197L12 12.9393L14.7197 10.2197C15.0126 9.92678 15.4874 9.92678 15.7803 10.2197C16.0732 10.5126 16.0732 10.9874 15.7803 11.2803L13.0607 14L13.5297 14.469C13.5295 14.4688 13.5299 14.4692 13.5297 14.469L15.5303 16.4697C15.5307 16.47 15.531 16.4703 15.5313 16.4706L15.7803 16.7197C16.0732 17.0126 16.0732 17.4874 15.7803 17.7803C15.4874 18.0732 15.0126 18.0732 14.7197 17.7803L14.4706 17.5313C14.4703 17.531 14.47 17.5307 14.4697 17.5303L12.4697 15.5303C12.4699 15.5305 12.4695 15.5301 12.4697 15.5303L12 15.0607L9.28033 17.7803C8.98744 18.0732 8.51256 18.0732 8.21967 17.7803C7.92678 17.4874 7.92678 17.0126 8.21967 16.7197L10.9393 14L8.21967 11.2803C7.92678 10.9874 7.92678 10.5126 8.21967 10.2197ZM13.7501 2C13.5111 2 13.2865 2.11382 13.1452 2.30648L10.4367 6H9V5.75C9 3.95507 7.54493 2.5 5.75 2.5H4.75C4.33579 2.5 4 2.83579 4 3.25C4 3.66421 4.33579 4 4.75 4H5.75C6.7165 4 7.5 4.7835 7.5 5.75V6H6.75C5.23122 6 4 7.23122 4 8.75V19.25C4 20.7688 5.23122 22 6.75 22H17.25C18.7688 22 20 20.7688 20 19.25V8.75C20 7.89156 19.6067 7.12499 18.9904 6.62069C18.9967 6.5814 19.0001 6.54108 19.0001 6.5V2.75C19.0001 2.33579 18.6643 2 18.2501 2H13.7501ZM17.5001 6.01122C17.4177 6.00379 17.3343 6 17.25 6H12.2968L14.1301 3.5H17.5001V6.01122ZM6.75 7.5H17.25C17.9404 7.5 18.5 8.05964 18.5 8.75V19.25C18.5 19.9404 17.9404 20.5 17.25 20.5H6.75C6.05964 20.5 5.5 19.9404 5.5 19.25V8.75C5.5 8.05964 6.05964 7.5 6.75 7.5Z" 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/gas_24_regular.svg";

Details

Keywords

vehiclegastravel