使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
9:41
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · 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">
<!-- 内联 Directus 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">
<!-- 内联 Directus SVG -->
立即开始
</button>React 组件
内联引入
react
import { DirectusIcon } from './icons';
function Nav() {
return <DirectusIcon 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">
<!-- 内联 Directus SVG -->
已完成
</span>输入框前缀
搜索框
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 Directus SVG -->
<input placeholder="搜索Directus…" 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">
<!-- 内联 Directus SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 Directus 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。
描画
线条从无到有依次绘出，适合线性图标
.icon-662c433ec8a8fa0c { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-662c433ec8a8fa0c { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-662c433ec8a8fa0c { animation: svg-spin 1.6s linear infinite; }用法示例
Directus 在真实界面中的三种常见用法。
按钮内
16px · action 触发
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 Directus
24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 Directus 图标
SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。
按预览颜色导出px（16~1024）
复制 Directus 图标代码
Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。
svg
<svg viewBox="0 0 1024 1028" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1255_4057)"><rect width="1024" height="1028" fill="#6644ff"/><path d="M0 856.177V0H1024V1028H987.478C944.858 1005.08 881.857 978.413 792.583 956.099C706.535 934.591 579.091 924.288 443.621 913.336C289.815 900.902 125.662 887.631 0 856.177Z" fill="#6644ff"/><path d="M0 630.724V0H1024V864.167C987.48 836.871 914.997 793.6 788.518 757.39C703.262 732.982 576.241 718.365 441.22 702.828C288.002 685.197 124.482 666.38 0 630.724Z" fill="#6644ff"/><path d="M0 385.079V0H1024V661.623C992.243 634.157 920.217 583.508 783.219 539.058C698.867 511.689 572.433 492.648 438.037 472.408C285.691 449.465 123.114 424.981 0 385.079Z" fill="#6644ff"/><path d="M1024 0V470.993C995.948 444.51 924.692 389.046 780.011 339.296C696.15 310.459 570.068 289.215 436.045 266.632C284.289 241.062 122.352 213.776 0 171.81V0H1024Z" fill="#6644ff"/><path d="M170.96 0H1024V278.073C1008.47 260.248 941.186 192.346 771.386 130.624C688.04 100.328 562.349 76.8867 428.741 51.9689C343.042 35.9861 254.087 19.396 170.96 0Z" fill="#6644ff"/><g filter="url(#filter0_dd_1255_4057)"><path fill-rule="evenodd" clip-rule="evenodd" d="M751.713 578.4C748 577.472 744.906 576.544 742.122 575.306C740.063 574.391 738.343 573.308 736.836 572.055C735.835 571.222 735.405 569.911 735.529 568.615C737.022 553.073 735.38 539.364 736.862 523.951C743.05 461.46 782.345 481.259 817.617 471.05C837.872 465.345 858.126 454.117 865.527 432.032C866.739 428.417 865.672 424.486 863.154 421.622C840.049 395.355 814.469 372.145 786.676 352.254C693.499 285.923 572.404 258.379 461.196 274.491C456.983 275.101 454.775 279.768 457.077 283.348C471.161 305.263 489.743 323.197 511.052 336.397C514.925 338.796 513.368 343.978 508.923 342.981C498.473 340.639 485.045 336.07 472.417 327.159C471.2 326.301 469.632 326.084 468.249 326.636C462.603 328.887 454.451 332.133 447.714 335.041C443.836 336.715 443.046 341.715 446.238 344.482C502.095 392.893 583.352 400.252 646.98 361.511C650.856 359.151 657.062 364.001 655.813 368.363C653.814 375.352 651.478 384.958 648.991 398.04C633.211 477.856 587.728 471.669 531.417 451.56C418.895 410.784 355.06 445.604 298.306 376.675C294.363 371.885 287.431 370.225 282.74 374.285C271.024 384.427 264.09 399.231 264.09 415.055C264.09 433.797 273.766 449.851 288.108 459.461C289.902 460.664 292.286 460.156 293.624 458.461C297.119 454.
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 Directus 图标
Directus 是软件SaaS分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。软件产品与在线服务平台的品牌标识。
在本页点击「下载」即可保存 Directus 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。 了解 Directus 更多信息可访问官方网站。
Directus 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求（参见品牌官网）。文件体积 4.66 KB，viewBox 为 0 0 1024 1028，共 8 个矢量图元。
常见问题
Directus 图标是什么？
Directus 是软件SaaS分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 Directus 图标？
在本页点击「下载 SVG」即可保存 Directus 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
Directus 图标可以商用吗？
Directus 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 Directus 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
100/100
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
文件体积
4.66 KB
4,773 字节
viewBox
0 0 1024 1028
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
图元总数
8
<path> ×6 · <rect> ×2
风格
多彩
6 种品牌色 · 纯填充
提取色值#6644ff#754dfc#8555f8#945ef5#a366f1#b36eee
相似图标
按名称与标签相似度排序。
同色系图标
品牌色 #6644ff 的同色相色阶，点击复制色值；下方为品牌色同色相的其他图标。
#eae5ff#cdc2ff#9b85ff#603dff#2d00f5#6644ff#2e00fc#2300be
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 102, 68, 255 | 251°, 100%, 63% | 60, 73, 0, 0 | 品牌主色 · 蓝紫色 | |
| 205, 194, 255 | 251°, 100%, 88% | 20, 24, 0, 0 | 浅灰色 | |
| 155, 133, 255 | 251°, 100%, 76% | 39, 48, 0, 0 | 矢车菊蓝 | |
| 96, 61, 255 | 251°, 100%, 62% | 62, 76, 0, 0 | 蓝紫色 |
Directus 的其他风格版本
同名图标的不同绘制风格，切换后预览与下载均使用所选版本。
默认
单色
徽章
图标信息摘要
Directus 是一个软件SaaS类别的单文件 SVG 矢量图标，文件体积 4.66 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 Directus的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。 详情参见Directus 官网。
继续探索
相关搜索
相关标签
相关图标
