Settings Cog Multiple icon

Use the Settings Cog Multiple 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 { SettingsCogMultiple24Regular, SettingsCogMultiple24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SettingsCogMultiple24Regular aria-label="Settings Cog Multiple" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_settings_cog_multiple_24_regular.svg" width="24" height="24" alt="Settings Cog Multiple">

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="M17.996 13C18.164 13 18.3304 13.0083 18.4941 13.0244C18.7918 13.0537 19.0223 13.2866 19.0849 13.5791L19.3505 14.8223C19.4197 15.146 19.7543 15.339 20.0693 15.2373L21.2783 14.8457C21.5623 14.7538 21.8781 14.8369 22.0527 15.0791C22.2458 15.3472 22.4131 15.6352 22.5507 15.9395C22.6739 16.2118 22.5879 16.5271 22.3662 16.7275L21.4218 17.5801C21.1763 17.802 21.1763 18.1883 21.4218 18.4102L22.3691 19.2646C22.5908 19.4648 22.6773 19.7804 22.5546 20.0527C22.4178 20.3565 22.2516 20.6443 22.0595 20.9121C21.8851 21.155 21.5687 21.2385 21.2841 21.1465L20.0693 20.7529C19.7543 20.6512 19.4197 20.8442 19.3505 21.168L19.083 22.4199C19.0203 22.7125 18.7899 22.9458 18.4921 22.9756C18.3291 22.9919 18.1633 23 17.996 23C17.8301 23 17.6657 22.9915 17.5039 22.9756C17.2061 22.946 16.9757 22.7136 16.913 22.4209L16.6455 21.168C16.5762 20.8441 16.2418 20.6509 15.9267 20.7529L14.708 21.1465C14.4235 21.2381 14.1068 21.155 13.9326 20.9121C13.7411 20.6451 13.575 20.3583 13.4384 20.0557C13.3157 19.7834 13.4024 19.4678 13.624 19.2676L14.5742 18.4102C14.8201 18.1882 14.8201 17.802 14.5742 17.5801L13.6269 16.7246C13.405 16.5241 13.3189 16.208 13.4423 15.9355C13.5799 15.6322 13.7467 15.3445 13.9394 15.0771C14.114 14.8352 14.4299 14.7531 14.7138 14.8447L15.9267 15.2373C16.2418 15.3393 16.5762 15.1461 16.6455 14.8223L16.9111 13.5791C16.9736 13.2864 17.2041 13.0539 17.5019 13.0244C17.6644 13.0084 17.8294 13 17.996 13ZM17.997 16.5C17.1688 16.5002 16.497 17.1717 16.497 18C16.497 18.8283 17.1688 19.4998 17.997 19.5C18.8253 19.4999 19.497 18.8283 19.497 18C19.497 17.1717 18.8253 16.5001 17.997 16.5ZM9.00776 1.49805C9.34744 1.49805 9.68092 1.5215 10.0068 1.56543L10.33 1.61621L10.4394 1.64453C10.6889 1.72923 10.8786 1.94057 10.9326 2.2041L11.2978 3.98633L11.3173 4.06055C11.4334 4.42209 11.8259 4.6271 12.1953 4.50391L13.9228 3.92773L14.0322 3.89941C14.2913 3.85452 14.5588 3.94938 14.7324 4.1543C15.3037 4.82895 15.7593 5.60642 16.0654 6.45605C16.1692 6.74465 16.0868 7.06795 15.8574 7.27148L14.4921 8.48242C14.1819 8.75784 14.1809 9.24216 14.4912 9.51758L15.8554 10.7266C16.0852 10.9302 16.1676 11.2541 16.0634 11.543C15.7567 12.3932 15.3011 13.1705 14.7294 13.8447C14.5313 14.0784 14.2105 14.1681 13.9199 14.0713L12.1953 13.4961C11.8259 13.3729 11.4334 13.5779 11.3173 13.9395L11.2978 14.0137L10.9335 15.791C10.8719 16.0919 10.6333 16.3249 10.331 16.3789C9.90415 16.455 9.46189 16.498 9.00776 16.498C8.54894 16.498 8.10158 16.455 7.6689 16.377C7.36708 16.3225 7.12886 16.0895 7.06733 15.7891L6.70503 14.0137C6.62182 13.6068 6.20147 13.3648 5.80757 13.4961L4.09175 14.0674C3.80091 14.1642 3.48022 14.0738 3.28218 13.8398C2.71019 13.1641 2.25332 12.3856 1.94722 11.5332C1.84354 11.2444 1.92649 10.9212 2.1562 10.7178L3.51167 9.51758C3.82185 9.24217 3.82185 8.75783 3.51167 8.48242L2.15522 7.28027C1.92584 7.07698 1.84288 6.75435 1.94624 6.46582C2.25177 5.61402 2.70752 4.83436 3.27925 4.1582L3.35835 4.07715C3.55642 3.90432 3.83417 3.84578 4.08882 3.93066L5.80757 4.50391C6.20147 4.63524 6.62182 4.39315 6.70503 3.98633L7.06831 2.20605L7.09858 2.09668C7.18952 1.85003 7.40568 1.66578 7.66987 1.61816C8.10319 1.54008 8.55029 1.49805 9.00776 1.49805ZM9.00776 2.99805C8.81325 2.99805 8.62075 3.00795 8.43061 3.02637L8.17378 4.28711C7.91021 5.57523 6.58031 6.34363 5.33296 5.92773L4.11714 5.52148C3.89685 5.83057 3.7059 6.16153 3.54683 6.50977L4.50581 7.35938C5.4898 8.2317 5.4898 9.7683 4.50581 10.6406L3.5478 11.4883C3.7071 11.8364 3.89941 12.1665 4.12007 12.4756L5.33296 12.0723C6.58031 11.6564 7.91021 12.4248 8.17378 13.7129L8.42964 14.9678C8.62039 14.9865 8.81311 14.998 9.00776 14.998C9.19719 14.998 9.38506 14.9877 9.57124 14.9697L9.82905 13.7129L9.89058 13.4775C10.2585 12.3334 11.5005 11.6823 12.6699 12.0723L13.8916 12.4795C14.1116 12.1717 14.3026 11.8427 14.4619 11.4961L13.497 10.6406C12.513 9.76834 12.5122 8.23173 13.496 7.35938L14.4628 6.50098C14.3038 6.15434 14.1132 5.82522 13.8935 5.51758L12.6699 5.92676C11.5005 6.31668 10.2585 5.66665 9.89058 4.52246L9.82905 4.28711L9.57026 3.02539C9.38467 3.00769 9.19707 2.99805 9.00776 2.99805ZM8.99995 6.24707C10.5187 6.2471 11.75 7.4783 11.75 8.99707C11.75 10.5158 10.5187 11.747 8.99995 11.7471C7.48117 11.7471 6.24995 10.5159 6.24995 8.99707C6.24995 7.47829 7.48117 6.24707 8.99995 6.24707ZM8.99995 7.74707C8.30959 7.74707 7.74995 8.30671 7.74995 8.99707C7.74995 9.68743 8.30959 10.2471 8.99995 10.2471C9.69028 10.247 10.25 9.68741 10.25 8.99707C10.25 8.30673 9.69028 7.7471 8.99995 7.74707Z" 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/settings_cog_multiple_24_regular.svg";

Details

Keywords

gearoptionscogstwomultiple