SVG 图标

Legrand

还没有评分，抢首评

家居奢侈高端

复制与下载

SVG 矢量格式 · 当前版本

使用场景

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

按钮内

输入框

搜索Legrand...

导航

Legrand

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41

Legrand

浏览器 · 标签页与站点

c636ad79b2a322ef.example

Legrand开始使用

操作按钮 · 主次层级

Legrand了解更多

底部导航 · Tab 栏

Legrand推荐收藏我的

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

React 组件

内联引入

react

import { LegrandIcon } from './icons';

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

输入框前缀

搜索框

搜索Legrand…

html

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

动效图标

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

描画

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

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

呼吸

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

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

旋转

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

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

用法示例

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

继续下一步

按钮内
16px · action 触发

Legrand

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Legrand

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

24px

32px

48px

64px

96px

128px

下载 Legrand 图标

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

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

复制 Legrand 图标代码

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

svg

<svg viewBox="26 14.72 285.3446412044994 69.17" xmlns="http://www.w3.org/2000/svg"><g fill="#231f20"><path d="M88.89 16.6h11.6v49.67h-11.6zM137.77 50.71H113.4c0 5.1 2.47 7.86 7.25 7.86 2.48 0 4.27-.9 5.54-3.24h11.13c-1.86 8.31-9.18 12.11-16.61 12.11-10.83 0-18.91-6.61-18.91-18.79 0-11.77 7.44-18.86 18.07-18.86 11.33 0 17.88 7.57 17.88 19.61v1.31zm-10.75-7.22a6.642 6.642 0 0 0-6.56-5.57c-3.36 0-6.16 1.94-6.87 5.57zM176.41 62.83c0 15-6.88 21.06-18.91 21.06-7.51 0-17.57-4.2-18.59-13.48h13c.29 1.24 1.13 2.13 2.16 2.69 1.01.53 2.23.81 3.3.81 6.25 0 7.46-4.38 7.46-10.12v-1.64c-2.99 3.23-6.06 4.8-10.37 4.8-9.56 0-16.12-7.85-16.12-18.01 0-10.34 6.75-19.14 16.73-19.14 3.83 0 7.34 1.37 9.63 4.9h.12v-3.74h11.58v31.87zm-26.1-14.45c0 4.47 2.73 7.91 7.44 7.91s7.45-3.44 7.45-7.91c0-4.32-2.74-7.99-7.45-7.99s-7.44 3.67-7.44 7.99M240.95 35.51h.13c2.68-4.28 5.46-4.64 9.97-4.79 7.39-.21 10.9 3.44 10.9 13.74v21.82h-11.59V50.92c0-3.37-.18-9.75-4.76-9.29-4.69.47-4.66 3.8-4.66 8.19v16.45h-11.57V30.96h11.57v4.55zM289.57 62.36h-.11c-2.06 3.5-6.06 5.09-9.88 5.09-9.68 0-16.49-8.76-16.49-18.85 0-10.12 6.68-18.79 16.36-18.79 3.77 0 7.71 1.51 10.13 4.6V16.6h11.6v49.67h-11.6v-3.91zm-14.5-13.7c0 4.47 2.72 7.91 7.44 7.91 4.7 0 7.43-3.44 7.43-7.91 0-4.34-2.73-7.99-7.43-7.99-4.72 0-7.44 3.65-7.44 7.99M303.18 20.49c0-2.17 1.71-3.89 3.88-3.89a3.88 3.88 0 0 1 3.91 3.89c0 2.17-1.73 3.89-3.91 3.89a3.86 3.86 0 0 1-3.88-3.89m.63 0c0 1.83 1.48 3.25 3.25 3.25 1.78 0 3.27-1.43 3.27-3.25 0-1.84-1.49-3.26-3.27-3.26-1.77 0-3.25 1.42-3.25 3.26m5.04 2.22h-.72l-1.12-2.01h-.81v2.01h-.63v-4.38h1.84c.8 0 1.51.24 1.51 1.16 0 .85-.59 1.17-1.17 1.2zm-2.65-3.74v1.08h.68c.6 0 1.4.1 1.4-.49 0-.55-.46-.59-.98-.59zM227.42 40.47v-.67c0-2.21-2.47-8.73-13.53-8.86-4.89-.05-9.97 0-9.97 0v7.98s7.54-.44 10.42 1.11c2.01 1.1 1.61 2.61 1.87 3.42-1.69-1.96-4.4-2.34-8.66-2.34-6.71 0-11.34 6.01-11.34 13.04 0 6.99 4.72 13.06 11.43 13.06 2.64 0 6.68-.07 8.67-3.53l.12 2.76h11.06V40.5zm-16.13 18.35c-3.29 0-5.21-1.75-5.21-4.87 0-3.04 1.92-5.13 5.21-5.13 3.3 0 5.21 2.09 5.21 5.13-.01 3.12-1.91 4.87-5.21 4.87"/><path d="M189.76 36.7h.11c2.16-4.16 5.39-4.89 10.19-5.56h2.15v7.55c-2.21.19-3.69.66-6.07 2.25-3.64 2.42-6.38 5.76-6.38 11.6v13.72h-11.15V31.14h11.15zM46.23 18.29V31.7h12.61v19.06h.01v13.76h13.41V18.29zM39.42 32.05h-.1V18.29H26v46.23h25.92V51.1h-12.5z"/><path d="M54.01 51.03h2.63v17.01h-2.63zM41.19 14.72h2.63v17.03h-2.63z"/></g></svg
…

预览参数

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

颜色

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Legrand 图标

Legrand 是家居、奢侈高端分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。家居家装品牌的标识。

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

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

常见问题

Legrand 图标是什么？

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

如何下载 Legrand 图标？

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

Legrand 图标可以商用吗？

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

如何修改 Legrand 图标的颜色？

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

SVG 健康报告

100/100

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

文件体积

2.37 KB

2,427 字节

viewBox

26 14.72 285.3446412044994 69.17

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

图元总数

<path> ×3

风格

单色品牌

1 种品牌色 · 纯填充

提取色值#231f20

相似图标

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

Lafarge Roofing

architecture

61%

60%

60%

59%

59%

59%

58%

58%

58%

57%

Lasalle Investment Management Primary Rgb Web

investment

57%

Luxman

57%

同色系图标

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

#f3f1f2#e2dfdf#c6bec0#a4989b#827377#231f20#2b2628#161314

Legrand 品牌色详表
RGB	HSL	CMYK	色名
35, 31, 32	345°, 6%, 13%	0, 11, 9, 86	品牌主色 · 深灰色
226, 223, 223	0°, 5%, 88%	0, 1, 1, 11	浅灰色
198, 190, 192	345°, 7%, 76%	0, 4, 3, 22	银色
164, 152, 155	345°, 6%, 62%	0, 7, 5, 36	灰色

Logitech

technology

#231f20

图标信息摘要

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