unbuild SVG 图标

Q: unbuild 图标可以商用吗？

unjsunbuild

来自 UnJS Logos 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。

图标 ID: unjs:unbuild
中文名: —
所属集合: UnJS Logos
集合规模: 63 枚
基础网格: 32px
色彩: 多色
开源协议: Apache-2.0
作者: UnJS

下载 unbuild 图标

SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。

iOS / Android 全套尺寸 · 素材包生成器用 AI 生成类似风格的图标

PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。

unbuild 的预览与使用场景

切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

搜索unbuild…输入框 · 前缀图标

unbuild导航菜单 · 选中态

暂无内容空状态 · 引导提示

9:41

unbuild手机桌面 · App 图标

unbuildunjs.design/icons/unbuild浏览器 · 标签页与站点图标

各尺寸下的可读性

24px

32px

48px

64px

96px

128px

复制 unbuild 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。

svgSVG 源码（内联 HTML）

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g clip-path="url(#SVGkRCCwb7V)"><path fill="#dea66c" d="M15.635 1.21L2.595 7.932c-.285.168-.368.418-.365.78l.025.453l13.768 7.06l13.735-6.948s.015-.07.015-.315c0 0-.013-.322-.085-.472c-.08-.17-.25-.323-.36-.415a6.7 6.7 0 0 0-1.083-.738c-7.132-4.032-11.823-6.11-11.823-6.11c-.302-.112-.552-.152-.787-.017"/><path fill="#b38251" d="M2.435 24.04c.76.503 2.148 1.163 3.55 1.922c3.26 1.765 7.38 3.91 9.43 4.753c.278.115.443.17.635.18c.142.008.377-.087.377-.087l-.404-14.585c-.023-.77-.345-1.025-.63-1.21c-.446-.286-1.41-.73-1.41-.73s-3.38-1.68-6.755-3.45C5.623 9.99 4.268 9.128 2.81 8.418c-.267-.128-.582.032-.582.332V23.7c0 .143.087.262.207.34"/><path fill="#966239" d="M29.395 24.128L16.455 30.8a.312.312 0 0 1-.455-.277l.023-14.295c0-.138-.043-.44-.085-.56c-.118-.35.137-.49.252-.548l12.835-6.61a.513.513 0 0 1 .748.455v14.548a.69.69 0 0 1-.378.614"/><path fill="#212121" d="M23.615 11.898s-7.092 3.627-7.207 3.935c-.116.304 5.564-2.425 6.23-2.768c.752-.387 6.662-3.547 6.662-3.895c.002-.285-5.685 2.728-5.685 2.728" opacity=".5"/><g fill="#212121" opacity=".5"><path d="M3.203 23.213c.922.464 1.837.944 2.977 1.527v-.445c-1.135-.58-2.052-1.058-2.977-1.528zm1.942.202l.635.325l.005-1.937l-.63-.323c-.005.775-.007 1.16-.01 1.935m-1.615-.83l.58.297l.013-1.93c-.248-.127-.368-.187-.585-.302z"/><path d="m4.738 21.498l1.43.73c-.26-.473-.403-.713-.688-1.198c-.292.19-.445.282-.742.467m-1.535-.788c.442.23.74.383 1.325.682c-.29-.487-.435-.73-.703-1.207c-.272.198-.4.3-.622.525"/></g><g fill="#212121" opacity=".5"><path d="M7.953 25.35c.207.107.314.165.522.272c-.015-.92-.022-1.38-.04-2.3l-.5-.26z"/><path d="M7.19 25.188c.76.4 1.35.7 2.08 1.09c-.005-.263-.207-.58-.482-.728c-.43-.227-.675-.352-1.11-.58c-.28-.142-.488-.04-.488.218m1.447-2.598l.32.677c-.1.213-.152.32-.257.53l.225-.017c.12-.16.18-.24.295-.4c-.105-.247-.16-.372-.27-.62c.305.167.455.252.732.415c0 .895-.585 1.29-1.465.83c-.88-.457-1.462-1.48-1.462-2.377c.655.327 1.095.542 1.882.962"/></g><path fill="#ffe0b2" d="M25.185 10.373c-.125-.093-13.547-7.105-13.547-7.105L7.472 5.42l13.762 7.098l.008.007l4.027-2.062s-.008-.02-.03-.045z"/><path fill="#bf9f85" d="M25.25 10.433a102 102 0 0 0-4.015 2.085c.058.057.06.132.06.17l-.02.807c-.035 1.488-.055 2.978-.105 4.465c.167-.1.37.12.522 0c.235-.185.735-1 .81-1.025c.1-.032.208-.008.31-.012c.45-.025 1.458-.943 1.673-.985c.207-.04.893.092.893.092s-.048-4.538-.066-5.3c-.005-.27-.062-.298-.062-.298"/></g><defs><clipPath id="SVGkRCCwb7V"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></g></svg>

