Lock Closed Ribbon icon

Use the Lock Closed Ribbon 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 { LockClosedRibbon24Regular, LockClosedRibbon24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LockClosedRibbon24Regular aria-label="Lock Closed Ribbon" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_lock_closed_ribbon_24_regular.svg" width="24" height="24" alt="Lock Closed Ribbon">

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="M21 22.2998C21 22.9234 20.2457 23.2359 19.8047 22.7949L18.5 21.4902L17.1953 22.7949C16.7543 23.2359 16 22.9234 16 22.2998V19.2422C16.715 19.7208 17.5749 20 18.5 20C19.4251 20 20.285 19.7208 21 19.2422V22.2998ZM12 1C14.7614 1 17 3.23858 17 6V8.00977C18.6781 8.13743 20 9.5392 20 11.25V11.2568C19.5308 11.091 19.026 11 18.5 11C18.4935 11 18.487 11 18.4805 11C18.3591 10.1521 17.6315 9.5 16.75 9.5H7.25C6.2835 9.5 5.5 10.2835 5.5 11.25V18.75C5.5 19.7165 6.2835 20.5 7.25 20.5H15V22H7.25C5.45507 22 4 20.5449 4 18.75V11.25C4 9.5392 5.3219 8.13743 7 8.00977V6C7 3.23858 9.23858 1 12 1ZM18.5 12C20.433 12 22 13.567 22 15.5C22 16.4536 21.6185 17.318 21 17.9492C20.3647 18.5975 19.4793 19 18.5 19C17.5207 19 16.6353 18.5975 16 17.9492C15.93 17.8778 15.8625 17.8038 15.7988 17.7266C15.2996 17.1216 15 16.3457 15 15.5C15 13.567 16.567 12 18.5 12ZM12 13.75C12.6904 13.75 13.25 14.3096 13.25 15C13.25 15.6904 12.6904 16.25 12 16.25C11.3096 16.25 10.75 15.6904 10.75 15C10.75 14.3096 11.3096 13.75 12 13.75ZM12 2.5C10.067 2.5 8.5 4.067 8.5 6V8H15.5V6C15.5 4.067 13.933 2.5 12 2.5Z" 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/lock_closed_ribbon_24_regular.svg";

Details