Edit Settings icon
Used in editing/update scenarios. The Edit Settings icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Edit 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 { EditSettings24Regular, EditSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <EditSettings24Regular aria-label="Edit Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_edit_settings_24_regular.svg" width="24" height="24" alt="Edit 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="M20.9519 3.0481C19.5543 1.65058 17.2885 1.65064 15.8911 3.04825L3.94103 14.9997C3.5347 15.4061 3.2491 15.9172 3.116 16.4762L2.02041 21.0777C1.96009 21.3311 2.03552 21.5976 2.21968 21.7817C2.40385 21.9659 2.67037 22.0413 2.92373 21.981L7.52498 20.8855C8.08418 20.7523 8.59546 20.4666 9.00191 20.0601L10.1531 18.9088C10.0528 18.4552 10 17.9838 10 17.5C10 17.3026 10.0088 17.1073 10.026 16.9144L7.94119 18.9995C7.73104 19.2097 7.46668 19.3574 7.17755 19.4263L3.76191 20.2395L4.57521 16.8237C4.64402 16.5346 4.79168 16.2704 5.00175 16.0603L15 6.06084L17.9394 9.00018L15.9137 11.0261C16.1068 11.0088 16.3024 11 16.5 11C16.9835 11 17.4547 11.0528 17.9081 11.1529L20.952 8.10861C22.3493 6.71112 22.3493 4.4455 20.9519 3.0481ZM16.9518 4.10884C17.7634 3.29709 19.0795 3.29705 19.8912 4.10876C20.7028 4.9204 20.7029 6.23632 19.8913 7.04801L19 7.93946L16.0606 5.00012L16.9518 4.10884ZM13.2772 13.9759C13.592 15.0661 12.9376 16.1995 11.836 16.4721L11.2518 16.6166C11.2069 16.9043 11.1836 17.1995 11.1836 17.5003C11.1836 17.815 11.2091 18.1235 11.2582 18.4237L11.7976 18.5536C12.9102 18.8216 13.5715 19.9666 13.2476 21.0641L13.0613 21.6954C13.5005 22.081 14.0009 22.3942 14.5455 22.6169L15.0388 22.0982C15.8273 21.269 17.1496 21.2692 17.9379 22.0987L18.4366 22.6235C18.9801 22.4032 19.4801 22.093 19.9194 21.7106L19.7214 21.0247C19.4066 19.9344 20.061 18.801 21.1626 18.5285L21.7463 18.384C21.7912 18.0963 21.8145 17.8011 21.8145 17.5003C21.8145 17.1856 21.789 16.877 21.7399 16.5767L21.2009 16.4469C20.0884 16.179 19.4271 15.034 19.751 13.9364L19.9371 13.3056C19.498 12.9198 18.9975 12.6066 18.4529 12.3838L17.9598 12.9023C17.1713 13.7316 15.849 13.7313 15.0607 12.9018L14.5619 12.377C14.0184 12.5972 13.5184 12.9073 13.0791 13.2897L13.2772 13.9759ZM16.4991 19.0003C15.6984 19.0003 15.0494 18.3287 15.0494 17.5003C15.0494 16.6719 15.6984 16.0003 16.4991 16.0003C17.2997 16.0003 17.9487 16.6719 17.9487 17.5003C17.9487 18.3287 17.2997 19.0003 16.4991 19.0003Z" 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/edit_settings_24_regular.svg";Details
| Name | Edit Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_edit_settings_24_regular.svg |
| Filled file | ic_fluent_edit_settings_24_filled.svg |
| React components | EditSettings24Regular, EditSettings24Filled |
| License | MIT (© Microsoft Corporation) |