跳到主要内容
网站首页

图标库

返回 SVG 图标
Utopiafonts

SVG 图标

Utopiafonts

还没有评分，抢首评

复制与下载

SVG 矢量格式 · 当前版本

使用场景

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

按钮内

输入框

搜索Utopiafonts...

导航

Utopiafonts

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41
Utopiafonts

浏览器 · 标签页与站点

574ec5fe16f76127.example
Utopiafonts开始使用

操作按钮 · 主次层级

Utopiafonts了解更多

底部导航 · Tab 栏

Utopiafonts推荐收藏我的

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

React 组件

内联引入

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

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

输入框前缀

搜索框

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

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

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

用法示例

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

继续下一步

按钮内
16px · action 触发

Utopiafonts

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Utopiafonts

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

24px

32px

48px

64px

96px

128px

下载 Utopiafonts 图标

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

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

复制 Utopiafonts 图标代码

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

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.756 192.756"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M165.635 106.186c-4.527 6.79-7.242 10.713-8.299 11.618-3.924 3.772-9.203 5.583-15.844 5.583h-8.9l-8.752-.151c-7.395-.15-12.826.453-16.297 1.66-4.979 1.66-8.6 5.432-11.165 11.316-2.717-5.885-6.64-9.808-11.619-11.467-3.168-1.057-8.751-1.66-16.748-1.66-1.509 0-3.772.15-6.94.15-3.169.302-5.432.302-6.941.302-12.222 0-20.671-4.525-25.651-13.73a247.527 247.527 0 0 0-4.526-8.147c-1.509-1.961-4.074-3.621-7.695-5.281 5.281-2.716 8.751-5.733 10.411-9.053 3.169-6.186 6.488-10.712 9.808-13.278 4.074-3.168 9.204-4.678 15.692-4.678v-.15c1.961 0 4.979 0 8.751.15 3.923.151 6.941.151 8.903.151 7.393 0 12.523-.604 15.692-1.811 4.375-1.66 7.997-5.432 10.864-11.166 2.565 4.979 5.583 8.449 9.354 10.411 3.32 1.66 7.998 2.565 13.881 2.565 2.264 0 5.734 0 10.412-.151 4.678-.15 8.299-.15 10.562-.15v.15c6.488 0 11.617 1.509 15.691 4.678 3.32 2.565 6.639 7.092 9.809 13.278 1.811 3.622 5.281 6.639 10.41 9.053-3.924 1.66-7.543 4.829-10.863 9.808zM60.467 80.535h-4.979v28.819h-4.829V80.535H45.68v31.082c2.112 1.812 4.677 2.716 7.846 2.716 2.263 0 4.526-.904 6.941-2.716V80.535zm19.314 0H64.994v4.375h4.979v28.97h4.828V84.91h4.979v-4.375h.001zm19.313 2.263c-1.961-1.81-4.375-2.716-7.394-2.716-3.168 0-5.583.906-7.393 2.716v28.819c2.112 1.812 4.678 2.716 7.846 2.716 2.264 0 4.526-.904 6.941-2.716V82.798zm-9.808 26.556V84.911h4.829v24.444h-4.829v-.001zm29.12-26.556c-2.262-1.509-4.676-2.263-7.09-2.263h-7.695v33.346h4.979v-8.902h5.584l4.223-4.225V82.798h-.001zm-9.806 17.654V84.911h4.98v15.542h-4.98v-.001zm20.369-19.917h-4.828v33.346h4.828V80.535zm20.672 2.263c-1.961-1.66-4.375-2.565-7.393-2.565-3.32 0-5.885.905-7.545 2.565v31.234h4.979v-9.054h4.98v9.054h4.979V82.798zm-9.959 17.654v-15.39c.453-.452 1.057-.604 1.963-.604h.904c.754 0 1.51.151 2.113.604v15.391h-4.98v-.001z" fill="#a71543"/></g></svg>

预览参数

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

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Utopiafonts 图标

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

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

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

常见问题

Utopiafonts 图标是什么？

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

如何下载 Utopiafonts 图标？

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

Utopiafonts 图标可以商用吗？

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

如何修改 Utopiafonts 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

1.89 KB

1,934 字节

viewBox

0 0 192.756 192.756

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

图元总数

1

<path> ×1

风格

单色品牌

1 种品牌色 · 纯填充

提取色值#a71543

相似图标

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

76%
72%
69%
69%
68%
68%
67%
66%
66%
65%
65%
65%

同色系图标

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

#fce8ef#f8c9d8#f192b0#e95382#d91b57#a71543#680d2a#310614
Utopiafonts 品牌色详表
色值RGBHSLCMYK色名
167, 21, 67341°, 78%, 37%0, 87, 60, 35品牌主色 · 棕色
248, 201, 216341°, 77%, 88%0, 19, 13, 3粉红色
241, 146, 176341°, 77%, 76%0, 39, 27, 5热粉色
233, 83, 130341°, 77%, 62%0, 64, 44, 9热粉色

图标信息摘要

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

继续探索

相关搜索

UTPUtica Assembly SystemsUtiaUtexUTPBUTCUta TraxUtelUtilairUtomik wordmark

相关图标

暂无相关图标

Command Palette

Search for a command to run...