Gas Pump icon
Used to represent travel & vehicle scenarios. The Gas Pump 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 Gas Pump 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 { GasPump24Regular, GasPump24Filled } from "@fluentui/react-icons";
export function Example() {
return <GasPump24Regular aria-label="Gas Pump" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_gas_pump_24_regular.svg" width="24" height="24" alt="Gas Pump"> 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="M7.75006 6C7.33585 6 7.00005 6.33579 7.00005 6.75V11.25C7.00005 11.6642 7.33585 12 7.75006 12H13.2501C13.6644 12 14.0001 11.6642 14.0001 11.25V6.75C14.0001 6.33579 13.6644 6 13.2501 6H7.75006ZM8.50007 10.5V7.5H12.5001V10.5H8.50007ZM6.75005 3C5.23125 3 4.00001 4.23122 4.00001 5.75V20.5H3.75001C3.33579 20.5 3 20.8358 3 21.25C3 21.6642 3.33579 22 3.75001 22H17.2502C17.6644 22 18.0002 21.6642 18.0002 21.25C18.0002 20.8358 17.6644 20.5 17.2502 20.5H17.0002V18.6971C17.3763 18.8907 17.8029 19 18.255 19C19.771 19 21 17.771 21 16.255V10.4167C21 9.82166 20.807 9.24269 20.45 8.76668L19.35 7.30001C19.1014 6.96864 18.6313 6.90149 18.3 7.15001C17.9686 7.39854 17.9014 7.86864 18.15 8.20001L19.25 9.66668C19.4123 9.88305 19.5 10.1462 19.5 10.4167V16.255C19.5 16.9426 18.9426 17.5 18.255 17.5C17.5674 17.5 17.01 16.9426 17.01 16.255V14.5C17.01 14.4587 17.0066 14.4182 17.0002 14.3787V5.75C17.0002 4.23122 15.769 3 14.2502 3H6.75005ZM15.5002 20.5H5.50003V5.75C5.50003 5.05964 6.05969 4.5 6.75005 4.5H14.2502C14.9405 4.5 15.5002 5.05964 15.5002 5.75V20.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_pump_24_regular.svg";Details
| Name | Gas Pump |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_gas_pump_24_regular.svg |
| Filled file | ic_fluent_gas_pump_24_filled.svg |
| React components | GasPump24Regular, GasPump24Filled |
| License | MIT (© Microsoft Corporation) |