Content Settings icon
Used for Window Ad scenarios that need settings. The Content 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 Content 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 { ContentSettings24Regular, ContentSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <ContentSettings24Regular aria-label="Content Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_content_settings_24_regular.svg" width="24" height="24" alt="Content 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="M17.7512 3L17.9356 3.00514C19.5837 3.09734 20.9039 4.4175 20.9961 6.06558L21.0012 6.25V12.0222C20.5378 11.7254 20.0342 11.4858 19.5004 11.3134L19.5 8H4.5012L4.5 17.75C4.5 18.6682 5.20711 19.4212 6.10647 19.4942L6.25 19.5H11.3141C11.4864 20.0335 11.7259 20.5368 12.0224 21H6.25C4.51697 21 3.10075 19.6435 3.00514 17.9344L3 17.75V6.25C3 4.51697 4.35645 3.10075 6.06558 3.00514L6.25 3H17.7512ZM17.751 4.5H6.25098C5.28448 4.5 4.50098 5.2835 4.50098 6.25V6.5H19.501V6.25C19.501 5.2835 18.7175 4.5 17.751 4.5ZM10.25 9.5C10.6297 9.5 10.9435 9.78215 10.9932 10.1482L11 10.25V17.25C11 17.6297 10.7178 17.9435 10.3518 17.9932L10.25 18H6.75C6.3703 18 6.05651 17.7178 6.00685 17.3518L6 17.25V10.25C6 9.8703 6.28215 9.55651 6.64823 9.50685L6.75 9.5H10.25ZM9.5 11H7.5V16.5H9.5V11ZM18 10.25C18 9.83579 17.6642 9.5 17.25 9.5H12.7544L12.6526 9.50685C12.2866 9.55651 12.0044 9.8703 12.0044 10.25C12.0044 10.6642 12.3402 11 12.7544 11H17.25L17.3518 10.9932C17.7178 10.9435 18 10.6297 18 10.25ZM14.2792 13.9754C14.5939 15.0656 13.9396 16.1991 12.838 16.4716L12.2538 16.6161C12.2089 16.9038 12.1855 17.199 12.1855 17.4998C12.1855 17.8145 12.2111 18.123 12.2601 18.4232L12.7996 18.5532C13.9121 18.8211 14.5734 19.9661 14.2496 21.0636L14.0633 21.6949C14.5024 22.0805 15.0029 22.3937 15.5474 22.6165L16.0407 22.0977C16.8293 21.2685 18.1515 21.2687 18.9398 22.0982L19.4385 22.623C19.9821 22.4027 20.4821 22.0925 20.9213 21.7101L20.7233 21.0242C20.4085 19.9339 21.0629 18.8005 22.1645 18.528L22.7482 18.3835C22.7931 18.0958 22.8165 17.8006 22.8165 17.4998C22.8165 17.1851 22.7909 16.8765 22.7418 16.5762L22.2029 16.4464C21.0904 16.1785 20.4291 15.0335 20.7529 13.9359L20.9391 13.3051C20.4999 12.9193 19.9995 12.6061 19.4549 12.3833L18.9618 12.9018C18.1732 13.7311 16.8509 13.7309 16.0627 12.9013L15.5639 12.3765C15.0203 12.5967 14.5204 12.9068 14.0811 13.2892L14.2792 13.9754ZM17.501 18.9998C16.7004 18.9998 16.0513 18.3282 16.0513 17.4998C16.0513 16.6714 16.7004 15.9998 17.501 15.9998C18.3016 15.9998 18.9507 16.6714 18.9507 17.4998C18.9507 18.3282 18.3016 18.9998 17.501 18.9998Z" 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/content_settings_24_regular.svg";Details
| Name | Content Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_content_settings_24_regular.svg |
| Filled file | ic_fluent_content_settings_24_filled.svg |
| React components | ContentSettings24Regular, ContentSettings24Filled |
| License | MIT (© Microsoft Corporation) |