Shifts Availability icon

Use the Shifts Availability 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 { ShiftsAvailability24Regular, ShiftsAvailability24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ShiftsAvailability24Regular aria-label="Shifts Availability" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_shifts_availability_24_regular.svg" width="24" height="24" alt="Shifts Availability">

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="M8.5 3.5C5.73858 3.5 3.5 5.73858 3.5 8.5C3.5 11.1847 5.61589 13.3752 8.27104 13.4949C8.13865 13.9732 8.05246 14.4707 8.01758 14.9824C4.65301 14.7355 2 11.9276 2 8.5C2 4.91015 4.91015 2 8.5 2C11.9276 2 14.7355 4.65301 14.9824 8.01758C14.4707 8.05246 13.9732 8.13865 13.4949 8.27104C13.3752 5.61589 11.1847 3.5 8.5 3.5ZM14.2777 13.2341C13.9834 12.9426 13.5086 12.9449 13.2171 13.2392C12.9256 13.5335 12.9279 14.0084 13.2223 14.2999L14.4368 15.5026L13.2197 16.7198C12.9268 17.0127 12.9268 17.4875 13.2197 17.7804C13.5126 18.0733 13.9875 18.0733 14.2803 17.7804L15.4994 16.5613L16.7148 17.7797C17.0074 18.073 17.4822 18.0735 17.7755 17.781C18.0687 17.4884 18.0693 17.0136 17.7768 16.7203L16.562 15.5026L17.7742 14.2993C18.0681 14.0075 18.0699 13.5326 17.7781 13.2386C17.4863 12.9447 17.0114 12.9429 16.7174 13.2347L15.4994 14.4439L14.2777 13.2341ZM15.5 9C11.9101 9 9 11.9101 9 15.5C9 19.0899 11.9101 22 15.5 22C19.0899 22 22 19.0899 22 15.5C22 11.9101 19.0899 9 15.5 9ZM10.5 15.5C10.5 12.7386 12.7386 10.5 15.5 10.5C18.2614 10.5 20.5 12.7386 20.5 15.5C20.5 18.2614 18.2614 20.5 15.5 20.5C12.7386 20.5 10.5 18.2614 10.5 15.5ZM11.2803 6.71967C11.5732 7.01256 11.5732 7.48744 11.2803 7.78033L8.28026 10.7803C8.13954 10.921 7.94867 11.0001 7.74966 11C7.55066 10.9999 7.35984 10.9208 7.21922 10.78L5.71953 9.27812C5.42685 8.98502 5.42719 8.51014 5.72029 8.21746C6.0134 7.92477 6.48827 7.92511 6.78095 8.21822L7.75031 9.18896L10.2196 6.71967C10.5125 6.42678 10.9874 6.42678 11.2803 6.71967Z" 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/shifts_availability_24_regular.svg";

Details

Keywords

workfrontlinetimeclockschedulecheckmarkdismissxclose