Certificate Off icon

Use the Certificate Off 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 { CertificateOff24Regular, CertificateOff24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CertificateOff24Regular aria-label="Certificate Off" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_certificate_off_24_regular.svg" width="24" height="24" alt="Certificate Off">

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="M2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L16.9395 18H10.001V17C10.1208 16.8404 10.2316 16.6736 10.332 16.5H15.4395L3.83691 4.89747C3.62847 5.12067 3.50098 5.42044 3.50098 5.75001V9.66895C2.91563 10.0076 2.40526 10.4619 2.00098 11V5.75001C2.00098 5.00615 2.2973 4.33252 2.77734 3.83789L2.21973 3.28028C1.92685 2.98739 1.92687 2.51262 2.21973 2.21973ZM9 21.249L8.99316 21.3526C8.92039 21.8941 8.28819 22.1902 7.82031 21.8633L6.00098 20.5908L4.18066 21.8633L4.09082 21.918C3.60542 22.168 3.00125 21.8194 3.00098 21.249L3.00195 18.0029C3.83741 18.6299 4.87603 19.001 6.00098 19.001C7.1269 19.0009 8.16615 18.629 9.00195 18.001L9 21.249ZM6.00098 10C8.21032 10.0002 10.001 11.7916 10.001 14.001C10.0008 16.2102 8.21019 18.0008 6.00098 18.001C3.79161 18.001 2.00021 16.2103 2 14.001C2 11.7915 3.79148 10 6.00098 10ZM19.251 3C20.7698 3 22.001 4.23122 22.001 5.75001V15.25C22.001 16.2193 21.4978 17.0689 20.7402 17.5586L19.624 16.4424C20.132 16.2836 20.5009 15.8103 20.501 15.25V5.75001C20.501 5.05965 19.9413 4.5 19.251 4.5H7.68164L6.18164 3H19.251ZM17.251 7.00001C17.6652 7.00001 18.001 7.33579 18.001 7.75001C18.0009 8.16419 17.6652 8.50001 17.251 8.50001H11.6816L10.1816 7.00001H17.251Z" 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/certificate_off_24_regular.svg";

Details