Tag Lock Accent icon

Use the Tag Lock Accent 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 { TagLockAccent24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tag_lock_accent_24_filled.svg" width="24" height="24" alt="Tag Lock Accent">

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.7504 2.50001C20.2144 2.50054 20.6592 2.68508 20.9873 3.01316C21.3154 3.34123 21.4999 3.78604 21.5004 4.25001V9.71201C21.5021 10.0728 21.4322 10.4304 21.2949 10.764C21.1576 11.0977 20.9555 11.4009 20.7004 11.656L20.366 11.9905C19.7328 11.0891 18.6852 10.5 17.5 10.5C15.567 10.5 14 12.067 14 14V14.05C12.8589 14.2817 12 15.2905 12 16.5V20.3374C11.5101 20.7387 10.8942 20.9607 10.2554 20.9607C9.52611 20.9607 8.82659 20.6713 8.31044 20.156L3.84244 15.705C3.58712 15.4497 3.38459 15.1467 3.24641 14.8131C3.10823 14.4796 3.03711 14.1221 3.03711 13.761C3.03711 13.4 3.10823 13.0425 3.24641 12.7089C3.38459 12.3753 3.58712 12.0723 3.84244 11.817L12.3424 3.30701C12.5967 3.05053 12.8994 2.84712 13.233 2.70858C13.5665 2.57005 13.9243 2.49915 14.2854 2.50001H19.7504Z" 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_accent_24_filled.svg";

Details

Keywords

priceinformationdetailmetadatapurchasesort