Clock Lock icon
Used to represent time scenarios where a user can't update the time. The Clock Lock 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 Clock Lock 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 { ClockLock24Regular, ClockLock24Filled } from "@fluentui/react-icons";
export function Example() {
return <ClockLock24Regular aria-label="Clock Lock" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_clock_lock_24_regular.svg" width="24" height="24" alt="Clock Lock"> 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="M11 21.5V20.4418C11.328 20.4802 11.6617 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.61139 3.5 3.99959 6.82591 3.54764 11.0947C2.81016 11.5913 2.27203 12.3612 2.07853 13.2593C2.0267 12.8468 2 12.4265 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C11.6489 22 11.302 21.9819 10.9602 21.9466C10.9864 21.8017 11 21.6524 11 21.5ZM11.9931 6.64827C11.9435 6.28233 11.6295 6 11.25 6C10.836 6 10.5 6.336 10.5 6.75V12.75L10.5069 12.8517C10.5565 13.2177 10.8705 13.5 11.25 13.5H15.25L15.3517 13.4931C15.7177 13.4435 16 13.1295 16 12.75C16 12.336 15.664 12 15.25 12H12V6.75L11.9931 6.64827ZM3 15V14C3 12.6193 4.11929 11.5 5.5 11.5C6.88071 11.5 8 12.6193 8 14V15H8.5C9.32843 15 10 15.6716 10 16.5V21.5C10 22.3284 9.32843 23 8.5 23H2.5C1.67157 23 1 22.3284 1 21.5V16.5C1 15.6716 1.67157 15 2.5 15H3ZM4.5 14V15H6.5V14C6.5 13.4477 6.05228 13 5.5 13C4.94772 13 4.5 13.4477 4.5 14ZM6.5 19C6.5 18.4477 6.05228 18 5.5 18C4.94772 18 4.5 18.4477 4.5 19C4.5 19.5523 4.94772 20 5.5 20C6.05228 20 6.5 19.5523 6.5 19Z" 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_lock_24_regular.svg";Details
| Name | Clock Lock |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_clock_lock_24_regular.svg |
| Filled file | ic_fluent_clock_lock_24_filled.svg |
| React components | ClockLock24Regular, ClockLock24Filled |
| License | MIT (© Microsoft Corporation) |