Square Dovetail Joint icon

Use the Square Dovetail Joint 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 { SquareDovetailJoint24Regular, SquareDovetailJoint24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SquareDovetailJoint24Regular aria-label="Square Dovetail Joint" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_square_dovetail_joint_24_regular.svg" width="24" height="24" alt="Square Dovetail Joint">

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="M17.75 3H6.25C4.455 3 3 4.455 3 6.25V17.75C3 19.545 4.455 21 6.25 21H17.75C19.545 21 21 19.545 21 17.75V6.25C21 4.455 19.545 3 17.75 3ZM4.5 17.75V6.25C4.5 5.284 5.284 4.5 6.25 4.5H9V9.75C9 9.991 9.116 10.217 9.312 10.358C9.506 10.5 9.76 10.537 9.988 10.461L13.501 9.29V14.709L9.988 13.538C9.761 13.462 9.508 13.499 9.312 13.641C9.117 13.782 9 14.008 9 14.249V19.499H6.25C5.284 19.499 4.5 18.716 4.5 17.75ZM19.5 17.75C19.5 18.716 18.716 19.5 17.75 19.5H10.5V15.291L14.013 16.462C14.24 16.538 14.493 16.501 14.689 16.359C14.884 16.218 15.001 15.992 15.001 15.751V8.251C15.001 8.01 14.885 7.784 14.689 7.643C14.494 7.501 14.239 7.463 14.013 7.54L10.5 8.711V4.502H17.75C18.716 4.502 19.5 5.286 19.5 6.252V17.752V17.75Z" 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/square_dovetail_joint_24_regular.svg";

Details

Keywords

toolkittoolstooling