reactReact 组件（TSX）

export function UnbuildIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 32 32"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="none"><g clip-path="url(#SVGkRCCwb7V)"><path fill="#dea66c" d="M15.635 1.21L2.595 7.932c-.285.168-.368.418-.365.78l.025.453l13.768 7.06l13.735-6.948s.015-.07.015-.315c0 0-.013-.322-.085-.472c-.08-.17-.25-.323-.36-.415a6.7 6.7 0 0 0-1.083-.738c-7.132-4.032-11.823-6.11-11.823-6.11c-.302-.112-.552-.152-.787-.017"/><path fill="#b38251" d="M2.435 24.04c.76.503 2.148 1.163 3.55 1.922c3.26 1.765 7.38 3.91 9.43 4.753c.278.115.443.17.635.18c.142.008.377-.087.377-.087l-.404-14.585c-.023-.77-.345-1.025-.63-1.21c-.446-.286-1.41-.73-1.41-.73s-3.38-1.68-6.755-3.45C5.623 9.99 4.268 9.128 2.81 8.418c-.267-.128-.582.032-.582.332V23.7c0 .143.087.262.207.34"/><path fill="#966239" d="M29.395 24.128L16.455 30.8a.312.312 0 0 1-.455-.277l.023-14.295c0-.138-.043-.44-.085-.56c-.118-.35.137-.49.252-.548l12.835-6.61a.513.513 0 0 1 .748.455v14.548a.69.69 0 0 1-.378.614"/><path fill="#212121" d="M23.615 11.898s-7.092 3.627-7.207 3.935c-.116.304 5.564-2.425 6.23-2.768c.752-.387 6.662-3.547 6.662-3.895c.002-.285-5.685 2.728-5.685 2.728" opacity=".5"/><g fill="#212121" opacity=".5"><path d="M3.203 23.213c.922.464 1.837.944 2.977 1.527v-.445c-1.135-.58-2.052-1.058-2.977-1.528zm1.942.202l.635.325l.005-1.937l-.63-.323c-.005.775-.007 1.16-.01 1.935m-1.615-.83l.58.297l.013-1.93c-.248-.127-.368-.187-.585-.302z"/><path d="m4.738 21.498l1.43.73c-.26-.473-.403-.713-.688-1.198c-.292.19-.445.282-.742.467m-1.535-.788c.442.23.74.383 1.325.682c-.29-.487-.435-.73-.703-1.207c-.272.198-.4.3-.622.525"/></g><g fill="#212121" opacity=".5"><path d="M7.953 25.35c.207.107.314.165.522.272c-.015-.92-.022-1.38-.04-2.3l-.5-.26z"/><path d="M7.19 25.188c.76.4 1.35.7 2.08 1.09c-.005-.263-.207-.58-.482-.728c-.43-.227-.675-.352-1.11-.58c-.28-.142-.488-.04-.488.218m1.447-2.598l.32.677c-.1.213-.152.32-.257.53l.225-.017c.12-.16.18-.24.295-.4c-.105-.247-.16-.372-.27-.62c.305.167.455.252.732.415c0 .895-.585 1.29-1.465.83c-.88-.457-1.462-1.48-1.462-2.377c.655.327 1.095.542 1.882.962"/></g><path fill="#ffe0b2" d="M25.185 10.373c-.125-.093-13.547-7.105-13.547-7.105L7.472 5.42l13.762 7.098l.008.007l4.027-2.062s-.008-.02-.03-.045z"/><path fill="#bf9f85" d="M25.25 10.433a102 102 0 0 0-4.015 2.085c.058.057.06.132.06.17l-.02.807c-.035 1.488-.055 2.978-.105 4.465c.167-.1.37.12.522 0c.235-.185.735-1 .81-1.025c.1-.032.208-.008.31-.012c.45-.025 1.458-.943 1.673-.985c.207-.04.893.092.893.092s-.048-4.538-.066-5.3c-.005-.27-.062-.298-.062-.298"/></g><defs><clipPath id="SVGkRCCwb7V"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></g>` }}
    />
  );
}

