Calendar Data Bar icon

Use the Calendar Data Bar 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 { CalendarDataBar24Regular, CalendarDataBar24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CalendarDataBar24Regular aria-label="Calendar Data Bar" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_calendar_data_bar_24_regular.svg" width="24" height="24" alt="Calendar Data Bar">

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.25V13.05C20.6306 13.125 20.2907 13.2815 20 13.4998C20 12.937 19.8139 12.4176 19.5 11.9998V8.5H4.5V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11V21H6.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.5ZM17.5 12C16.6716 12 16 12.6716 16 13.5V21.5C16 22.3284 16.6716 23 17.5 23C18.3284 23 19 22.3284 19 21.5V13.5C19 12.6716 18.3284 12 17.5 12ZM13.5 16C12.6716 16 12 16.6716 12 17.5V21.5C12 22.3284 12.6716 23 13.5 23C14.3284 23 15 22.3284 15 21.5V17.5C15 16.6716 14.3284 16 13.5 16ZM20 15.5C20 14.6716 20.6716 14 21.5 14C22.3284 14 23 14.6716 23 15.5V21.5C23 22.3284 22.3284 23 21.5 23C20.6716 23 20 22.3284 20 21.5V15.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_data_bar_24_regular.svg";

Details

Keywords

timedateplanningdatachartgraph