Password Clock icon

Use the Password Clock 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 { PasswordClock24Regular, PasswordClock24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M18.5 13C20.9853 13 23 15.0147 23 17.5C23 19.9853 20.9853 22 18.5 22C16.0147 22 14 19.9853 14 17.5C14 15.0147 16.0147 13 18.5 13ZM18.5 15C18.2239 15 18 15.2239 18 15.5V17.5C18 17.7761 18.2239 18 18.5 18H20C20.2761 18 20.5 17.7761 20.5 17.5C20.5 17.2239 20.2761 17 20 17H19V15.5C19 15.2239 18.7761 15 18.5 15ZM18.751 5C20.5461 5.00011 22 6.45544 22 8.25V13.2568C21.5539 12.8885 21.0479 12.591 20.5 12.377V8.25C20.5 7.28327 19.7171 6.50011 18.751 6.5H5.24902C4.28292 6.50011 3.5 7.28327 3.5 8.25V15.75C3.5 16.7165 4.2835 17.5 5.25 17.5H13C13 18.0201 13.0731 18.5231 13.208 19H5.25C3.45507 19 2 17.5449 2 15.75V8.25C2 6.45544 3.45389 5.00011 5.24902 5H18.751ZM7.71973 10.2197C8.01262 9.92684 8.48738 9.92683 8.78027 10.2197C9.07316 10.5126 9.07316 10.9874 8.78027 11.2803L8.06152 12L8.78027 12.7188C9.07301 13.0116 9.07302 13.4864 8.78027 13.7793C8.48743 14.072 8.01261 14.072 7.71973 13.7793L7 13.0605L6.28027 13.7803C5.98738 14.0732 5.51262 14.0732 5.21973 13.7803C4.92683 13.4874 4.92683 13.0126 5.21973 12.7197L5.93945 12L5.21973 11.2803C4.92689 10.9874 4.92694 10.5126 5.21973 10.2197C5.51256 9.92689 5.98735 9.92694 6.28027 10.2197L7 10.9395L7.71973 10.2197ZM13.2197 10.2197C13.5126 9.92684 13.9874 9.92683 14.2803 10.2197C14.5732 10.5126 14.5732 10.9874 14.2803 11.2803L13.5615 12L14.2803 12.7188C14.573 13.0116 14.573 13.4864 14.2803 13.7793C13.9874 14.072 13.5126 14.072 13.2197 13.7793L12.5 13.0605L11.7803 13.7803C11.4874 14.0732 11.0126 14.0732 10.7197 13.7803C10.4268 13.4874 10.4268 13.0126 10.7197 12.7197L11.4395 12L10.7197 11.2803C10.4269 10.9874 10.4269 10.5126 10.7197 10.2197C11.0126 9.92689 11.4874 9.92694 11.7803 10.2197L12.5 10.9395L13.2197 10.2197Z" 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/password_clock_24_regular.svg";

Details

Keywords

inputsecuritytypeclocktime