vueVue 3 组件

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="none"><g clip-path="url(#SVGkRCCwb7V)"><path fill="#dea66c" d="M15.635 1.21L2.595 7.932c-.285.168-.368.418-.365.78l.025.453l13.768 7.06l13.735-6.948s.015-.07.015-.315c0 0-.013-.322-.085-.472c-.08-.17-.25-.323-.36-.415a6.7 6.7 0 0 0-1.083-.738c-7.132-4.032-11.823-6.11-11.823-6.11c-.302-.112-.552-.152-.787-.017"/><path fill="#b38251" d="M2.435 24.04c.76.503 2.148 1.163 3.55 1.922c3.26 1.765 7.38 3.91 9.43 4.753c.278.115.443.17.635.18c.142.008.377-.087.377-.087l-.404-14.585c-.023-.77-.345-1.025-.63-1.21c-.446-.286-1.41-.73-1.41-.73s-3.38-1.68-6.755-3.45C5.623 9.99 4.268 9.128 2.81 8.418c-.267-.128-.582.032-.582.332V23.7c0 .143.087.262.207.34"/><path fill="#966239" d="M29.395 24.128L16.455 30.8a.312.312 0 0 1-.455-.277l.023-14.295c0-.138-.043-.44-.085-.56c-.118-.35.137-.49.252-.548l12.835-6.61a.513.513 0 0 1 .748.455v14.548a.69.69 0 0 1-.378.614"/><path fill="#212121" d="M23.615 11.898s-7.092 3.627-7.207 3.935c-.116.304 5.564-2.425 6.23-2.768c.752-.387 6.662-3.547 6.662-3.895c.002-.285-5.685 2.728-5.685 2.728" opacity=".5"/><g fill="#212121" opacity=".5"><path d="M3.203 23.213c.922.464 1.837.944 2.977 1.527v-.445c-1.135-.58-2.052-1.058-2.977-1.528zm1.942.202l.635.325l.005-1.937l-.63-.323c-.005.775-.007 1.16-.01 1.935m-1.615-.83l.58.297l.013-1.93c-.248-.127-.368-.187-.585-.302z"/><path d="m4.738 21.498l1.43.73c-.26-.473-.403-.713-.688-1.198c-.292.19-.445.282-.742.467m-1.535-.788c.442.23.74.383 1.325.682c-.29-.487-.435-.73-.703-1.207c-.272.198-.4.3-.622.525"/></g><g fill="#212121" opacity=".5"><path d="M7.953 25.35c.207.107.314.165.522.272c-.015-.92-.022-1.38-.04-2.3l-.5-.26z"/><path d="M7.19 25.188c.76.4 1.35.7 2.08 1.09c-.005-.263-.207-.58-.482-.728c-.43-.227-.675-.352-1.11-.58c-.28-.142-.488-.04-.488.218m1.447-2.598l.32.677c-.1.213-.152.32-.257.53l.225-.017c.12-.16.18-.24.295-.4c-.105-.247-.16-.372-.27-.62c.305.167.455.252.732.415c0 .895-.585 1.29-1.465.83c-.88-.457-1.462-1.48-1.462-2.377c.655.327 1.095.542 1.882.962"/></g><path fill="#ffe0b2" d="M25.185 10.373c-.125-.093-13.547-7.105-13.547-7.105L7.472 5.42l13.762 7.098l.008.007l4.027-2.062s-.008-.02-.03-.045z"/><path fill="#bf9f85" d="M25.25 10.433a102 102 0 0 0-4.015 2.085c.058.057.06.132.06.17l-.02.807c-.035 1.488-.055 2.978-.105 4.465c.167-.1.37.12.522 0c.235-.185.735-1 .81-1.025c.1-.032.208-.008.31-.012c.45-.025 1.458-.943 1.673-.985c.207-.04.893.092.893.092s-.048-4.538-.066-5.3c-.005-.27-.062-.298-.062-.298"/></g><defs><clipPath id="SVGkRCCwb7V"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></g>`;
</script>

cssCSS mask（随 currentColor 改色）

.unbuild {
  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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGkRCCwb7V)%22%3E%3Cpath%20fill%3D%22%23dea66c%22%20d%3D%22M15.635%201.21L2.595%207.932c-.285.168-.368.418-.365.78l.025.453l13.768%207.06l13.735-6.948s.015-.07.015-.315c0%200-.013-.322-.085-.472c-.08-.17-.25-.323-.36-.415a6.7%206.7%200%200%200-1.083-.738c-7.132-4.032-11.823-6.11-11.823-6.11c-.302-.112-.552-.152-.787-.017%22%2F%3E%3Cpath%20fill%3D%22%23b38251%22%20d%3D%22M2.435%2024.04c.76.503%202.148%201.163%203.55%201.922c3.26%201.765%207.38%203.91%209.43%204.753c.278.115.443.17.635.18c.142.008.377-.087.377-.087l-.404-14.585c-.023-.77-.345-1.025-.63-1.21c-.446-.286-1.41-.73-1.41-.73s-3.38-1.68-6.755-3.45C5.623%209.99%204.268%209.128%202.81%208.418c-.267-.128-.582.032-.582.332V23.7c0%20.143.087.262.207.34%22%2F%3E%3Cpath%20fill%3D%22%23966239%22%20d%3D%22M29.395%2024.128L16.455%2030.8a.312.312%200%200%201-.455-.277l.023-14.295c0-.138-.043-.44-.085-.56c-.118-.35.137-.49.252-.548l12.835-6.61a.513.513%200%200%201%20.748.455v14.548a.69.69%200%200%201-.378.614%22%2F%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M23.615%2011.898s-7.092%203.627-7.207%203.935c-.116.304%205.564-2.425%206.23-2.768c.752-.387%206.662-3.547%206.662-3.895c.002-.285-5.685%202.728-5.685%202.728%22%20opacity%3D%22.5%22%2F%3E%3Cg%20fill%3D%22%23212121%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22M3.203%2023.213c.922.464%201.837.944%202.977%201.527v-.445c-1.135-.58-2.052-1.058-2.977-1.528zm1.942.202l.635.325l.005-1.937l-.63-.323c-.005.775-.007%201.16-.01%201.935m-1.615-.83l.58.297l.013-1.93c-.248-.127-.368-.187-.585-.302z%22%2F%3E%3Cpath%20d%3D%22m4.738%2021.498l1.43.73c-.26-.473-.403-.713-.688-1.198c-.292.19-.445.282-.742.467m-1.535-.788c.442.23.74.383%201.325.682c-.29-.487-.435-.73-.703-1.207c-.272.198-.4.3-.622.525%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23212121%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22M7.953%2025.35c.207.107.314.165.522.272c-.015-.92-.022-1.38-.04-2.3l-.5-.26z%22%2F%3E%3Cpath%20d%3D%22M7.19%2025.188c.76.4%201.35.7%202.08%201.09c-.005-.263-.207-.58-.482-.728c-.43-.227-.675-.352-1.11-.58c-.28-.142-.488-.04-.488.218m1.447-2.598l.32.677c-.1.213-.152.32-.257.53l.225-.017c.12-.16.18-.24.295-.4c-.105-.247-.16-.372-.27-.62c.305.167.455.252.732.415c0%20.895-.585%201.29-1.465.83c-.88-.457-1.462-1.48-1.462-2.377c.655.327%201.095.542%201.882.962%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23ffe0b2%22%20d%3D%22M25.185%2010.373c-.125-.093-13.547-7.105-13.547-7.105L7.472%205.42l13.762%207.098l.008.007l4.027-2.062s-.008-.02-.03-.045z%22%2F%3E%3Cpath%20fill%3D%22%23bf9f85%22%20d%3D%22M25.25%2010.433a102%20102%200%200%200-4.015%202.085c.058.057.06.132.06.17l-.02.807c-.035%201.488-.055%202.978-.105%204.465c.167-.1.37.12.522%200c.235-.185.735-1%20.81-1.025c.1-.032.208-.008.31-.012c.45-.025%201.458-.943%201.673-.985c.207-.04.893.092.893.092s-.048-4.538-.066-5.3c-.005-.27-.062-.298-.062-.298%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGkRCCwb7V%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h32v32H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23SVGkRCCwb7V)%22%3E%3Cpath%20fill%3D%22%23dea66c%22%20d%3D%22M15.635%201.21L2.595%207.932c-.285.168-.368.418-.365.78l.025.453l13.768%207.06l13.735-6.948s.015-.07.015-.315c0%200-.013-.322-.085-.472c-.08-.17-.25-.323-.36-.415a6.7%206.7%200%200%200-1.083-.738c-7.132-4.032-11.823-6.11-11.823-6.11c-.302-.112-.552-.152-.787-.017%22%2F%3E%3Cpath%20fill%3D%22%23b38251%22%20d%3D%22M2.435%2024.04c.76.503%202.148%201.163%203.55%201.922c3.26%201.765%207.38%203.91%209.43%204.753c.278.115.443.17.635.18c.142.008.377-.087.377-.087l-.404-14.585c-.023-.77-.345-1.025-.63-1.21c-.446-.286-1.41-.73-1.41-.73s-3.38-1.68-6.755-3.45C5.623%209.99%204.268%209.128%202.81%208.418c-.267-.128-.582.032-.582.332V23.7c0%20.143.087.262.207.34%22%2F%3E%3Cpath%20fill%3D%22%23966239%22%20d%3D%22M29.395%2024.128L16.455%2030.8a.312.312%200%200%201-.455-.277l.023-14.295c0-.138-.043-.44-.085-.56c-.118-.35.137-.49.252-.548l12.835-6.61a.513.513%200%200%201%20.748.455v14.548a.69.69%200%200%201-.378.614%22%2F%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M23.615%2011.898s-7.092%203.627-7.207%203.935c-.116.304%205.564-2.425%206.23-2.768c.752-.387%206.662-3.547%206.662-3.895c.002-.285-5.685%202.728-5.685%202.728%22%20opacity%3D%22.5%22%2F%3E%3Cg%20fill%3D%22%23212121%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22M3.203%2023.213c.922.464%201.837.944%202.977%201.527v-.445c-1.135-.58-2.052-1.058-2.977-1.528zm1.942.202l.635.325l.005-1.937l-.63-.323c-.005.775-.007%201.16-.01%201.935m-1.615-.83l.58.297l.013-1.93c-.248-.127-.368-.187-.585-.302z%22%2F%3E%3Cpath%20d%3D%22m4.738%2021.498l1.43.73c-.26-.473-.403-.713-.688-1.198c-.292.19-.445.282-.742.467m-1.535-.788c.442.23.74.383%201.325.682c-.29-.487-.435-.73-.703-1.207c-.272.198-.4.3-.622.525%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23212121%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22M7.953%2025.35c.207.107.314.165.522.272c-.015-.92-.022-1.38-.04-2.3l-.5-.26z%22%2F%3E%3Cpath%20d%3D%22M7.19%2025.188c.76.4%201.35.7%202.08%201.09c-.005-.263-.207-.58-.482-.728c-.43-.227-.675-.352-1.11-.58c-.28-.142-.488-.04-.488.218m1.447-2.598l.32.677c-.1.213-.152.32-.257.53l.225-.017c.12-.16.18-.24.295-.4c-.105-.247-.16-.372-.27-.62c.305.167.455.252.732.415c0%20.895-.585%201.29-1.465.83c-.88-.457-1.462-1.48-1.462-2.377c.655.327%201.095.542%201.882.962%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23ffe0b2%22%20d%3D%22M25.185%2010.373c-.125-.093-13.547-7.105-13.547-7.105L7.472%205.42l13.762%207.098l.008.007l4.027-2.062s-.008-.02-.03-.045z%22%2F%3E%3Cpath%20fill%3D%22%23bf9f85%22%20d%3D%22M25.25%2010.433a102%20102%200%200%200-4.015%202.085c.058.057.06.132.06.17l-.02.807c-.035%201.488-.055%202.978-.105%204.465c.167-.1.37.12.522%200c.235-.185.735-1%20.81-1.025c.1-.032.208-.008.31-.012c.45-.025%201.458-.943%201.673-.985c.207-.04.893.092.893.092s-.048-4.538-.066-5.3c-.005-.27-.062-.298-.062-.298%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22SVGkRCCwb7V%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h32v32H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 unbuild 加一点动效

单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。

呼吸

透明度往复渐变，适合状态提示与在线指示。

css呼吸动效样式

.icon-unbuild {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

旋转

匀速循环旋转，适合加载中场景。

css旋转动效样式

.icon-unbuild {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标，供工程侧评估引用方式。

文件体积

2.54 KB

2,602 字节

viewBox

0 0 32 32

矢量坐标系

图元总数

<path> ×11

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。文件体积 2.54 KB（2,602 字节），图元 11 个，风格为多色填充。

常见问题

关于 unbuild 图标的下载、商用与改色。

unbuild 图标是什么？▾

它是 UnJS Logos（unjs）开源图标集中的 unbuild 图标，多色填充，viewBox 为 0 0 32 32，文件仅 2.54 KB，矢量格式可无损缩放到任意尺寸。

如何下载 unbuild 图标？▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。

unbuild 图标可以商用吗？▾

如何修改 unbuild 图标的颜色？▾

在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。