Calendar Date icon
Not in repo. Used only for examples that need a mock date. The Calendar Date 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 Date 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 { CalendarDate24Regular, CalendarDate24Filled } from "@fluentui/react-icons";
export function Example() {
return <CalendarDate24Regular aria-label="Calendar Date" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_calendar_date_24_regular.svg" width="24" height="24" alt="Calendar Date"> 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.25V17.75C21 19.5449 19.5449 21 17.75 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM19.5 8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V8.5ZM13.9951 10.1953C14.6624 10.1953 15.1914 10.3727 15.582 10.7275C15.9727 11.0824 16.168 11.5625 16.168 12.168C16.168 12.5163 16.0785 12.8263 15.8994 13.0981C15.7204 13.37 15.4762 13.584 15.167 13.7402C15.5381 13.9128 15.8237 14.1488 16.0239 14.4482C16.2241 14.7477 16.3242 15.0863 16.3242 15.4639C16.3242 16.0889 16.1126 16.5845 15.6895 16.9507C15.2663 17.3169 14.7031 17.5 14 17.5C13.2936 17.5 12.728 17.3161 12.3032 16.9482C11.8784 16.5804 11.666 16.0856 11.666 15.4639C11.666 15.083 11.7669 14.7412 11.9688 14.4385C12.1706 14.1357 12.4538 13.903 12.8184 13.7402C12.5124 13.584 12.2707 13.37 12.0933 13.0981C11.9159 12.8263 11.8271 12.5163 11.8271 12.168C11.8271 11.5625 12.0225 11.0824 12.4131 10.7275C12.8037 10.3727 13.3311 10.1953 13.9951 10.1953ZM10.2197 10.2686V17.4023H9.03809V11.6943L7.29492 12.29V11.2891L10.0684 10.2686H10.2197ZM13.9902 14.2285C13.6452 14.2285 13.3693 14.3359 13.1626 14.5508C12.9559 14.7656 12.8525 15.0505 12.8525 15.4053C12.8525 15.7536 12.9543 16.0319 13.1577 16.2402C13.3612 16.4486 13.6419 16.5527 14 16.5527C14.3581 16.5527 14.6372 16.4518 14.8374 16.25C15.0376 16.0482 15.1377 15.7666 15.1377 15.4053C15.1377 15.0537 15.0327 14.7697 14.8228 14.5532C14.6128 14.3368 14.3353 14.2285 13.9902 14.2285ZM13.9951 11.1475C13.6924 11.1475 13.4531 11.2427 13.2773 11.4331C13.1016 11.6235 13.0137 11.8831 13.0137 12.2119C13.0137 12.5374 13.1024 12.7962 13.2798 12.9883C13.4572 13.1803 13.6973 13.2764 14 13.2764C14.3027 13.2764 14.5428 13.1803 14.7202 12.9883C14.8976 12.7962 14.9863 12.5374 14.9863 12.2119C14.9863 11.9027 14.8968 11.648 14.7178 11.4478C14.5387 11.2476 14.2979 11.1475 13.9951 11.1475ZM17.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.5Z" 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_date_24_regular.svg";Details
| Name | Calendar Date |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_calendar_date_24_regular.svg |
| Filled file | ic_fluent_calendar_date_24_filled.svg |
| React components | CalendarDate24Regular, CalendarDate24Filled |
| License | MIT (© Microsoft Corporation) |