跳到主要内容
网站首页

图标库

← IconPark
复写本

复写本

cc

图标库
IconPark
作者
ByteDance
许可
Apache 2.0 ↗

正在读取图标颜色…

使用场景

颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。

按钮内

输入框

搜索复写本...

导航

复写本

空状态

暂无内容

场景预览

桌面 / 浏览器 / 按钮 / 导航栏

手机桌面 · App 图标

9:41
复写本

浏览器 · 标签页与站点

fda711aaf4ea691b.example
复写本开始使用

操作按钮 · 主次层级

复写本了解更多

底部导航 · Tab 栏

复写本推荐收藏我的

UI 使用示例

真实组件上下文中的渲染效果，代码可直接复制。

导航项

导航菜单

导航菜单
html
<a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800">
  <!-- 内联 复写本 SVG -->
  <span>导航菜单</span>
</a>

主要按钮

立即开始

html
<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-neutral-100 dark:text-neutral-900">
  <!-- 内联 复写本 SVG -->
  立即开始
</button>

React 组件

内联引入

react
import { IconIcon } from './icons';

function Nav() {
  return <IconIcon className="size-4" />;
}

状态徽标

已完成

已完成
html
<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-700">
  <!-- 内联 复写本 SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索复写本…
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 复写本 SVG -->
  <input placeholder="搜索复写本…" class="w-full outline-none" />
</div>

功能卡片

功能名称

功能名称

功能的一句话说明。

html
<div class="rounded-xl border border-neutral-200 p-4">
  <span class="flex size-9 items-center justify-center rounded-lg bg-neutral-900 text-white">
    <!-- 内联 复写本 SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

为 复写本 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。

描画

线条从无到有依次绘出，适合线性图标

.icon-fda711aaf4ea691b { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

透明度往复渐变，适合状态提示图标

.icon-fda711aaf4ea691b { animation: svg-breathe 1.8s infinite; }

旋转

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

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

用法示例

复写本 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

复写本

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 复写本

24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。

24px

32px

48px

64px

96px

128px

下载 复写本 图标

SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。

按预览颜色导出px（16~1024）

复制 复写本 图标代码

Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。

svg
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g clip-rule="evenodd" fill-rule="evenodd"><path d="M19.2782 12.14C21.181 12.4802 22.9856 12.9636 24.6924 13.5899C21.8825 13.6074 19.0791 14.7782 17.0541 17.103L16.8557 17.338C14.0164 20.8063 13.8258 25.7793 16.2839 29.4497L16.2224 29.3375C18.7497 33.9805 23.0519 38.0543 27.499 39.3643C31.0799 40.4191 34.4305 40.6989 37.5178 40.1993L37.5447 40.1811C33.8191 43.092 29.3272 44.553 24.831 44.5656H24.7149L24.2838 44.56C18.9676 44.4356 13.6883 42.2862 9.70805 38.1144L9.37863 37.7609C5.80885 33.8395 4.01583 28.845 4 23.8458V23.7129L4.00633 23.2584C4.09466 19.6851 5.09141 16.1308 6.99642 12.986L6.9277 13.0052C11.431 11.7594 15.5469 11.4727 19.2782 12.14ZM29.8165 32.6328C31.3625 31.897 33.2256 32.2537 34.4485 33.4761L39.4604 38.4855L39.1209 38.8174C39.0934 38.8437 39.0659 38.8699 39.0383 38.8959C35.6475 39.8087 31.8914 39.663 27.7688 38.4486C24.7892 37.5709 22.2332 35.4184 19.9509 32.7704L19.9015 32.7431C22.9258 34.3813 26.604 34.377 29.6249 32.7305L29.8165 32.6328ZM24.7544 2.99994L25.1975 3.00471C30.3656 3.11518 35.5015 5.14197 39.4455 9.08599L34.4485 14.083L34.2924 14.2313C33.0178 15.3811 31.1429 15.6554 29.6249 14.8281L29.3639 14.6908C29.3141 14.6655 29.2642 14.6407 29.2142 14.6163C26.2909 12.9805 23.0341 11.8419 19.4463 11.2003C15.8761 10.5619 11.9853 10.7621 7.77611 11.797C8.35234 10.9768 8.99698 10.1901 9.70805 9.44472L10.0345 9.10999C14.0951 5.03678 19.4211 2.99994 24.7495 2.99994H24.7544Z"></path><path d="M41.549 17.3253L33.6594 21.8806L33.4435 22.0288C33.4435 22.0288 32.7681 22.4814 32.8427 23.4385C32.9079 24.2756 33.5043 24.6288 33.5043 24.6288L41.7348 29.3768C41.7348 29.3768 42.3796 29.7247 43.1811 29.2913C44.0774 28.8066 44.0162 27.8599 44.0162 27.8599V18.7503C44.0162 18.7503 44.0171 18.7404 44.0171 18.7227V18.698C44.0152 18.5127 43.9623 17.8792 43.3674 17.4409C43.02 17.185 42.6771 17.1049 42.3841 17.1049C41.8974 17.1054 41.549 17.3253 41.549 17.3253Z"></path></g></svg>

预览参数

调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 复写本 图标

复写本 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。

在本页点击「下载」即可保存 复写本 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

复写本 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 1.98 KB，viewBox 为 0 0 48 48，共 2 个矢量图元。

常见问题

复写本 图标是什么？

复写本 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载 复写本 图标？

在本页点击「下载 SVG」即可保存 复写本 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

复写本 图标可以商用吗？

复写本 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。

如何修改 复写本 图标的颜色？

在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。

SVG 健康报告

100/100

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

文件体积

1.98 KB

2,031 字节

viewBox

0 0 48 48

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

图元总数

2

<path> ×2

风格

单色轮廓

无显式填色，跟随容器 currentColor

图标信息摘要

复写本 是一个通用类别的单文件 SVG 矢量图标，文件体积 1.98 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 复写本的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。

继续探索

相关搜索

暂无推荐

复写本 在其他图标库

同名不同风格的版本，点击查看与下载

已显示全部 72 项

Command Palette

Search for a command to run...