Diamond icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.71365 1.9622C10.9829 0.693405 13.0413 0.693166 14.3103 1.9622L22.0594 9.7122C23.3284 10.9813 23.3281 13.0387 22.0594 14.3079L14.3103 22.0579C13.0411 23.3271 10.9828 23.3271 9.71365 22.0579L1.96364 14.3079C0.694852 13.0388 0.694946 10.9814 1.96364 9.7122L9.71365 1.9622ZM13.2488 3.02274C12.5655 2.33959 11.4576 2.33977 10.7742 3.02274L3.02419 10.7728C2.34126 11.4561 2.34116 12.564 3.02419 13.2474L10.7742 20.9974C11.4575 21.6807 12.5654 21.6805 13.2488 20.9974L20.9988 13.2474C21.6818 12.5639 21.682 11.456 20.9988 10.7728L13.2488 3.02274Z" 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_24_regular.svg";

Details

Keywords

editshapecreate