SVG 图标

7 Pixels Interactive

还没有评分，抢首评

复制与下载

SVG 矢量格式 · 当前版本

使用场景

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

按钮内

输入框

搜索7 Pixels Interactive...

导航

7 Pixels Interactive

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41

7 Pixels Interactive

浏览器 · 标签页与站点

d15c5979046becce.example

7 Pixels Interactive开始使用

操作按钮 · 主次层级

7 Pixels Interactive了解更多

底部导航 · Tab 栏

7 Pixels Interactive推荐收藏我的

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

React 组件

内联引入

react

import { 7PixelsInteractiveIcon } from './icons';

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

输入框前缀

搜索框

搜索7 Pixels Interactive…

html

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

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

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

用法示例

7 Pixels Interactive 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

7 Pixels Interactive

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 7 Pixels Interactive

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

24px

32px

48px

64px

96px

128px

下载 7 Pixels Interactive 图标

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

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

复制 7 Pixels Interactive 图标代码

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 fill="#1b3771" d="M84.975 123.232v-8.978h2.041v8.978h-2.041zM92.373 123.232v-8.978h1.888l2.448 5.101v-5.101h1.939v8.978h-1.785l-2.551-5.304h-.051v5.304h-1.888zM105.383 123.232v-7.449h-2.041v-1.529h6.123v1.529h-2.041v7.449h-2.041zM114.107 123.232v-8.978h5.204v1.529h-3.163v2.145h2.959v1.529h-2.959v2.246h3.317v1.529h-5.358zM126.402 115.783h.613c.766 0 1.121.357 1.121 1.021 0 .357-.102.662-.305.816-.154.203-.459.307-.816.307h-.613v-2.144zm0 7.449v-3.775c.307 0 .51.051.664.102.152.104.307.307.408.562.102.307.254.766.459 1.428l.51 1.684h2.092c-.152-.459-.357-.969-.561-1.582-.154-.611-.307-1.07-.408-1.377a6.402 6.402 0 0 0-.408-.816c-.154-.307-.307-.459-.51-.561.561-.256.918-.51 1.172-.867.256-.307.357-.766.357-1.275 0-.357-.051-.715-.203-1.021a1.697 1.697 0 0 0-.562-.766c-.254-.254-.561-.406-.918-.51-.357-.152-.766-.203-1.225-.203h-2.908v8.979h2.041v-.002zM137.779 116.65h.053l.662 3.266h-1.428l.713-3.266zm-1.427 6.582l.459-1.836h1.99l.459 1.836h1.939l-2.348-9.029h-2.092l-2.348 9.029h1.941zM151.045 120.938v1.734a2.784 2.784 0 0 1-.918.51 4.355 4.355 0 0 1-1.174.152c-.715 0-1.326-.152-1.887-.51-.562-.408-.971-.918-1.277-1.633-.305-.662-.459-1.479-.459-2.346 0-.715.104-1.379.256-1.939a3.972 3.972 0 0 1 .715-1.479 4.253 4.253 0 0 1 1.174-.971 3.674 3.674 0 0 1 1.479-.305c.715 0 1.377.152 2.041.51v1.684c-.613-.307-1.123-.512-1.531-.512-.611 0-1.121.256-1.479.715-.408.51-.562 1.225-.562 2.143 0 .971.154 1.684.459 2.195.357.51.816.764 1.48.764.458 0 1.072-.254 1.683-.712zM157.523 123.232v-7.449h-2.039v-1.529h6.121v1.529h-2.041v7.449h-2.041zM166.248 123.232v-8.978h2.041v8.978h-2.041zM175.84 123.334l-3.01-9.08h2.092l1.377 4.642 1.326-4.642h2.041l-2.857 9.08h-.969zM184.309 123.232v-8.978h5.205v1.529h-3.164v2.145h2.959v1.529h-2.959v2.246h3.316v1.529h-5.357z"/><path fill="#1b3771" d="M26.202 106.09V82.672H2.834v23.418h23.368z"/><path fill="#1b3771" d="M53.497 106.09V82.672H30.13v23.418h23.367zM80.792 106.09V82.672H57.425v23.418h23.367zM108.086 106.09V82.672H84.669v23.418h23.417zM135.332 106.09V82.672h-23.367v23.418h23.367zM162.627 106.09V82.672H139.26v23.418h23.367zM189.922 106.09V82.672h-23.367v23.418h23.367z"/><path fill="#1b3771" d="M10.793 102.314l4.796-13.213H8.957v-3.52h11.581v.765l-6.224 17.398-3.521-1.43zM40.333 88.693h1.327c.816 0 1.428.204 1.735.612
…

预览参数

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

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 7 Pixels Interactive 图标

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

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

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

常见问题

7 Pixels Interactive 图标是什么？

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

如何下载 7 Pixels Interactive 图标？

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

7 Pixels Interactive 图标可以商用吗？

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

如何修改 7 Pixels Interactive 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

3.81 KB

3,899 字节

viewBox

0 0 192.756 192.756

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

图元总数

<path> ×4

风格

双色

2 种品牌色 · 纯填充

提取色值#1b3771#34aba7

相似图标

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

同色系图标

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

#eaf0fa#cedaf3#9cb5e7#6389da#2f60c6#1b3771#102042#081021

7 Pixels Interactive 品牌色详表
RGB	HSL	CMYK	色名
27, 55, 113	220°, 61%, 27%	76, 51, 0, 56	品牌主色 · 炭黑色
206, 218, 243	221°, 61%, 88%	15, 10, 0, 5	浅灰色
156, 181, 231	220°, 61%, 76%	32, 22, 0, 9	天蓝色
99, 137, 218	221°, 62%, 62%	55, 37, 0, 15	矢车菊蓝

Confederation Construction Bruxelles Capitale

architecture

#99a9d3

University of New Hampshire

education-training

#1c4882

Hanshin Machine & Construction

architecture

#435092

Amsterdam Tourist Board

tourism

#313c93

Rx&D

#3380be

待命名 b3848e2a

#06038d

Glimcher Realty Trust

real-estate

#1f1b62

Wageningen Universiteit

education-training

#00678c

图标信息摘要

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

图标库

7 Pixels Interactive

源码

使用场景

场景预览

UI 使用示例

动效图标

用法示例

各尺寸下的 7 Pixels Interactive

下载 7 Pixels Interactive 图标

复制 7 Pixels Interactive 图标代码

预览参数

关于 7 Pixels Interactive 图标

常见问题

SVG 健康报告

相似图标

同色系图标

图标信息摘要

继续探索

相关搜索

联系我们

7 Pixels Interactive

源码

使用场景

场景预览

UI 使用示例

动效图标

用法示例

各尺寸下的 7 Pixels Interactive

下载 7 Pixels Interactive 图标

复制 7 Pixels Interactive 图标代码

预览参数

关于 7 Pixels Interactive 图标

常见问题

SVG 健康报告

相似图标

同色系图标

图标信息摘要

继续探索

相关搜索

相关图标

联系我们

Command Palette