Clock Bill icon

Use the Clock Bill 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 { ClockBill24Regular, ClockBill24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClockBill24Regular aria-label="Clock Bill" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clock_bill_24_regular.svg" width="24" height="24" alt="Clock Bill">

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="M4.5 11C4.5 6.30558 8.30558 2.5 13 2.5C17.6944 2.5 21.5 6.30558 21.5 11C21.5 15.6944 17.6944 19.5 13 19.5C12.3116 19.5 11.6424 19.4182 11.0015 19.2637V20.5C11.0015 20.6003 10.9972 20.6996 10.989 20.7977C11.6386 20.9304 12.3112 21 13 21C18.5228 21 23 16.5228 23 11C23 5.47715 18.5228 1 13 1C7.47715 1 3 5.47715 3 11L3.00006 11.0356C3.16381 11.0122 3.33122 11 3.50146 11H4.5ZM12.9931 5.64827C12.9435 5.28233 12.6295 5 12.25 5C11.836 5 11.5 5.336 11.5 5.75V11.75L11.5069 11.8517C11.5565 12.2177 11.8705 12.5 12.25 12.5H16.25L16.3517 12.4931C16.7177 12.4435 17 12.1295 17 11.75C17 11.336 16.664 11 16.25 11H13V5.75L12.9931 5.64827ZM1 14.5C1 13.1193 2.11929 12 3.5 12H7.5C8.88071 12 10 13.1193 10 14.5V20.5C10 21.8807 8.88071 23 7.5 23H3.5C2.11929 23 1 21.8807 1 20.5V14.5ZM7.5 14H3.5C3.22386 14 3 14.2239 3 14.5C3 14.7761 3.22386 15 3.5 15H7.5C7.77614 15 8 14.7761 8 14.5C8 14.2239 7.77614 14 7.5 14ZM7.5 17H3.5C3.22386 17 3 17.2239 3 17.5C3 17.7761 3.22386 18 3.5 18H7.5C7.77614 18 8 17.7761 8 17.5C8 17.2239 7.77614 17 7.5 17ZM7.5 20H3.5C3.22386 20 3 20.2239 3 20.5C3 20.7761 3.22386 21 3.5 21H7.5C7.77614 21 8 20.7761 8 20.5C8 20.2239 7.77614 20 7.5 20Z" 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/clock_bill_24_regular.svg";

Details

Keywords

timewatchanalogworkhoursbillbillable