跳到主要内容
网站首页

图标库

← IconPark
新建 · 电子签

新建 · 电子签

new-dianziqian

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

正在读取图标颜色…

使用场景

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

按钮内

输入框

搜索新建 · 电子签...

导航

新建 · 电子签

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41
新建 · 电子签

浏览器 · 标签页与站点

d9822727677fdd47.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-d9822727677fdd47 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

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

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

旋转

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

.icon-d9822727677fdd47 { 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 fill="none"><path d="M31 20V27L10 39L4 35V13L10 9L24 17L17.5 20.5L10 16V32L31 20Z" fill="#2f88ff"></path><path d="M31 27L31.9923 28.7365C32.6154 28.3804 33 27.7177 33 27H31ZM31 20H33V16.5536L30.0077 18.2635L31 20ZM10 32H8C8 32.7129 8.37952 33.372 8.99615 33.7298C9.61278 34.0877 10.3733 34.0902 10.9923 33.7365L10 32ZM10 16L11.029 14.285C10.4111 13.9143 9.64162 13.9046 9.0146 14.2596C8.38759 14.6146 8 15.2795 8 16H10ZM17.5 20.5L16.471 22.215C17.0759 22.5779 17.8271 22.5954 18.4482 22.2609L17.5 20.5ZM24 17L24.9482 18.7609C25.5881 18.4164 25.9907 17.7519 25.9998 17.0252C26.009 16.2985 25.6233 15.6241 24.9923 15.2635L24 17ZM10 9L10.9923 7.26351C10.3345 6.88767 9.52091 6.91569 8.8906 7.3359L10 9ZM4 13L2.8906 11.3359C2.3342 11.7068 2 12.3313 2 13H4ZM4 35H2C2 35.6687 2.3342 36.2932 2.8906 36.6641L4 35ZM10 39L8.8906 40.6641C9.52091 41.0843 10.3345 41.1123 10.9923 40.7365L10 39ZM33 27V20H29V27H33ZM30.0077 18.2635L9.00772 30.2635L10.9923 33.7365L31.9923 21.7365L30.0077 18.2635ZM12 32V16H8V32H12ZM8.97101 17.715L16.471 22.215L18.529 18.785L11.029 14.285L8.97101 17.715ZM18.4482 22.2609L24.9482 18.7609L23.0518 15.2391L16.5518 18.7391L18.4482 22.2609ZM24.9923 15.2635L10.9923 7.26351L9.00772 10.7365L23.0077 18.7365L24.9923 15.2635ZM8.8906 7.3359L2.8906 11.3359L5.1094 14.6641L11.1094 10.6641L8.8906 7.3359ZM2 13V35H6V13H2ZM2.8906 36.6641L8.8906 40.6641L11.1094 37.3359L5.1094 33.3359L2.8906 36.6641ZM10.9923 40.7365L31.9923 28.7365L30.0077 25.2635L9.00772 37.2635L10.9923 40.7365Z" fill="#2f88ff"></path><path d="M17 28V21L38 9L44 13V35L38 39L24 31L30.5 27.5L38 32V16L17 28Z" fill="#2f88ff"></path><path d="M17 21L16.0077 19.2635C15.3846 19.6196 15 20.2823 15 21H17ZM17 28H15V31.4464L17.9923 29.7365L17 28ZM38 16H40C40 15.2871 39.6205 14.628 39.0039 14.2702C38.3872 13.9123 37.6267 13.9098 37.0077 14.2635L38 16ZM38 32L36.971 33.715C37.5889 34.0857 38.3584 34.0954 38.9854 33.7404C39.6124 33.3854 40 32.7205 40 32H38ZM30.5 27.5L31.529 25.785C30.9241 25.4221 30.1729 25.4046 29.5518 25.7391L30.5 27.5ZM24 31L23.0518 29.2391C22.4119 29.5836 22.0093 30.2481 22.0002 30.9748C21.991 31.7015 22.3767 32.3759 23.0077 32.7365L24 31ZM38 39L37.0077 40.7365C37.6655 41.1123 38.4791 41.0843 39.1094 40.6641L38 39ZM44 35L45.1094 36.6641C45.6658 36.2932 46 35.6687 46 35H44ZM44 13H46C46 12.3313 45.6658 11
…

预览参数

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

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 新建 · 电子签 图标

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

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

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

常见问题

新建 · 电子签 图标是什么？

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

如何下载 新建 · 电子签 图标？

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

新建 · 电子签 图标可以商用吗？

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

如何修改 新建 · 电子签 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

3.09 KB

3,166 字节

viewBox

0 0 48 48

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

图元总数

4

<path> ×4

风格

双色

2 种品牌色 · 纯填充

提取色值#2f88ff#000000

同色系图标

品牌色 #2f88ff 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。

#e5f0ff#c2dcff#85b9ff#3d90ff#0069f5#2f88ff#0063e7#0048a9
新建 · 电子签 品牌色详表
色值RGBHSLCMYK色名
47, 136, 255214°, 100%, 59%82, 47, 0, 0品牌主色 · 湛蓝色
194, 220, 255214°, 100%, 88%24, 14, 0, 0浅灰色
133, 185, 255214°, 100%, 76%48, 27, 0, 0天蓝色
61, 144, 255214°, 100%, 62%76, 44, 0, 0湛蓝色

图标信息摘要

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

继续探索

相关搜索

暂无推荐

新建 · 电子签 在其他图标库

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

Command Palette

Search for a command to run...