diamond link icon
diamond-link-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- diamond-link-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- License
- MIT
11 other variants in Fluent UI System Icons
Related icons in Fluent UI System Icons
Use the diamond link icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.07 5.47a6.746 6.746 0 0 1 4.492 11.508l-.792.792a2.5 2.5 0 0 1-3.536 0l-6.003-6.003a2.5 2.5 0 0 1-.002-3.534l.793-.794a6.8 6.8 0 0 1 1.595-1.182a8 8 0 0 0-.147 1.265q-.391.277-.74.624l-.793.794a1.5 1.5 0 0 0 .001 2.12l6.003 6.002a1.5 1.5 0 0 0 2.121 0l.792-.79l.204-.215a5.746 5.746 0 0 0-4.407-9.59q.15-.518.418-.996m.164-3.242a2.5 2.5 0 0 1 3.534.002l6.002 6.003c.977.977.976 2.56 0 3.537l-.791.792a6.8 6.8 0 0 1-1.594 1.182a8 8 0 0 0 .147-1.267q.39-.275.74-.623l.791-.792a1.5 1.5 0 0 0 0-2.122L11.06 2.937a1.5 1.5 0 0 0-2.119 0l-.795.792a5.747 5.747 0 0 0 0 8.125a5.73 5.73 0 0 0 4.204 1.68c-.1.343-.24.678-.418.996A6.746 6.746 0 0 1 7.44 3.022z"/></svg>
React
import type { SVGProps } from "react";
export function FluentDiamondLink20Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.07 5.47a6.746 6.746 0 0 1 4.492 11.508l-.792.792a2.5 2.5 0 0 1-3.536 0l-6.003-6.003a2.5 2.5 0 0 1-.002-3.534l.793-.794a6.8 6.8 0 0 1 1.595-1.182a8 8 0 0 0-.147 1.265q-.391.277-.74.624l-.793.794a1.5 1.5 0 0 0 .001 2.12l6.003 6.002a1.5 1.5 0 0 0 2.121 0l.792-.79l.204-.215a5.746 5.746 0 0 0-4.407-9.59q.15-.518.418-.996m.164-3.242a2.5 2.5 0 0 1 3.534.002l6.002 6.003c.977.977.976 2.56 0 3.537l-.791.792a6.8 6.8 0 0 1-1.594 1.182a8 8 0 0 0 .147-1.267q.39-.275.74-.623l.791-.792a1.5 1.5 0 0 0 0-2.122L11.06 2.937a1.5 1.5 0 0 0-2.119 0l-.795.792a5.747 5.747 0 0 0 0 8.125a5.73 5.73 0 0 0 4.204 1.68c-.1.343-.24.678-.418.996A6.746 6.746 0 0 1 7.44 3.022z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.07 5.47a6.746 6.746 0 0 1 4.492 11.508l-.792.792a2.5 2.5 0 0 1-3.536 0l-6.003-6.003a2.5 2.5 0 0 1-.002-3.534l.793-.794a6.8 6.8 0 0 1 1.595-1.182a8 8 0 0 0-.147 1.265q-.391.277-.74.624l-.793.794a1.5 1.5 0 0 0 .001 2.12l6.003 6.002a1.5 1.5 0 0 0 2.121 0l.792-.79l.204-.215a5.746 5.746 0 0 0-4.407-9.59q.15-.518.418-.996m.164-3.242a2.5 2.5 0 0 1 3.534.002l6.002 6.003c.977.977.976 2.56 0 3.537l-.791.792a6.8 6.8 0 0 1-1.594 1.182a8 8 0 0 0 .147-1.267q.39-.275.74-.623l.791-.792a1.5 1.5 0 0 0 0-2.122L11.06 2.937a1.5 1.5 0 0 0-2.119 0l-.795.792a5.747 5.747 0 0 0 0 8.125a5.73 5.73 0 0 0 4.204 1.68c-.1.343-.24.678-.418.996A6.746 6.746 0 0 1 7.44 3.022z"/></svg> </template>
CSS
.icon-diamond-link-20-regular {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.07%205.47a6.746%206.746%200%200%201%204.492%2011.508l-.792.792a2.5%202.5%200%200%201-3.536%200l-6.003-6.003a2.5%202.5%200%200%201-.002-3.534l.793-.794a6.8%206.8%200%200%201%201.595-1.182a8%208%200%200%200-.147%201.265q-.391.277-.74.624l-.793.794a1.5%201.5%200%200%200%20.001%202.12l6.003%206.002a1.5%201.5%200%200%200%202.121%200l.792-.79l.204-.215a5.746%205.746%200%200%200-4.407-9.59q.15-.518.418-.996m.164-3.242a2.5%202.5%200%200%201%203.534.002l6.002%206.003c.977.977.976%202.56%200%203.537l-.791.792a6.8%206.8%200%200%201-1.594%201.182a8%208%200%200%200%20.147-1.267q.39-.275.74-.623l.791-.792a1.5%201.5%200%200%200%200-2.122L11.06%202.937a1.5%201.5%200%200%200-2.119%200l-.795.792a5.747%205.747%200%200%200%200%208.125a5.73%205.73%200%200%200%204.204%201.68c-.1.343-.24.678-.418.996A6.746%206.746%200%200%201%207.44%203.022z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.07%205.47a6.746%206.746%200%200%201%204.492%2011.508l-.792.792a2.5%202.5%200%200%201-3.536%200l-6.003-6.003a2.5%202.5%200%200%201-.002-3.534l.793-.794a6.8%206.8%200%200%201%201.595-1.182a8%208%200%200%200-.147%201.265q-.391.277-.74.624l-.793.794a1.5%201.5%200%200%200%20.001%202.12l6.003%206.002a1.5%201.5%200%200%200%202.121%200l.792-.79l.204-.215a5.746%205.746%200%200%200-4.407-9.59q.15-.518.418-.996m.164-3.242a2.5%202.5%200%200%201%203.534.002l6.002%206.003c.977.977.976%202.56%200%203.537l-.791.792a6.8%206.8%200%200%201-1.594%201.182a8%208%200%200%200%20.147-1.267q.39-.275.74-.623l.791-.792a1.5%201.5%200%200%200%200-2.122L11.06%202.937a1.5%201.5%200%200%200-2.119%200l-.795.792a5.747%205.747%200%200%200%200%208.125a5.73%205.73%200%200%200%204.204%201.68c-.1.343-.24.678-.418.996A6.746%206.746%200%200%201%207.44%203.022z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/diamond-link-20-regular.svg?color=%231a73e8&size=48
