Work IQ icon

Use the Work IQ 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 { WorkIq24Regular, WorkIq24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WorkIq24Regular aria-label="Work IQ" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_work_iq_24_regular.svg" width="24" height="24" alt="Work IQ">

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 3C17.5228 3 22 7.47715 22 13C22 15.5074 20.5794 17.6814 18.5 18.7656V19C18.5 20.3807 19.6193 21.5 21 21.5H21.25C21.6642 21.5 22 21.8358 22 22.25C22 22.6642 21.6642 23 21.25 23H21C18.8987 23 17.1769 21.3796 17.0137 19.3203C16.5278 19.4362 16.0214 19.5 15.5 19.5H14.5C12.2909 19.5 10.5 17.7091 10.5 15.5C10.5 13.2909 12.2909 11.5 14.5 11.5C16.7091 11.5 18.5 13.2909 18.5 15.5V16.999C19.7141 16.0868 20.5 14.6355 20.5 13C20.5 8.30558 16.6944 4.5 12 4.5C7.30558 4.5 3.5 8.30558 3.5 13V13.5C3.5 15.1569 4.84315 16.5 6.5 16.5H8.25C8.66421 16.5 9 16.8358 9 17.25C9 17.6642 8.66421 18 8.25 18H6.5C4.01472 18 2 15.9853 2 13.5V13C2 7.47715 6.47715 3 12 3ZM14.5 13C13.1193 13 12 14.1193 12 15.5C12 16.8807 13.1193 18 14.5 18H15.5C16.0227 18 16.5264 17.9193 17 17.7705V15.5C17 14.1193 15.8807 13 14.5 13Z" 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/work_iq_24_regular.svg";

Details