SVG 图标

Wero

还没有评分，抢首评

金融银行

标签金融

复制与下载

SVG 矢量格式 · 当前版本

官方网站

使用场景

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

按钮内

输入框

搜索Wero...

导航

Wero

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41

Wero

浏览器 · 标签页与站点

wero-wallet.eu

Wero开始使用

操作按钮 · 主次层级

Wero了解更多

底部导航 · Tab 栏

Wero推荐收藏我的

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">
  <!-- 内联 Wero 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">
  <!-- 内联 Wero SVG -->
  立即开始
</button>

React 组件

内联引入

react

import { WeroIcon } from './icons';

function Nav() {
  return <WeroIcon 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">
  <!-- 内联 Wero SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索Wero…

html

<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 Wero SVG -->
  <input placeholder="搜索Wero…" 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">
    <!-- 内联 Wero SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

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

用法示例

Wero 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

Wero

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Wero

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

24px

32px

48px

64px

96px

128px

下载 Wero 图标

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

按预览颜色导出自定义尺寸px（16~1024）

复制 Wero 图标代码

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

svg

<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 41" fill="none" id="logo" data-v-f784876c="" data-v-0fa15ece=""><g clip-path="url(#clip0_2020_2049-header)" data-v-0fa15ece=""><path d="M135.783 20.5196C135.783 9.8076 143.499 0.0393066 156.82 0.0393066C170.141 0.0393066 177.91 9.8076 177.91 20.5196C177.91 31.2317 170.196 41 156.82 41C143.444 41 135.785 31.2317 135.785 20.5196H135.783ZM166.199 20.5196C166.199 15.3568 162.757 10.5848 156.82 10.5848C150.882 10.5848 147.44 15.3591 147.44 20.5196C147.44 25.6802 150.938 30.4545 156.82 30.4545C162.702 30.4545 166.199 25.6802 166.199 20.5196Z" fill="#1d1c1c" data-v-0fa15ece=""></path><path d="M127.592 28.1229C132.033 25.6247 134.696 20.8528 134.696 15.5788C134.696 7.75357 128.978 1.0918 120.098 1.0918H101.45V39.9452H112.995V30.0104H115.16L121.763 39.9452H135.362L127.592 28.1229ZM117.769 21.0748H112.995V10.0852H117.824C120.933 10.0852 122.931 12.5834 122.931 15.5812C122.931 18.579 120.877 21.0771 117.769 21.0771V21.0748Z" fill="#1d1c1c" data-v-0fa15ece=""></path><path d="M48.7497 1.05249L41.8244 24.2091L35.0657 1.05249H25.8714L19.0572 24.2091L12.1874 1.05249H0L13.9592 39.8319H23.9863L30.4674 18.7247L36.8953 39.8319H46.9756L60.9371 1.05249H48.7497Z" fill="#1d1c1c" data-v-0fa15ece=""></path><path d="M78.4051 30.3574C78.4051 30.3574 78.3866 30.3574 78.3773 30.3574C74.0589 30.3574 71.0311 27.7805 69.7312 24.3687H99.0698C99.3057 23.0849 99.4283 21.7711 99.4283 20.441C99.4283 9.75673 91.7375 0.0138787 78.4051 0V10.527C82.749 10.5386 85.7467 13.1107 87.0327 16.5157H57.7357C57.5021 17.7994 57.3818 19.1133 57.3818 20.4433C57.3818 31.1346 65.082 40.8867 78.3773 40.8867C78.3866 40.8867 78.3958 40.8867 78.4051 40.8867V30.3597V30.3574Z" fill="#1d1c1c" data-v-0fa15ece=""></path><path d="M78.3774 40.8844C78.8284 40.8844 79.2725 40.8705 79.712 40.8497C82.4137 40.7132 84.8655 40.1696 87.0513 39.293C89.2371 38.4163 91.157 37.2112 92.79 35.7539C94.423 34.2966 95.7715 32.5896 96.817 30.709C97.7676 28.9996 98.4615 27.1491 98.8964 25.2177H86.672C86.4222 25.7335 86.1307 26.2262 85.7976 26.6865C85.342 27.3156 84.8077 27.887 84.2016 28.3797C83.5956 28.8724 82.9156 29.2887 82.1662 29.6103C81.4167 29.9318 80.6002 30.1585 79.7167 30.2718C79.2864 30.3273 78.8423 30.3597 78.382 30.3597C75.6318 30.3597 73.4044 29.3119 71.8153 27.6719L63.8677 35.6197C67.4043 38.8489 72.3103 40.8844 78.3843 40.8844H78.3774Z" fill="#1d1c1c" data-v
…

预览参数

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

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Wero 图标

Wero 是金融银行分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。银行、支付与金融科技公司的品牌标识。

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

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

常见问题

Wero 图标是什么？

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

如何下载 Wero 图标？

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

Wero 图标可以商用吗？

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

如何修改 Wero 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

3.70 KB

3,785 字节

viewBox

0 0 178 41

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

图元总数

<path> ×6 · <rect> ×1

风格

单色品牌

1 种品牌色 · 纯填充

提取色值#1d1c1c

相似图标

按名称与标签相似度排序。

40%

28%

23%

20%

20%

20%

20%

19%

19%

19%

18%

Western Federal Credit Union

金融银行

17%

同色系图标

品牌色 #1d1c1c 的同色相色阶，点击复制色值；下方为品牌色同色相的其他图标。

#f2f2f2#e1e0e0#c3c1c1#a09c9c#7d7878#1d1c1c#2a2828#151414

Wero 品牌色详表
RGB	HSL	CMYK	色名
29, 28, 28	0°, 2%, 11%	0, 3, 3, 89	品牌主色 · 黑色
225, 224, 224	0°, 2%, 88%	0, 0, 0, 12	浅灰色
195, 193, 193	0°, 2%, 76%	0, 1, 1, 24	银色
160, 156, 156	0°, 2%, 62%	0, 2, 2, 37	灰色

#666666

#8c8c8c

图标信息摘要

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