Calendar Settings icon
Used in calendar scenarios. The Calendar 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 Calendar 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 { CalendarSettings24Regular, CalendarSettings24Filled } from "@fluentui/react-icons";
export function Example() {
return <CalendarSettings24Regular aria-label="Calendar Settings" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_calendar_settings_24_regular.svg" width="24" height="24" alt="Calendar 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.75 3C19.5449 3 21 4.45507 21 6.25V12.0218C20.5368 11.7253 20.0335 11.4858 19.5 11.3135V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.3135C11.4858 20.0335 11.7253 20.5368 12.0218 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V7H19.5V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5ZM14.2811 13.9759C14.5959 15.0661 13.9415 16.1995 12.8399 16.4721L12.2557 16.6166C12.2108 16.9043 12.1875 17.1995 12.1875 17.5003C12.1875 17.815 12.213 18.1235 12.2621 18.4237L12.8015 18.5536C13.9141 18.8216 14.5754 19.9666 14.2515 21.0641L14.0652 21.6954C14.5044 22.081 15.0048 22.3942 15.5494 22.6169L16.0427 22.0982C16.8312 21.269 18.1535 21.2692 18.9418 22.0987L19.4405 22.6235C19.9841 22.4032 20.484 22.093 20.9233 21.7106L20.7253 21.0247C20.4105 19.9344 21.0649 18.801 22.1665 18.5285L22.7502 18.384C22.7951 18.0963 22.8184 17.8011 22.8184 17.5003C22.8184 17.1856 22.7929 16.877 22.7438 16.5767L22.2048 16.4469C21.0923 16.179 20.431 15.034 20.7549 13.9364L20.941 13.3056C20.5019 12.9198 20.0014 12.6066 19.4568 12.3838L18.9637 12.9023C18.1752 13.7316 16.8529 13.7313 16.0646 12.9018L15.5658 12.377C15.0223 12.5972 14.5223 12.9073 14.083 13.2897L14.2811 13.9759ZM17.503 19.0003C16.7023 19.0003 16.0533 18.3287 16.0533 17.5003C16.0533 16.6719 16.7023 16.0003 17.503 16.0003C18.3036 16.0003 18.9526 16.6719 18.9526 17.5003C18.9526 18.3287 18.3036 19.0003 17.503 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/calendar_settings_24_regular.svg";Details
| Name | Calendar Settings |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_calendar_settings_24_regular.svg |
| Filled file | ic_fluent_calendar_settings_24_filled.svg |
| React components | CalendarSettings24Regular, CalendarSettings24Filled |
| License | MIT (© Microsoft Corporation) |