Calendar 3 Day icon
Used to change view to three day view in calendar. The Calendar 3 Day 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 3 Day 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 { Calendar3Day24Regular, Calendar3Day24Filled } from "@fluentui/react-icons";
export function Example() {
return <Calendar3Day24Regular aria-label="Calendar 3 Day" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_calendar_3_day_24_regular.svg" width="24" height="24" alt="Calendar 3 Day"> 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.75ZM17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H17.75C18.7165 19.5 19.5 18.7165 19.5 17.75V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5ZM7.75 7C8.1297 7 8.44349 7.28215 8.49315 7.64823L8.5 7.75V16.25C8.5 16.6642 8.16421 17 7.75 17C7.3703 17 7.05651 16.7178 7.00685 16.3518L7 16.25V7.75C7 7.33579 7.33579 7 7.75 7ZM16.25 7C16.6297 7 16.9435 7.28215 16.9932 7.64823L17 7.75V16.25C17 16.6642 16.6642 17 16.25 17C15.8703 17 15.5565 16.7178 15.5068 16.3518L15.5 16.25V7.75C15.5 7.33579 15.8358 7 16.25 7ZM12 7C12.3797 7 12.6935 7.28215 12.7432 7.64823L12.75 7.75V16.25C12.75 16.6642 12.4142 17 12 17C11.6203 17 11.3065 16.7178 11.2568 16.3518L11.25 16.25V7.75C11.25 7.33579 11.5858 7 12 7Z" 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_3_day_24_regular.svg";Details
| Name | Calendar 3 Day |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_calendar_3_day_24_regular.svg |
| Filled file | ic_fluent_calendar_3_day_24_filled.svg |
| React components | Calendar3Day24Regular, Calendar3Day24Filled |
| License | MIT (© Microsoft Corporation) |