keyline-iconslink-sharp-duotone
来自 Keyline Icons 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。
SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。
PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。
切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。
浅色背景
深色背景灰底融入继续按钮内 · 主操作搜索link-sharp-duotone…输入框 · 前缀图标link-sharp-duotone导航菜单 · 选中态暂无内容空状态 · 引导提示link-sharp-duotone
link
link-duotone
link-fill
link-sharp
link-sharp-fill
link-sharp-two-tone
link-two-tone
link-2
link-2-duotone
link-2-fill
link-2-sharp手机桌面 · App 图标link-sharp-duotonekeyline-icons.design/icons/link-sharp-duotone浏览器 · 标签页与站点图标24px32px48px64px96px128px内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"><path stroke-opacity=".4" d="M8.4812 18.1454L8.1883 18.4383C7.5084 19.1181 6.5864 19.5 5.625 19.5C4.6636 19.5 3.7416 19.1181 3.0617 18.4383C2.3819 17.7584 2 16.8364 2 15.875C2 14.9136 2.3819 13.9916 3.0617 13.3117L8.1867 8.1867C8.8666 7.5069 9.7886 7.125 10.75 7.125C11.7114 7.125 12.6334 7.5069 13.3133 8.1867C13.9931 8.8666 14.375 9.7886 14.375 10.75C14.375 11.7114 13.9931 12.6334 13.3133 13.3133L13.0204 13.6062"/><path d="M15.5188 5.8546L15.8117 5.5617C16.4916 4.8819 17.4136 4.5 18.375 4.5C19.3364 4.5 20.2584 4.8819 20.9383 5.5617C21.6181 6.2416 22 7.1636 22 8.125C22 9.0864 21.6181 10.0084 20.9383 10.6883L15.8133 15.8133C15.1334 16.4931 14.2114 16.875 13.25 16.875C12.2886 16.875 11.3666 16.4931 10.6867 15.8133C10.0069 15.1334 9.625 14.2114 9.625 13.25C9.625 12.2886 10.0069 11.3666 10.6867 10.6867L10.9796 10.3938"/></g></svg>export function LinkSharpDuotoneIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
dangerouslySetInnerHTML={{ __html: `<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"><path stroke-opacity=".4" d="M8.4812 18.1454L8.1883 18.4383C7.5084 19.1181 6.5864 19.5 5.625 19.5C4.6636 19.5 3.7416 19.1181 3.0617 18.4383C2.3819 17.7584 2 16.8364 2 15.875C2 14.9136 2.3819 13.9916 3.0617 13.3117L8.1867 8.1867C8.8666 7.5069 9.7886 7.125 10.75 7.125C11.7114 7.125 12.6334 7.5069 13.3133 8.1867C13.9931 8.8666 14.375 9.7886 14.375 10.75C14.375 11.7114 13.9931 12.6334 13.3133 13.3133L13.0204 13.6062"/><path d="M15.5188 5.8546L15.8117 5.5617C16.4916 4.8819 17.4136 4.5 18.375 4.5C19.3364 4.5 20.2584 4.8819 20.9383 5.5617C21.6181 6.2416 22 7.1636 22 8.125C22 9.0864 21.6181 10.0084 20.9383 10.6883L15.8133 15.8133C15.1334 16.4931 14.2114 16.875 13.25 16.875C12.2886 16.875 11.3666 16.4931 10.6867 15.8133C10.0069 15.1334 9.625 14.2114 9.625 13.25C9.625 12.2886 10.0069 11.3666 10.6867 10.6867L10.9796 10.3938"/></g>` }}
/>
);
}<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>
<script setup>
const body = `<g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"><path stroke-opacity=".4" d="M8.4812 18.1454L8.1883 18.4383C7.5084 19.1181 6.5864 19.5 5.625 19.5C4.6636 19.5 3.7416 19.1181 3.0617 18.4383C2.3819 17.7584 2 16.8364 2 15.875C2 14.9136 2.3819 13.9916 3.0617 13.3117L8.1867 8.1867C8.8666 7.5069 9.7886 7.125 10.75 7.125C11.7114 7.125 12.6334 7.5069 13.3133 8.1867C13.9931 8.8666 14.375 9.7886 14.375 10.75C14.375 11.7114 13.9931 12.6334 13.3133 13.3133L13.0204 13.6062"/><path d="M15.5188 5.8546L15.8117 5.5617C16.4916 4.8819 17.4136 4.5 18.375 4.5C19.3364 4.5 20.2584 4.8819 20.9383 5.5617C21.6181 6.2416 22 7.1636 22 8.125C22 9.0864 21.6181 10.0084 20.9383 10.6883L15.8133 15.8133C15.1334 16.4931 14.2114 16.875 13.25 16.875C12.2886 16.875 11.3666 16.4931 10.6867 15.8133C10.0069 15.1334 9.625 14.2114 9.625 13.25C9.625 12.2886 10.0069 11.3666 10.6867 10.6867L10.9796 10.3938"/></g>`;
</script>.link-sharp-duotone {
width: 1em;
height: 1em;
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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20stroke-opacity%3D%22.4%22%20d%3D%22M8.4812%2018.1454L8.1883%2018.4383C7.5084%2019.1181%206.5864%2019.5%205.625%2019.5C4.6636%2019.5%203.7416%2019.1181%203.0617%2018.4383C2.3819%2017.7584%202%2016.8364%202%2015.875C2%2014.9136%202.3819%2013.9916%203.0617%2013.3117L8.1867%208.1867C8.8666%207.5069%209.7886%207.125%2010.75%207.125C11.7114%207.125%2012.6334%207.5069%2013.3133%208.1867C13.9931%208.8666%2014.375%209.7886%2014.375%2010.75C14.375%2011.7114%2013.9931%2012.6334%2013.3133%2013.3133L13.0204%2013.6062%22%2F%3E%3Cpath%20d%3D%22M15.5188%205.8546L15.8117%205.5617C16.4916%204.8819%2017.4136%204.5%2018.375%204.5C19.3364%204.5%2020.2584%204.8819%2020.9383%205.5617C21.6181%206.2416%2022%207.1636%2022%208.125C22%209.0864%2021.6181%2010.0084%2020.9383%2010.6883L15.8133%2015.8133C15.1334%2016.4931%2014.2114%2016.875%2013.25%2016.875C12.2886%2016.875%2011.3666%2016.4931%2010.6867%2015.8133C10.0069%2015.1334%209.625%2014.2114%209.625%2013.25C9.625%2012.2886%2010.0069%2011.3666%2010.6867%2010.6867L10.9796%2010.3938%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20stroke-opacity%3D%22.4%22%20d%3D%22M8.4812%2018.1454L8.1883%2018.4383C7.5084%2019.1181%206.5864%2019.5%205.625%2019.5C4.6636%2019.5%203.7416%2019.1181%203.0617%2018.4383C2.3819%2017.7584%202%2016.8364%202%2015.875C2%2014.9136%202.3819%2013.9916%203.0617%2013.3117L8.1867%208.1867C8.8666%207.5069%209.7886%207.125%2010.75%207.125C11.7114%207.125%2012.6334%207.5069%2013.3133%208.1867C13.9931%208.8666%2014.375%209.7886%2014.375%2010.75C14.375%2011.7114%2013.9931%2012.6334%2013.3133%2013.3133L13.0204%2013.6062%22%2F%3E%3Cpath%20d%3D%22M15.5188%205.8546L15.8117%205.5617C16.4916%204.8819%2017.4136%204.5%2018.375%204.5C19.3364%204.5%2020.2584%204.8819%2020.9383%205.5617C21.6181%206.2416%2022%207.1636%2022%208.125C22%209.0864%2021.6181%2010.0084%2020.9383%2010.6883L15.8133%2015.8133C15.1334%2016.4931%2014.2114%2016.875%2013.25%2016.875C12.2886%2016.875%2011.3666%2016.4931%2010.6867%2015.8133C10.0069%2015.1334%209.625%2014.2114%209.625%2013.25C9.625%2012.2886%2010.0069%2011.3666%2010.6867%2010.6867L10.9796%2010.3938%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。
透明度往复渐变，适合状态提示与在线指示。
.icon-link-sharp-duotone {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}匀速循环旋转，适合加载中场景。
.icon-link-sharp-duotone {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}线条从无到有依次绘出，适合线性图标与首屏引导。
.icon-link-sharp-duotone path {
stroke-dasharray: 120;
animation: icon-draw 1.2s ease forwards;
}
@keyframes icon-draw {
from { stroke-dashoffset: 120; }
to { stroke-dashoffset: 0; }
}对源文件的客观技术指标，供工程侧评估引用方式。
文件体积
0.98 KB
1,000 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
2
<path> ×2
风格
单色轮廓（描边）
描边可随字号加粗
同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 0.98 KB（1,000 字节），图元 2 个，风格为单色轮廓（描边）。
关于 link-sharp-duotone 图标的下载、商用与改色。
它是 Keyline Icons（keyline-icons）开源图标集中的 link-sharp-duotone 图标，单色轮廓（描边），viewBox 为 0 0 24 24，文件仅 0.98 KB，矢量格式可无损缩放到任意尺寸。
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。
该图标采用 MIT（MIT） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。
