IoT icon

Use the IoT 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 { Iot24Regular, Iot24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M19 4.49219C19 5.8729 17.8807 6.99219 16.5 6.99219C16.3246 6.99219 16.1533 6.97411 15.9881 6.93973L14.7084 9.0571C15.5025 9.7881 16 10.8363 16 12.0007C16 12.0202 15.9999 12.0395 15.9996 12.0589L17.296 12.3197C17.7176 11.5346 18.5465 11.0007 19.5 11.0007C20.8807 11.0007 22 12.12 22 13.5007C22 14.8814 20.8807 16.0007 19.5 16.0007C18.2184 16.0007 17.162 15.0363 17.017 13.7936L15.698 13.5283C15.3532 14.362 14.7347 15.0538 13.9544 15.4916L14.4495 17.0034C14.4663 17.003 14.4831 17.0029 14.5 17.0029C15.8807 17.0029 17 18.1222 17 19.5029C17 20.8836 15.8807 22.0029 14.5 22.0029C13.1193 22.0029 12 20.8836 12 19.5029C12 18.6725 12.4048 17.9367 13.0279 17.482L12.5313 15.9658C12.3575 15.9888 12.1801 16.0007 12 16.0007C10.679 16.0007 9.50761 15.3604 8.77921 14.3732L6.98453 15.2211C6.99475 15.3129 7 15.4062 7 15.5007C7 16.8814 5.88071 18.0007 4.5 18.0007C3.11929 18.0007 2 16.8814 2 15.5007C2 14.12 3.11929 13.0007 4.5 13.0007C5.24769 13.0007 5.91872 13.329 6.37685 13.8492L8.13113 13.0204C8.04557 12.6949 8 12.3531 8 12.0007C8 11.0331 8.34357 10.1458 8.91537 9.45398L7.92362 8.32458C7.63789 8.43824 7.32624 8.50073 7 8.50073C5.61929 8.50073 4.5 7.38144 4.5 6.00073C4.5 4.62002 5.61929 3.50073 7 3.50073C8.38071 3.50073 9.5 4.62002 9.5 6.00073C9.5 6.50913 9.34825 6.98208 9.08756 7.37676L10.0704 8.49606C10.6426 8.18038 11.3003 8.00073 12 8.00073C12.5054 8.00073 12.9889 8.09447 13.4341 8.2655L14.6793 6.20535C14.2581 5.75789 14 5.15518 14 4.49219C14 3.11148 15.1193 1.99219 16.5 1.99219C17.8807 1.99219 19 3.11148 19 4.49219ZM17.5 4.49219C17.5 3.9399 17.0523 3.49219 16.5 3.49219C15.9477 3.49219 15.5 3.9399 15.5 4.49219C15.5 5.04447 15.9477 5.49219 16.5 5.49219C17.0523 5.49219 17.5 5.04447 17.5 4.49219ZM7 7.00073C7.55228 7.00073 8 6.55302 8 6.00073C8 5.44845 7.55228 5.00073 7 5.00073C6.44772 5.00073 6 5.44845 6 6.00073C6 6.55302 6.44772 7.00073 7 7.00073ZM12 14.5007C13.3807 14.5007 14.5 13.3814 14.5 12.0007C14.5 10.62 13.3807 9.50073 12 9.50073C10.6193 9.50073 9.5 10.62 9.5 12.0007C9.5 13.3814 10.6193 14.5007 12 14.5007ZM5.5 15.5007C5.5 14.9484 5.05228 14.5007 4.5 14.5007C3.94772 14.5007 3.5 14.9484 3.5 15.5007C3.5 16.053 3.94772 16.5007 4.5 16.5007C5.05228 16.5007 5.5 16.053 5.5 15.5007ZM15.5 19.5029C15.5 18.9506 15.0523 18.5029 14.5 18.5029C13.9477 18.5029 13.5 18.9506 13.5 19.5029C13.5 20.0552 13.9477 20.5029 14.5 20.5029C15.0523 20.5029 15.5 20.0552 15.5 19.5029ZM19.5 14.5007C20.0523 14.5007 20.5 14.053 20.5 13.5007C20.5 12.9484 20.0523 12.5007 19.5 12.5007C18.9477 12.5007 18.5 12.9484 18.5 13.5007C18.5 14.053 18.9477 14.5007 19.5 14.5007Z" 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/iot_24_regular.svg";

Details

Keywords

internetofthingsphysicaldevice