Diamond Link icon

Use the Diamond Link 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 { DiamondLink24Regular, DiamondLink24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DiamondLink24Regular aria-label="Diamond Link" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_diamond_link_24_regular.svg" width="24" height="24" alt="Diamond Link">

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="M9.6289 6.32911C11.6621 6.40793 13.6723 7.22219 15.2246 8.77442C18.4949 12.0451 18.4951 17.3486 15.2246 20.6191L15.2236 20.6182L14.2969 21.5469C13.0278 22.8166 10.9686 22.8172 9.69921 21.5479L2.45214 14.2979C1.18283 13.0284 1.18241 10.9702 2.45214 9.70118L3.38085 8.77442C4.03638 8.11896 4.77449 7.59682 5.56054 7.20411C5.41849 7.82429 5.34074 8.45587 5.32617 9.08888C5.01617 9.30925 4.71935 9.55706 4.4414 9.83497L3.51269 10.7617C2.82894 11.445 2.8292 12.5537 3.51269 13.2373L10.7598 20.4863C11.4432 21.1697 12.552 21.1697 13.2353 20.4863L14.1641 19.5576C16.8485 16.8729 16.8485 12.5198 14.1641 9.83497C12.7472 8.41812 10.8654 7.74953 9.00976 7.82814C9.14419 7.30842 9.35004 6.80325 9.6289 6.32911ZM9.69824 2.45411C10.9672 1.18434 13.0264 1.18292 14.2959 2.45216L21.5439 9.70216C22.8127 10.9716 22.8123 13.0299 21.543 14.2988L20.6133 15.2266C19.9603 15.8795 19.225 16.3998 18.4424 16.792C18.5842 16.1715 18.6616 15.5396 18.6758 14.9063C18.9828 14.6873 19.2772 14.4415 19.5527 14.166L20.4824 13.2383C21.166 12.555 21.1658 11.4462 20.4824 10.7627L13.2353 3.51271C12.5519 2.82949 11.4431 2.83035 10.7598 3.51368L9.83007 4.44337C7.14543 7.12805 7.14576 11.4811 9.83007 14.166C11.249 15.585 13.1339 16.2528 14.9922 16.1719C14.8577 16.6919 14.6521 17.1975 14.373 17.6719C12.3371 17.5949 10.3238 16.7809 8.76953 15.2266C5.49943 11.9559 5.4991 6.65329 8.76953 3.38282L9.69824 2.45411Z" 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/diamond_link_24_regular.svg";

Details