跳到主要内容
网站首页

图标库

← theSVG Color
Uxcorprangel Dark

Uxcorprangel Dark

uxcorprangel-dark

图标库
theSVG Color
作者
theSVG Color Contributors

正在读取图标颜色…

使用场景

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

按钮内

输入框

搜索Uxcorprangel Dark...

导航

Uxcorprangel Dark

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41
Uxcorprangel Dark

浏览器 · 标签页与站点

63a314f69b910547.example
Uxcorprangel Dark开始使用

操作按钮 · 主次层级

Uxcorprangel Dark了解更多

底部导航 · Tab 栏

Uxcorprangel Dark推荐收藏我的

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

React 组件

内联引入

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

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

输入框前缀

搜索框

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

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

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

用法示例

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

继续下一步

按钮内
16px · action 触发

Uxcorprangel Dark

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Uxcorprangel Dark

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

24px

32px

48px

64px

96px

128px

下载 Uxcorprangel Dark 图标

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

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

复制 Uxcorprangel Dark 图标代码

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

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1195 1207"><g fill="none"><path fill="#ee2525" d="m1163 707l-2-1c-8-1-14-8-13-16A541 541 0 0 0 611 81c-73 0-15-6-15-14s7-15 15-15a568 568 0 0 1 570 571c0 77-1 47-4 71c-1 7-7 12-14 12zM91 468c7 3 12 1 14-5s0-10-7-13l-75-27l14-40l78 28c14 5 22 13 26 24c3 11 2 25-4 41c-11 33-31 44-58 34L1 482l15-41zm124-143l-24 39l-35-8l-1 2l23 28l-24 37l-41-54l-63-14l25-39l34 10l1-1l-24-27l22-36l41 50zm11-99c7 7 13 12 18 14c5 1 9 0 13-3l16-22l27 18c-6 12-14 23-23 31c-13 13-26 19-40 17c-13-2-27-10-42-25a76 76 0 0 1-24-44c-2-14 5-28 19-42c8-8 18-14 30-19l20 30q-18 9-24 15c-3 3-4 7-3 12c2 5 6 11 13 18m39-40c-13-19-18-35-16-48s11-26 28-37s32-15 45-12c12 4 25 15 37 33c12 19 18 35 16 49c-1 13-10 26-27 37s-32 15-45 11s-26-15-38-34zm43-58c-3-2-7-1-12 2s-7 7-6 10c0 4 4 10 10 19l5 8c6 9 11 15 14 16c3 2 7 1 12-2s7-6 7-10c-1-3-4-10-10-19l-5-8c-7-9-11-14-15-16m151-70c3 7 4 14 4 19c-1 5-3 11-7 16l37 42l-41 17l-27-35l-3 1l16 40l-38 15l-47-115l49-20c14-6 26-7 35-4c10 3 17 11 22 24m-38 31c1-3 0-6-1-10l-6-8h-6l-5 2l9 22l4-1c3-2 5-3 5-5"/><path fill="#ee2525" d="m541 86l-8 2l7 38l-41 8l-24-122l47-9c17-3 29-2 38 3c8 5 14 15 17 30s2 26-4 34s-17 13-32 16m-3-29l-1-11c-1-5-2-8-4-10s-4-2-7-2l-5 1l6 28l5-1c3-1 5-3 6-5m73 1136A568 568 0 0 1 40 623c0-77 2-52 5-77a15 15 0 0 1 29 4a541 541 0 0 0 537 615c73 0 42-2 63-4a15 15 0 0 1 3 29c-21 2-44 4-66 4zm184-89c2 8 2 14 0 19c-1 6-4 10-9 15l29 48l-43 9l-21-39h-3l9 42l-40 9l-26-122l52-11c15-3 27-2 35 3c9 4 14 13 17 27m-42 24v-10c-1-5-3-8-4-9c-2-1-4-2-7-1l-5 1l5 24l5-1c3-1 5-2 6-4m187 1l-38 18l-12-15l-20 9l5 19l-36 18l-32-123l55-27zm-64-19l-25-34h-1l11 41zm168-66l-31 26l-51-21l-1 1l32 38l-29 24l-81-94l33-28l50 23h1l-33-39l30-25zm32-91l4-8l-9-7l-6 8l-23-16l27-39l59 41l-18 25l-7-1v1c1 8-2 17-7 25c-18 25-44 26-79 2a79 79 0 0 1-32-38c-5-13-1-28 11-45c8-12 18-23 29-31l27 27c-12 10-20 17-23 22c-4 6-5 10-3 15c3 4 8 9 17 15c8 6 15 9 20 10s9-1 13-6m97-127l-29 74l-116-46l31-76l29 15l-13 33l14 6l12-29l26 10l-12 30l16 6l15-36l27 14zm22-101l-15 74l-122-24l9-42l90 17l6-34l31 9z"/><path fill="#ee2525" d="M997 661c-1 1-17 9-36 9s-9 0-12-1l2-9l10-37h-38l-29 3l-4 1c-1-5-4-10-11-14a86 86 0 0 1-20-23c2 0 3-2 5-3c4-3 7-8 7-14c0-5-1-9-10-19l-4-4l5-8l2-21c5-2 9-6 10-10c2-5 2-10 0-14c7-1 11-3 14-7c4-4 5-9 4-14v-1c4-2 9-4 12-7c11-10 9-18 7-23c-1-4-4-6-7-8c7-6 13-14 16-21c3-6 9-18-1-29l-5-3l3-5c13-25 4-36-2-40l-7-2c1-6 2-12 1-17a18 18 
…

预览参数

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

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Uxcorprangel Dark 图标

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

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

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

常见问题

Uxcorprangel Dark 图标是什么？

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

如何下载 Uxcorprangel Dark 图标？

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

Uxcorprangel Dark 图标可以商用吗？

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

如何修改 Uxcorprangel Dark 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

12.29 KB

12,585 字节

viewBox

0 0 1195 1207

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

图元总数

8

<path> ×8

风格

双色

2 种品牌色 · 纯填充

提取色值#ee2525#000000

同色系图标

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

#fde7e7#fbc6c6#f68d8d#f14b4b#e31212#ee2525#bd0f0f#840a0a
Uxcorprangel Dark 品牌色详表
色值RGBHSLCMYK色名
238, 37, 370°, 86%, 54%0, 84, 84, 7品牌主色 · 红色
251, 198, 1980°, 87%, 88%0, 21, 21, 2粉红色
246, 141, 1410°, 85%, 76%0, 43, 43, 4热粉色
241, 75, 750°, 86%, 62%0, 69, 69, 5棕色

图标信息摘要

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

继续探索

相关搜索

暂无推荐

Command Palette

Search for a command to run...