Transmission icon

Use the Transmission 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 { Transmission24Regular, Transmission24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M12 2C10.4812 2 9.25 3.23122 9.25 4.75C9.25 6.00878 10.0957 7.07002 11.25 7.39648V11.25C11.25 11.6642 11.5858 12 12 12C12.4142 12 12.75 11.6642 12.75 11.25V7.39648C13.9043 7.07002 14.75 6.00878 14.75 4.75C14.75 3.23122 13.5188 2 12 2ZM10.75 4.75C10.75 4.05964 11.3096 3.5 12 3.5C12.6904 3.5 13.25 4.05964 13.25 4.75C13.25 5.44036 12.6904 6 12 6C11.3096 6 10.75 5.44036 10.75 4.75ZM3 6.5C3 5.11929 4.11929 4 5.5 4C6.88071 4 8 5.11929 8 6.5V10H10.25V11.5H6.5V6.5C6.5 5.94772 6.05228 5.5 5.5 5.5C4.94772 5.5 4.5 5.94772 4.5 6.5V18.5C4.5 19.0523 4.94772 19.5 5.5 19.5C6.05228 19.5 6.5 19.0523 6.5 18.5V13.5H11V18.5C11 19.0523 11.4477 19.5 12 19.5C12.5523 19.5 13 19.0523 13 18.5V13.5H19C19.2761 13.5 19.5 13.2761 19.5 13V6.5C19.5 5.94772 19.0523 5.5 18.5 5.5C17.9477 5.5 17.5 5.94772 17.5 6.5V11.5H13.75V10H16V6.5C16 5.11929 17.1193 4 18.5 4C19.8807 4 21 5.11929 21 6.5V13C21 14.1046 20.1046 15 19 15H14.5V18.5C14.5 19.8807 13.3807 21 12 21C10.6193 21 9.5 19.8807 9.5 18.5V15H8V18.5C8 19.8807 6.88071 21 5.5 21C4.11929 21 3 19.8807 3 18.5V6.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/transmission_24_regular.svg";

Details

Keywords

gearshiftvehicletravelspeed