Calendar Shield icon
Used in calendar scenarios. The Calendar Shield 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 Shield 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 { CalendarShield24Regular, CalendarShield24Filled } from "@fluentui/react-icons";
export function Example() {
return <CalendarShield24Regular aria-label="Calendar Shield" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_calendar_shield_24_regular.svg" width="24" height="24" alt="Calendar Shield"> 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.6107C20.6588 12.5453 20.3278 12.4214 20.0023 12.2327C19.8353 12.1358 19.6678 12.0208 19.5 11.8858V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H13.5719C13.6458 19.6666 13.727 19.8294 13.8158 19.9881C14.0196 20.3525 14.2599 20.6899 14.5351 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM14.6889 19.5C15.013 20.0794 15.4504 20.5801 16.0001 21C16.5237 21.4 17.1492 21.7268 17.8745 21.9786C17.9566 22.0071 18.0454 22.0071 18.1275 21.9786C20.688 21.0896 22.001 19.2663 22.001 16.5844V14.0833L21.9928 13.9994C21.9556 13.8095 21.7943 13.6667 21.601 13.6667C21.3977 13.6667 21.198 13.6527 21.0016 13.6245C20.4779 13.5496 19.9783 13.3745 19.501 13.0977C19.0784 12.8527 18.6733 12.5279 18.2847 12.1223C18.1285 11.9594 17.8751 11.9592 17.7188 12.122C16.7243 13.1575 15.6244 13.6667 14.401 13.6667C14.1801 13.6667 14.001 13.8532 14.001 14.0833V16.5844L14.0054 16.8497C14.0391 17.8629 14.2682 18.7478 14.6889 19.5ZM17.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_shield_24_regular.svg";Details
| Name | Calendar Shield |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_calendar_shield_24_regular.svg |
| Filled file | ic_fluent_calendar_shield_24_filled.svg |
| React components | CalendarShield24Regular, CalendarShield24Filled |
| License | MIT (© Microsoft Corporation) |