Password icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.7802 10.2195C11.4872 9.92672 11.0124 9.92683 10.7195 10.2198C10.4267 10.5128 10.4268 10.9876 10.7198 11.2805L11.4395 11.9998L10.7197 12.7197C10.4268 13.0126 10.4268 13.4874 10.7197 13.7803C11.0126 14.0732 11.4874 14.0732 11.7803 13.7803L12.5004 13.0602L13.2198 13.7793C13.5128 14.0721 13.9876 14.072 14.2805 13.779C14.5733 13.4861 14.5732 13.0112 14.2802 12.7184L13.5611 11.9996L14.2803 11.2803C14.5732 10.9874 14.5732 10.5126 14.2803 10.2197C13.9874 9.92678 13.5126 9.92678 13.2197 10.2197L12.5002 10.9392L11.7802 10.2195ZM5.21954 10.2198C5.51237 9.92683 5.98724 9.92672 6.2802 10.2195L7.00017 10.9392L7.71967 10.2197C8.01256 9.92678 8.48743 9.92678 8.78033 10.2197C9.07322 10.5126 9.07322 10.9874 8.78033 11.2803L8.06108 11.9996L8.7802 12.7184C9.07317 13.0112 9.07328 13.4861 8.78046 13.779C8.48763 14.072 8.01276 14.0721 7.7198 13.7793L7.00042 13.0602L6.28033 13.7803C5.98744 14.0732 5.51256 14.0732 5.21967 13.7803C4.92678 13.4874 4.92678 13.0126 5.21967 12.7197L5.93951 11.9998L5.21979 11.2805C4.92683 10.9876 4.92672 10.5128 5.21954 10.2198ZM16.5 12.5C16.0858 12.5 15.75 12.8358 15.75 13.25C15.75 13.6642 16.0858 14 16.5 14H18.25C18.6642 14 19 13.6642 19 13.25C19 12.8358 18.6642 12.5 18.25 12.5H16.5ZM5.24923 5C3.454 5 2 6.45538 2 8.25V15.75C2 17.5449 3.45507 19 5.25 19H18.75C20.5449 19 22 17.5449 22 15.75V8.25C22 6.45538 20.546 5 18.7508 5H5.24923ZM3.5 8.25C3.5 7.2832 4.28303 6.5 5.24923 6.5H18.7508C19.717 6.5 20.5 7.2832 20.5 8.25V15.75C20.5 16.7165 19.7165 17.5 18.75 17.5H5.25C4.2835 17.5 3.5 16.7165 3.5 15.75V8.25Z" 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_24_regular.svg";

Details

Keywords

inputsecuritytype