Plug Connected Settings icon

Use the Plug Connected Settings 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 { PlugConnectedSettings24Regular, PlugConnectedSettings24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PlugConnectedSettings24Regular aria-label="Plug Connected Settings" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_plug_connected_settings_24_regular.svg" width="24" height="24" alt="Plug Connected Settings">

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.4898 5.57084C20.2796 6.58684 20.7499 7.8635 20.7499 9.25001C20.7499 10.0902 20.5772 10.89 20.2654 11.6159C19.8149 11.4038 19.336 11.2419 18.8361 11.1375C19.1017 10.5632 19.2499 9.92369 19.2499 9.25001C19.2499 6.76473 17.2352 4.75001 14.7499 4.75001C13.2893 4.75001 11.9893 5.44648 11.1668 6.52671C10.9008 6.87593 10.9812 7.35998 11.2916 7.67036L15.0847 11.4635C14.596 11.6592 14.1367 11.9126 13.715 12.2151L9.85438 8.35451C9.33268 7.8328 9.1166 7.05181 9.46723 6.40265C10.4812 4.52541 12.4666 3.25001 14.7499 3.25001C16.1364 3.25001 17.4132 3.72034 18.4292 4.51016L20.7197 2.21967C21.0126 1.92678 21.4874 1.92678 21.7803 2.21967C22.0732 2.51256 22.0732 2.98744 21.7803 3.28033L19.4898 5.57084ZM8.35438 9.85448L12.215 13.7151C11.9125 14.1368 11.6592 14.5962 11.4635 15.0849L7.67023 11.2917C7.35985 10.9813 6.87581 10.9009 6.52659 11.1669C5.44635 11.9894 4.74989 13.2894 4.74989 14.75C4.74989 17.2353 6.76461 19.25 9.24989 19.25C9.92362 19.25 10.5632 19.1018 11.1375 18.8361C11.2419 19.3361 11.4038 19.8149 11.6159 20.2654C10.89 20.5773 10.0901 20.75 9.24989 20.75C7.86339 20.75 6.58673 20.2797 5.57072 19.4899L3.28033 21.7803C2.98744 22.0732 2.51256 22.0732 2.21967 21.7803C1.92678 21.4874 1.92678 21.0126 2.21967 20.7197L4.51005 18.4293C3.72022 17.4133 3.24989 16.1366 3.24989 14.75C3.24989 12.4667 4.52528 10.4813 6.40253 9.46733C7.05168 9.1167 7.83268 9.33278 8.35438 9.85448ZM12.837 16.4716C13.9386 16.1991 14.593 15.0656 14.2782 13.9754L14.0801 13.2892C14.5194 12.9068 15.0193 12.5967 15.5629 12.3765L16.0617 12.9013C16.85 13.7309 18.1722 13.7311 18.9608 12.9018L19.4539 12.3833C19.9985 12.6061 20.499 12.9193 20.9381 13.3051L20.7519 13.9359C20.4281 15.0335 21.0894 16.1785 22.2019 16.4464L22.7409 16.5762C22.7899 16.8765 22.8155 17.1851 22.8155 17.4998C22.8155 17.8006 22.7922 18.0958 22.7472 18.3835L22.1635 18.528C21.062 18.8005 20.4076 19.9339 20.7223 21.0242L20.9204 21.7101C20.4811 22.0925 19.9811 22.4027 19.4375 22.623L18.9388 22.0982C18.1506 21.2687 16.8283 21.2685 16.0397 22.0977L15.5464 22.6165C15.0019 22.3937 14.5014 22.0805 14.0623 21.6949L14.2486 21.0636C14.5725 19.9661 13.9111 18.8211 12.7986 18.5532L12.2592 18.4232C12.2101 18.123 12.1846 17.8145 12.1846 17.4998C12.1846 17.199 12.2079 16.9038 12.2528 16.6161L12.837 16.4716ZM16.0504 17.4998C16.0504 18.3282 16.6994 18.9998 17.5 18.9998C18.3007 18.9998 18.9497 18.3282 18.9497 17.4998C18.9497 16.6714 18.3007 15.9998 17.5 15.9998C16.6994 15.9998 16.0504 16.6714 16.0504 17.4998Z" 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/plug_connected_settings_24_regular.svg";

Details

Keywords

connectpoweradd