下载 bus-bold-duotone 图标
SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。
PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。
bus-bold-duotone 的预览与使用场景
切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。
在真实界面里长这样
各尺寸下的可读性
复制 bus-bold-duotone 图标代码
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path fill-rule="evenodd" d="M5.17157 3.17157C6.34315 2 8.22876 2 12 2C15.7712 2 17.6569 2 18.8284 3.17157C19.8915 4.23467 19.99 5.8857 19.9991 9L20 13C19.9909 16.1143 19.8915 17.7653 18.8284 18.8284C18.5862 19.0706 18.3136 19.2627 18 19.4151C17.1771 19.8151 16.0728 19.9415 14.5 19.9815C13.7729 19.9999 12.9458 20 12 20C11.0542 20 10.2271 20 9.5 19.9815C7.9272 19.9415 6.82289 19.815 6 19.415C5.68645 19.2626 5.41375 19.0706 5.17157 18.8284C4.10848 17.7653 4.00911 16.1143 4 13L4.00093 9C4.01004 5.8857 4.10848 4.23467 5.17157 3.17157Z" clip-rule="evenodd" opacity=".5"/><path d="M6 19.415C6.82289 19.815 7.9272 19.9415 9.5 19.9814V21C9.49996 21.5523 9.05226 22 8.5 22H7C6.44774 22 6.00004 21.5523 6 21V19.415Z"/><path d="M18 21C18 21.5523 17.5523 22 17 22H15.5C14.9477 22 14.5 21.5523 14.5 21V19.9814C16.0728 19.9415 17.1771 19.815 18 19.415V21Z"/><path d="M8.5 15.25C8.91421 15.25 9.25 15.5858 9.25 16C9.25 16.4142 8.91421 16.75 8.5 16.75H7C6.58579 16.75 6.25 16.4142 6.25 16C6.25 15.5858 6.58579 15.25 7 15.25H8.5Z"/><path d="M17 15.25C17.4142 15.25 17.75 15.5858 17.75 16C17.75 16.4142 17.4142 16.75 17 16.75H15.5C15.0858 16.75 14.75 16.4142 14.75 16C14.75 15.5858 15.0858 15.25 15.5 15.25H17Z"/><path d="M4 13L2.40039 11.7998C2.14858 11.611 2 11.3148 2 11V10C2 9.44772 2.44772 9 3 9H4.00098L4 13Z"/><path d="M21 9C21.5523 9.00002 22 9.44773 22 10V11C22 11.3148 21.8514 11.611 21.5996 11.7998L20 13L19.999 9H21Z"/><path d="M15.5 4C16.9142 4 17.6212 4.00011 18.0605 4.43945C18.4999 4.87879 18.5 5.5858 18.5 7V9.5C18.5 10.9142 18.4999 11.6212 18.0605 12.0605C17.6212 12.4999 16.9142 12.5 15.5 12.5H8.5C7.08579 12.5 6.37879 12.4999 5.93945 12.0605C5.50011 11.6212 5.5 10.9142 5.5 9.5V7C5.5 5.58579 5.50011 4.87879 5.93945 4.43945C6.37879 4.00011 7.08579 4 8.5 4H15.5Z"/></g></svg>export function BusBoldDuotoneIcon(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="currentColor"><path fill-rule="evenodd" d="M5.17157 3.17157C6.34315 2 8.22876 2 12 2C15.7712 2 17.6569 2 18.8284 3.17157C19.8915 4.23467 19.99 5.8857 19.9991 9L20 13C19.9909 16.1143 19.8915 17.7653 18.8284 18.8284C18.5862 19.0706 18.3136 19.2627 18 19.4151C17.1771 19.8151 16.0728 19.9415 14.5 19.9815C13.7729 19.9999 12.9458 20 12 20C11.0542 20 10.2271 20 9.5 19.9815C7.9272 19.9415 6.82289 19.815 6 19.415C5.68645 19.2626 5.41375 19.0706 5.17157 18.8284C4.10848 17.7653 4.00911 16.1143 4 13L4.00093 9C4.01004 5.8857 4.10848 4.23467 5.17157 3.17157Z" clip-rule="evenodd" opacity=".5"/><path d="M6 19.415C6.82289 19.815 7.9272 19.9415 9.5 19.9814V21C9.49996 21.5523 9.05226 22 8.5 22H7C6.44774 22 6.00004 21.5523 6 21V19.415Z"/><path d="M18 21C18 21.5523 17.5523 22 17 22H15.5C14.9477 22 14.5 21.5523 14.5 21V19.9814C16.0728 19.9415 17.1771 19.815 18 19.415V21Z"/><path d="M8.5 15.25C8.91421 15.25 9.25 15.5858 9.25 16C9.25 16.4142 8.91421 16.75 8.5 16.75H7C6.58579 16.75 6.25 16.4142 6.25 16C6.25 15.5858 6.58579 15.25 7 15.25H8.5Z"/><path d="M17 15.25C17.4142 15.25 17.75 15.5858 17.75 16C17.75 16.4142 17.4142 16.75 17 16.75H15.5C15.0858 16.75 14.75 16.4142 14.75 16C14.75 15.5858 15.0858 15.25 15.5 15.25H17Z"/><path d="M4 13L2.40039 11.7998C2.14858 11.611 2 11.3148 2 11V10C2 9.44772 2.44772 9 3 9H4.00098L4 13Z"/><path d="M21 9C21.5523 9.00002 22 9.44773 22 10V11C22 11.3148 21.8514 11.611 21.5996 11.7998L20 13L19.999 9H21Z"/><path d="M15.5 4C16.9142 4 17.6212 4.00011 18.0605 4.43945C18.4999 4.87879 18.5 5.5858 18.5 7V9.5C18.5 10.9142 18.4999 11.6212 18.0605 12.0605C17.6212 12.4999 16.9142 12.5 15.5 12.5H8.5C7.08579 12.5 6.37879 12.4999 5.93945 12.0605C5.50011 11.6212 5.5 10.9142 5.5 9.5V7C5.5 5.58579 5.50011 4.87879 5.93945 4.43945C6.37879 4.00011 7.08579 4 8.5 4H15.5Z"/></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="currentColor"><path fill-rule="evenodd" d="M5.17157 3.17157C6.34315 2 8.22876 2 12 2C15.7712 2 17.6569 2 18.8284 3.17157C19.8915 4.23467 19.99 5.8857 19.9991 9L20 13C19.9909 16.1143 19.8915 17.7653 18.8284 18.8284C18.5862 19.0706 18.3136 19.2627 18 19.4151C17.1771 19.8151 16.0728 19.9415 14.5 19.9815C13.7729 19.9999 12.9458 20 12 20C11.0542 20 10.2271 20 9.5 19.9815C7.9272 19.9415 6.82289 19.815 6 19.415C5.68645 19.2626 5.41375 19.0706 5.17157 18.8284C4.10848 17.7653 4.00911 16.1143 4 13L4.00093 9C4.01004 5.8857 4.10848 4.23467 5.17157 3.17157Z" clip-rule="evenodd" opacity=".5"/><path d="M6 19.415C6.82289 19.815 7.9272 19.9415 9.5 19.9814V21C9.49996 21.5523 9.05226 22 8.5 22H7C6.44774 22 6.00004 21.5523 6 21V19.415Z"/><path d="M18 21C18 21.5523 17.5523 22 17 22H15.5C14.9477 22 14.5 21.5523 14.5 21V19.9814C16.0728 19.9415 17.1771 19.815 18 19.415V21Z"/><path d="M8.5 15.25C8.91421 15.25 9.25 15.5858 9.25 16C9.25 16.4142 8.91421 16.75 8.5 16.75H7C6.58579 16.75 6.25 16.4142 6.25 16C6.25 15.5858 6.58579 15.25 7 15.25H8.5Z"/><path d="M17 15.25C17.4142 15.25 17.75 15.5858 17.75 16C17.75 16.4142 17.4142 16.75 17 16.75H15.5C15.0858 16.75 14.75 16.4142 14.75 16C14.75 15.5858 15.0858 15.25 15.5 15.25H17Z"/><path d="M4 13L2.40039 11.7998C2.14858 11.611 2 11.3148 2 11V10C2 9.44772 2.44772 9 3 9H4.00098L4 13Z"/><path d="M21 9C21.5523 9.00002 22 9.44773 22 10V11C22 11.3148 21.8514 11.611 21.5996 11.7998L20 13L19.999 9H21Z"/><path d="M15.5 4C16.9142 4 17.6212 4.00011 18.0605 4.43945C18.4999 4.87879 18.5 5.5858 18.5 7V9.5C18.5 10.9142 18.4999 11.6212 18.0605 12.0605C17.6212 12.4999 16.9142 12.5 15.5 12.5H8.5C7.08579 12.5 6.37879 12.4999 5.93945 12.0605C5.50011 11.6212 5.5 10.9142 5.5 9.5V7C5.5 5.58579 5.50011 4.87879 5.93945 4.43945C6.37879 4.00011 7.08579 4 8.5 4H15.5Z"/></g>`;
</script>.bus-bold-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%22currentColor%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.17157%203.17157C6.34315%202%208.22876%202%2012%202C15.7712%202%2017.6569%202%2018.8284%203.17157C19.8915%204.23467%2019.99%205.8857%2019.9991%209L20%2013C19.9909%2016.1143%2019.8915%2017.7653%2018.8284%2018.8284C18.5862%2019.0706%2018.3136%2019.2627%2018%2019.4151C17.1771%2019.8151%2016.0728%2019.9415%2014.5%2019.9815C13.7729%2019.9999%2012.9458%2020%2012%2020C11.0542%2020%2010.2271%2020%209.5%2019.9815C7.9272%2019.9415%206.82289%2019.815%206%2019.415C5.68645%2019.2626%205.41375%2019.0706%205.17157%2018.8284C4.10848%2017.7653%204.00911%2016.1143%204%2013L4.00093%209C4.01004%205.8857%204.10848%204.23467%205.17157%203.17157Z%22%20clip-rule%3D%22evenodd%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M6%2019.415C6.82289%2019.815%207.9272%2019.9415%209.5%2019.9814V21C9.49996%2021.5523%209.05226%2022%208.5%2022H7C6.44774%2022%206.00004%2021.5523%206%2021V19.415Z%22%2F%3E%3Cpath%20d%3D%22M18%2021C18%2021.5523%2017.5523%2022%2017%2022H15.5C14.9477%2022%2014.5%2021.5523%2014.5%2021V19.9814C16.0728%2019.9415%2017.1771%2019.815%2018%2019.415V21Z%22%2F%3E%3Cpath%20d%3D%22M8.5%2015.25C8.91421%2015.25%209.25%2015.5858%209.25%2016C9.25%2016.4142%208.91421%2016.75%208.5%2016.75H7C6.58579%2016.75%206.25%2016.4142%206.25%2016C6.25%2015.5858%206.58579%2015.25%207%2015.25H8.5Z%22%2F%3E%3Cpath%20d%3D%22M17%2015.25C17.4142%2015.25%2017.75%2015.5858%2017.75%2016C17.75%2016.4142%2017.4142%2016.75%2017%2016.75H15.5C15.0858%2016.75%2014.75%2016.4142%2014.75%2016C14.75%2015.5858%2015.0858%2015.25%2015.5%2015.25H17Z%22%2F%3E%3Cpath%20d%3D%22M4%2013L2.40039%2011.7998C2.14858%2011.611%202%2011.3148%202%2011V10C2%209.44772%202.44772%209%203%209H4.00098L4%2013Z%22%2F%3E%3Cpath%20d%3D%22M21%209C21.5523%209.00002%2022%209.44773%2022%2010V11C22%2011.3148%2021.8514%2011.611%2021.5996%2011.7998L20%2013L19.999%209H21Z%22%2F%3E%3Cpath%20d%3D%22M15.5%204C16.9142%204%2017.6212%204.00011%2018.0605%204.43945C18.4999%204.87879%2018.5%205.5858%2018.5%207V9.5C18.5%2010.9142%2018.4999%2011.6212%2018.0605%2012.0605C17.6212%2012.4999%2016.9142%2012.5%2015.5%2012.5H8.5C7.08579%2012.5%206.37879%2012.4999%205.93945%2012.0605C5.50011%2011.6212%205.5%2010.9142%205.5%209.5V7C5.5%205.58579%205.50011%204.87879%205.93945%204.43945C6.37879%204.00011%207.08579%204%208.5%204H15.5Z%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%22currentColor%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.17157%203.17157C6.34315%202%208.22876%202%2012%202C15.7712%202%2017.6569%202%2018.8284%203.17157C19.8915%204.23467%2019.99%205.8857%2019.9991%209L20%2013C19.9909%2016.1143%2019.8915%2017.7653%2018.8284%2018.8284C18.5862%2019.0706%2018.3136%2019.2627%2018%2019.4151C17.1771%2019.8151%2016.0728%2019.9415%2014.5%2019.9815C13.7729%2019.9999%2012.9458%2020%2012%2020C11.0542%2020%2010.2271%2020%209.5%2019.9815C7.9272%2019.9415%206.82289%2019.815%206%2019.415C5.68645%2019.2626%205.41375%2019.0706%205.17157%2018.8284C4.10848%2017.7653%204.00911%2016.1143%204%2013L4.00093%209C4.01004%205.8857%204.10848%204.23467%205.17157%203.17157Z%22%20clip-rule%3D%22evenodd%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M6%2019.415C6.82289%2019.815%207.9272%2019.9415%209.5%2019.9814V21C9.49996%2021.5523%209.05226%2022%208.5%2022H7C6.44774%2022%206.00004%2021.5523%206%2021V19.415Z%22%2F%3E%3Cpath%20d%3D%22M18%2021C18%2021.5523%2017.5523%2022%2017%2022H15.5C14.9477%2022%2014.5%2021.5523%2014.5%2021V19.9814C16.0728%2019.9415%2017.1771%2019.815%2018%2019.415V21Z%22%2F%3E%3Cpath%20d%3D%22M8.5%2015.25C8.91421%2015.25%209.25%2015.5858%209.25%2016C9.25%2016.4142%208.91421%2016.75%208.5%2016.75H7C6.58579%2016.75%206.25%2016.4142%206.25%2016C6.25%2015.5858%206.58579%2015.25%207%2015.25H8.5Z%22%2F%3E%3Cpath%20d%3D%22M17%2015.25C17.4142%2015.25%2017.75%2015.5858%2017.75%2016C17.75%2016.4142%2017.4142%2016.75%2017%2016.75H15.5C15.0858%2016.75%2014.75%2016.4142%2014.75%2016C14.75%2015.5858%2015.0858%2015.25%2015.5%2015.25H17Z%22%2F%3E%3Cpath%20d%3D%22M4%2013L2.40039%2011.7998C2.14858%2011.611%202%2011.3148%202%2011V10C2%209.44772%202.44772%209%203%209H4.00098L4%2013Z%22%2F%3E%3Cpath%20d%3D%22M21%209C21.5523%209.00002%2022%209.44773%2022%2010V11C22%2011.3148%2021.8514%2011.611%2021.5996%2011.7998L20%2013L19.999%209H21Z%22%2F%3E%3Cpath%20d%3D%22M15.5%204C16.9142%204%2017.6212%204.00011%2018.0605%204.43945C18.4999%204.87879%2018.5%205.5858%2018.5%207V9.5C18.5%2010.9142%2018.4999%2011.6212%2018.0605%2012.0605C17.6212%2012.4999%2016.9142%2012.5%2015.5%2012.5H8.5C7.08579%2012.5%206.37879%2012.4999%205.93945%2012.0605C5.50011%2011.6212%205.5%2010.9142%205.5%209.5V7C5.5%205.58579%205.50011%204.87879%205.93945%204.43945C6.37879%204.00011%207.08579%204%208.5%204H15.5Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}给 bus-bold-duotone 加一点动效
单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
呼吸
透明度往复渐变,适合状态提示与在线指示。
.icon-bus-bold-duotone {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}旋转
匀速循环旋转,适合加载中场景。
.icon-bus-bold-duotone {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}SVG 健康报告
对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
1.85 KB
1,890 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
8
<path> ×8
风格
单色(跟随 currentColor)
填充跟随容器颜色
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 1.85 KB(1,890 字节),图元 8 个,风格为单色(跟随 currentColor)。
常见问题
关于 bus-bold-duotone 图标的下载、商用与改色。
bus-bold-duotone 图标是什么?▾
它是 Solar(solar)开源图标集中的 bus-bold-duotone 图标,单色(跟随 currentColor),viewBox 为 0 0 24 24,文件仅 1.85 KB,矢量格式可无损缩放到任意尺寸。
如何下载 bus-bold-duotone 图标?▾
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
bus-bold-duotone 图标可以商用吗?▾
该图标采用 CC BY 4.0(CC-BY-4.0) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
如何修改 bus-bold-duotone 图标的颜色?▾
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。