Tag Lock icon

Use the Tag 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 { TagLock24Regular, TagLock24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TagLock24Regular aria-label="Tag Lock" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tag_lock_24_regular.svg" width="24" height="24" alt="Tag 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="M19.7498 2C20.9925 2 21.9998 3.00736 21.9998 4.25V9.71196C21.9998 10.5738 21.6575 11.4003 21.0482 12.0098L20.6285 12.4295C20.3992 11.9735 20.0731 11.5745 19.6772 11.2596L19.9874 10.9492C20.3155 10.6211 20.4998 10.176 20.4998 9.71196V4.25C20.4998 3.83579 20.164 3.5 19.7498 3.5H14.2845C13.82 3.5 13.3745 3.68467 13.0463 4.01333L4.53412 12.5358C3.86389 13.2207 3.86898 14.3191 4.54884 14.9977L9.01006 19.4522C9.69493 20.1345 10.8033 20.134 11.487 19.4518L11.9998 18.9388V20.953C10.7422 21.7574 9.05207 21.6114 7.95079 20.5143L3.48909 16.0592C2.21862 14.7913 2.21699 12.7334 3.48531 11.4632L11.985 2.95334C12.5946 2.34297 13.4218 2 14.2845 2H19.7498ZM16.9998 5.50218C17.8282 5.50218 18.4998 6.17374 18.4998 7.00216C18.4998 7.83057 17.8282 8.50213 16.9998 8.50213C16.1714 8.50213 15.4998 7.83057 15.4998 7.00216C15.4998 6.17374 16.1714 5.50218 16.9998 5.50218ZM15 15H14.5C13.6716 15 13 15.6716 13 16.5V21.5C13 22.3284 13.6716 23 14.5 23H20.5C21.3284 23 22 22.3284 22 21.5V16.5C22 15.6716 21.3284 15 20.5 15H20V14C20 12.6193 18.8807 11.5 17.5 11.5C16.1193 11.5 15 12.6193 15 14V15ZM16.5 14C16.5 13.4477 16.9477 13 17.5 13C18.0523 13 18.5 13.4477 18.5 14V15H16.5V14ZM18.5 19C18.5 19.5523 18.0523 20 17.5 20C16.9477 20 16.5 19.5523 16.5 19C16.5 18.4477 16.9477 18 17.5 18C18.0523 18 18.5 18.4477 18.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/tag_lock_24_regular.svg";

Details

Keywords

priceinformationdetailmetadatapurchasesort