跳到主要内容
网站首页

图标库

← SVG Logos
Codefund

Codefund

codefund

图标库
SVG Logos
作者
SVG Logos Contributors

正在读取图标颜色…

使用场景

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

按钮内

输入框

搜索Codefund...

导航

Codefund

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41
Codefund

浏览器 · 标签页与站点

33ce028be965dc29.example
Codefund开始使用

操作按钮 · 主次层级

Codefund了解更多

底部导航 · Tab 栏

Codefund推荐收藏我的

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

React 组件

内联引入

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

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

输入框前缀

搜索框

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

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

.icon-33ce028be965dc29 { animation: svg-spin 1.6s linear infinite; }

用法示例

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

继续下一步

按钮内
16px · action 触发

Codefund

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Codefund

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

24px

32px

48px

64px

96px

128px

下载 Codefund 图标

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

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

复制 Codefund 图标代码

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

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 84"><path d="M74.565 42.037a11.246 11.246 0 0 1-4.52-5.1c-.892-2.065-1.336-4.842-1.332-8.332V16.132a13.273 13.273 0 0 0-.475-3.877a5.263 5.263 0 0 0-1.508-2.446a6.053 6.053 0 0 0-2.763-1.263a10.74 10.74 0 0 0-.667-.135a26.208 26.208 0 0 0-4.807-.42H51.6a26.208 26.208 0 0 1 4.813.426c.231.04.452.084.666.135a6.001 6.001 0 0 1 2.757 1.262a5.23 5.23 0 0 1 1.514 2.447c.346 1.262.506 2.568.475 3.877V28.75c0 3.434.062 6.497.955 8.59a10.122 10.122 0 0 0 4.254 4.775a10.267 10.267 0 0 0-4.254 4.837c-.893 2.092-.955 5.094-.955 8.523v12.607a13.513 13.513 0 0 1-.475 3.883a5.235 5.235 0 0 1-1.514 2.44a6.064 6.064 0 0 1-2.757 1.269l-.666.134c-1.588.288-3.2.43-4.813.427h6.892a26.67 26.67 0 0 0 4.813-.427l.667-.134a6.115 6.115 0 0 0 2.762-1.268a5.274 5.274 0 0 0 1.509-2.441c.348-1.264.508-2.572.474-3.883V55.61c0-3.484.44-6.267 1.334-8.326a11.302 11.302 0 0 1 4.52-5.106l-.108-.068l.101-.073z" fill="#0fce7c"/><path d="M80.362 35.355a9.426 9.426 0 0 1-1.868-5.842V16.787c.033-2.43-.23-4.855-.782-7.222a11.542 11.542 0 0 0-2.778-5.28a12.412 12.412 0 0 0-5.552-3.202A24.392 24.392 0 0 0 65.08.247A43.657 43.657 0 0 0 60.264 0H0s2.132 21.25 14.456 27.007c1.063 6.274 3.937 15.317 11.638 18.917c1.124 6.783 4.415 15.636 13.623 18.193a2.04 2.04 0 0 0 0 .33S40.842 83.56 60.529 83.56c1.687 0 3.211-.062 4.567-.168a20.688 20.688 0 0 0 4.039-.673a12.73 12.73 0 0 0 5.714-3.14a11.14 11.14 0 0 0 2.863-5.236c.559-2.389.821-4.836.782-7.289V54.26a9.27 9.27 0 0 1 1.868-5.752c1.245-1.648 3.198-2.47 5.86-2.467v-8.219c-2.665 0-4.619-.822-5.86-2.467zM70.029 46.99c-.896 2.078-1.344 4.82-1.344 8.224v12.458c0 3.054-.666 5.11-1.997 6.167a5.58 5.58 0 0 1-1.609.864c-1.08.365-2.203.587-3.341.661c-1.125 0-11.43 1.323-13.111-10.529h9.562c-.383-7.625-6.474-8.068-7.25-8.096h-3.51c-7.622 0-11.042-5.685-12.583-10.82H57.53c0-4.485-3.589-8.286-7.026-8.096H35.622c-7.504-.078-10.89-5.718-12.42-10.815h33.249c0-4.485-3.088-8.096-7.577-8.096H23.602c-7.622 0-9.95-5.685-11.486-10.82h46.258a26.54 26.54 0 0 1 4.843.426c.23.04.456.084.67.135c.398.085.79.202 1.17.347a5.123 5.123 0 0 1 1.608.903a5.184 5.184 0 0 1 1.519 2.422a12.99 12.99 0 0 1 .478 3.851V28.56c0 3.465.448 6.22 1.344 8.264a11.276 11.276 0 0 0 4.562 5.046a11.225 11.225 0 0 0-4.539 5.119z" fill="#0fce7c"/><path d="M137.058 19.642a23.62 23.62 0 0 1 12.084 3.405v8.308c-4.048-3.392-8.237-5.088-12.566-5.088a15.996 1
…

预览参数

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

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Codefund 图标

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

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

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

常见问题

Codefund 图标是什么？

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

如何下载 Codefund 图标？

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

Codefund 图标可以商用吗？

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

如何修改 Codefund 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

4.69 KB

4,799 字节

viewBox

0 0 512 84

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

图元总数

4

<path> ×4

风格

双色

2 种品牌色 · 纯填充

提取色值#0fce7c#15003e

同色系图标

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

#e7fdf4#c6fbe4#8df7c9#4af2aa#11e489#0fce7c#0a8b54#065232
Codefund 品牌色详表
色值RGBHSLCMYK色名
15, 206, 124154°, 86%, 43%93, 0, 40, 19品牌主色 · 深青色
198, 251, 228154°, 87%, 88%21, 0, 9, 2浅灰色
141, 247, 201154°, 87%, 76%43, 0, 19, 3薄荷绿
74, 242, 170154°, 87%, 62%69, 0, 30, 5薄荷绿

图标信息摘要

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

继续探索

相关搜索

暂无推荐

Command Palette

Search for a command to run...