日落
Lucide
使用场景
颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。
按钮内
输入框
搜索日落...
导航
日落
空状态
暂无内容
场景预览
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
9:41
日落
浏览器 · 标签页与站点
d7b7b3a88211f47f.example
日落开始使用
操作按钮 · 主次层级
日落了解更多
底部导航 · 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">
<!-- 内联 日落 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">
<!-- 内联 日落 SVG -->
立即开始
</button>React 组件
内联引入
react
import { IconIcon } from './icons';
function Nav() {
return <IconIcon 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">
<!-- 内联 日落 SVG -->
已完成
</span>输入框前缀
搜索框
搜索日落…
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
<!-- 内联 日落 SVG -->
<input placeholder="搜索日落…" 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">
<!-- 内联 日落 SVG -->
</span>
<p class="mt-3 text-sm font-medium">功能名称</p>
<p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>动效图标
为 日落 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。
描画
线条从无到有依次绘出，适合线性图标
.icon-d7b7b3a88211f47f { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变，适合状态提示图标
.icon-d7b7b3a88211f47f { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转，适合加载中场景
.icon-d7b7b3a88211f47f { animation: svg-spin 1.6s linear infinite; }用法示例
日落 在真实界面中的三种常见用法。
继续下一步
按钮内
16px · action 触发
日落
导航项
18px · 列表选中态
暂无数据
空状态
40px · 引导提示
各尺寸下的 日落
24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。
24px
32px
48px
64px
96px
128px
下载 日落 图标
SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。
按预览颜色导出px（16~1024）
复制 日落 图标代码
Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。
svg
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M64 57.05a6.88 6.88 0 0 1-6.882 6.885H7.038A6.88 6.88 0 0 1 .16 57.05V6.97A6.88 6.88 0 0 1 7.038.089h50.08A6.88 6.88 0 0 1 64 6.97z" fill="#25333a"></path><path d="M6.258 63.991q.092.007.193.02c-.002-.021-.014-.048-.022-.071zm48.162.079h.631l-.576-.158z" fill="#25333a"></path><path d="M30.451 35.27c-12.09 0-21.888 9.801-21.888 21.89c0 2.416.406 4.733 1.131 6.905h41.51a21.7 21.7 0 0 0 1.132-6.905c0-12.09-9.798-21.89-21.885-21.89M6.411 50.43L.164 48.692V53l5.568.75c.154-1.12.384-2.232.679-3.32M64 57.05h-8.607v.11c0 1.157-.078 2.312-.229 3.434l7.216.982c.994-1.196 1.62-2.714 1.62-4.395zM13.403 38.949L.164 24.809v7.784l10.906 8.865c.716-.886 1.5-1.727 2.333-2.505M9.1 44.24L.167 38.807v5.25l7.375 3.196a25 25 0 0 1 1.558-3.01M5.504 57.2l-5.337.003c0 1.497.497 2.876 1.315 4.01l4.255-.585a26 26 0 0 1-.233-3.425M53.33 47.19l10.673-4.663v-5.826l-12.236 7.486c.59.963 1.114 1.973 1.563 3m-8.553-10.449L64 9.478V7.107c0-2.922-1.828-5.404-4.402-6.402l-17.722 34.27c1 .516 1.976 1.112 2.901 1.763m5.009 4.662L64 29.786v-8.662L47.445 38.902c.834.78 1.618 1.616 2.341 2.498m5.374 12.268l8.842-1.22v-4.767l-9.532 2.687a26 26 0 0 1 .69 3.3M38.771 33.631L50.587.227h-8.401l-6.664 32.5c1.099.225 2.19.531 3.249.904m-13.468-.89L18.533.227h-8.404l11.932 33.428a24 24 0 0 1 3.242-.914m5.145-.521c.585-.021 1.137.021 1.699.056L34.256.226h-7.785l2.203 32.05a25 25 0 0 1 1.774-.062M18.965 35.01L2.009 2.455C.875 3.682.164 5.31.164 7.112v7.251l15.894 22.424a25 25 0 0 1 2.907-1.777" fill="#25333a"></path><path d="M5.479 49.902v13.949c0 .117.037.215.088.215h5.397c.045 0 .083-.098.083-.215V49.902a.4.4 0 0 0-.023-.146l-.006-.003v-.009c-.008-.031-.037-.057-.054-.057H5.567c-.051.001-.088.101-.088.215" fill="#25333a"></path><path d="M5.837 55.964h4.764c.031 0 .068-.014.068-.024v-1.428c0-.012-.037-.021-.068-.021H5.837s-.04.005-.051.005v.006c-.012.003-.023.009-.023.013v1.429c0 .006.034.02.074.02m.043-1.969h4.758c.04 0 .076-.015.076-.025v-1.428c0-.011-.037-.021-.076-.021H5.88s-.043 0-.049.006v.004q-.021.005-.022.011v1.428c0 .01.028.025.071.025m0-2.057h4.758c.04 0 .076-.012.076-.021v-1.43c0-.012-.037-.021-.076-.021H5.88s-.043 0-.049.008c-.014.008-.022.008-.022.014v1.433c0 .005.028.017.071.017m0 6.122h4.758c.04 0 .076-.013.076-.022v-1.427c0-.016-.037-.022-.076-.022H5.88s-.043.002-.049.009q-.021.002
…预览参数
调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
关于 日落 图标
日落 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 日落 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
日落 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 18.32 KB，viewBox 为 0 0 64 64，共 38 个矢量图元。
常见问题
日落 图标是什么？
日落 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。
如何下载 日落 图标？
在本页点击「下载 SVG」即可保存 日落 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
日落 图标可以商用吗？
日落 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。
如何修改 日落 图标的颜色？
在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。
SVG 健康报告
100/100
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
文件体积
18.32 KB
18,756 字节
viewBox
0 0 64 64
同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器
图元总数
38
<path> ×37 · <ellipse> ×1
风格
多彩
6 种品牌色 · 纯填充
提取色值#25333a#6cb5c6#657e93#607887#7a94a5#f28327
同色系图标
品牌色 #25333a 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。
#eff3f5#dae3e7#b4c6cf#89a5b4#5f8395#25333a#202c32#101619
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 37, 51, 58 | 200°, 22%, 19% | 36, 12, 0, 77 | 品牌主色 · 深灰色 | |
| 218, 227, 231 | 198°, 21%, 88% | 6, 2, 0, 9 | 浅灰色 | |
| 180, 198, 207 | 200°, 22%, 76% | 13, 4, 0, 19 | 银色 | |
| 137, 165, 180 | 201°, 22%, 62% | 24, 8, 0, 29 | 银色 |
图标信息摘要
日落 是一个通用类别的单文件 SVG 矢量图标，文件体积 18.32 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 日落的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。
继续探索
相关搜索
暂无推荐
日落 在其他图标库
同名不同风格的版本，点击查看与下载
