找找图标

neptune SVG 图标

simple-iconsneptune

来自 Simple Icons 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。

图标 ID
simple-icons:neptune
中文名
—
所属集合
Simple Icons
集合规模
3,467 枚
基础网格
24px
色彩
单色(可改色)
开源协议
CC0-1.0
作者
Simple Icons Collaborators

下载 neptune 图标

SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。

px

PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。

neptune 的预览与使用场景

切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色
neptune 图标 浅色背景预览浅色背景
neptune 图标 深色背景预览深色背景
neptune 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索neptune…输入框 · 前缀图标
neptune导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41neptune App 图标neptune手机桌面 · App 图标
neptunesimple-icons.design/icons/neptune浏览器 · 标签页与站点图标

各尺寸下的可读性

neptune 图标 24px 渲染24pxneptune 图标 32px 渲染32pxneptune 图标 48px 渲染48pxneptune 图标 64px 渲染64pxneptune 图标 96px 渲染96pxneptune 图标 128px 渲染128px

复制 neptune 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。

svgSVG 源码(内联 HTML)
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M24 12c0 6.62-5.372 11.986-12 11.986C5.373 23.986 0 18.62 0 12S5.373.014 12 .014C18.628.014 24 5.38 24 12m-9.67-5.291c-.754 0-1.144.476-1.437 1.055c-.397.78-.606 1.656-.819 2.636c-.27 1.244-.496 2.497-.748 3.744c-.06.294-.093.64-.209.916c-.062.15-.21.367-.38.198c-.192-.19-.258-.568-.313-.828c-.295-1.454-.573-2.912-.902-4.358a17 17 0 0 0-.731-2.34a1.54 1.54 0 0 0-.492-.681a1.34 1.34 0 0 0-.768-.27c-.06 0-.482.008-.888.276a1.6 1.6 0 0 0-.582.687c-.359.744-.636 1.587-.871 2.656a12 12 0 0 0-.266 1.62a.8.8 0 0 0 .125.488c.092.145.23.26.386.316a.77.77 0 0 0 .678-.056a.82.82 0 0 0 .362-.541c.107-.497.202-1.01.293-1.502c.045-.249.313-1.539.375-1.702c.028-.09.074-.249.162-.357c.083-.103.191-.102.27.006c.087.122.125.275.161.418c.077.304.301 1.515.57 2.732c.257 1.183.5 2.369.807 3.54c.141.532.393 1 .58 1.3c.244.39.632.619 1.063.627c.343.01.667-.105.943-.324a2.16 2.16 0 0 0 .649-.918c.392-1.002.612-2.098.826-3.16c.36-1.821.54-2.728.62-3.125c.027-.125.177-.754.218-.864a.6.6 0 0 1 .125-.255c.063-.066.168-.08.236-.014c.178.173.326.81.445 1.41c.112.584.24 1.165.36 1.748c.199.967.396 1.934.607 2.898c.185.853.424 1.449.768 1.936c.258.364.564.577.896.645s.696-.008 1.074-.243c.32-.198.606-.546.78-.963c.273-.652.432-1.422.578-2.181c.058-.305.114-.61.174-.9c.081-.395.116-.647.095-.934c-.024-.331-.314-.696-.699-.703c-.5-.013-.759.242-.846.705q-.222 1.203-.45 2.404c-.052.26-.021.578-.212.787c-.029.029-.118.109-.236.088c-.075-.013-.173-.077-.252-.248c-.154-.43-.524-2.642-1.053-4.955a18 18 0 0 0-.732-2.371c-.268-.69-.685-1.043-1.34-1.043m-9.549 8.428c-.647 0-1.172.534-1.172 1.193c0 .656.548 1.196 1.172 1.195c.597 0 1.172-.536 1.172-1.195s-.525-1.193-1.172-1.193"/></svg>
reactReact 组件(TSX)
export function NeptuneIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" d="M24 12c0 6.62-5.372 11.986-12 11.986C5.373 23.986 0 18.62 0 12S5.373.014 12 .014C18.628.014 24 5.38 24 12m-9.67-5.291c-.754 0-1.144.476-1.437 1.055c-.397.78-.606 1.656-.819 2.636c-.27 1.244-.496 2.497-.748 3.744c-.06.294-.093.64-.209.916c-.062.15-.21.367-.38.198c-.192-.19-.258-.568-.313-.828c-.295-1.454-.573-2.912-.902-4.358a17 17 0 0 0-.731-2.34a1.54 1.54 0 0 0-.492-.681a1.34 1.34 0 0 0-.768-.27c-.06 0-.482.008-.888.276a1.6 1.6 0 0 0-.582.687c-.359.744-.636 1.587-.871 2.656a12 12 0 0 0-.266 1.62a.8.8 0 0 0 .125.488c.092.145.23.26.386.316a.77.77 0 0 0 .678-.056a.82.82 0 0 0 .362-.541c.107-.497.202-1.01.293-1.502c.045-.249.313-1.539.375-1.702c.028-.09.074-.249.162-.357c.083-.103.191-.102.27.006c.087.122.125.275.161.418c.077.304.301 1.515.57 2.732c.257 1.183.5 2.369.807 3.54c.141.532.393 1 .58 1.3c.244.39.632.619 1.063.627c.343.01.667-.105.943-.324a2.16 2.16 0 0 0 .649-.918c.392-1.002.612-2.098.826-3.16c.36-1.821.54-2.728.62-3.125c.027-.125.177-.754.218-.864a.6.6 0 0 1 .125-.255c.063-.066.168-.08.236-.014c.178.173.326.81.445 1.41c.112.584.24 1.165.36 1.748c.199.967.396 1.934.607 2.898c.185.853.424 1.449.768 1.936c.258.364.564.577.896.645s.696-.008 1.074-.243c.32-.198.606-.546.78-.963c.273-.652.432-1.422.578-2.181c.058-.305.114-.61.174-.9c.081-.395.116-.647.095-.934c-.024-.331-.314-.696-.699-.703c-.5-.013-.759.242-.846.705q-.222 1.203-.45 2.404c-.052.26-.021.578-.212.787c-.029.029-.118.109-.236.088c-.075-.013-.173-.077-.252-.248c-.154-.43-.524-2.642-1.053-4.955a18 18 0 0 0-.732-2.371c-.268-.69-.685-1.043-1.34-1.043m-9.549 8.428c-.647 0-1.172.534-1.172 1.193c0 .656.548 1.196 1.172 1.195c.597 0 1.172-.536 1.172-1.195s-.525-1.193-1.172-1.193"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<path fill="currentColor" d="M24 12c0 6.62-5.372 11.986-12 11.986C5.373 23.986 0 18.62 0 12S5.373.014 12 .014C18.628.014 24 5.38 24 12m-9.67-5.291c-.754 0-1.144.476-1.437 1.055c-.397.78-.606 1.656-.819 2.636c-.27 1.244-.496 2.497-.748 3.744c-.06.294-.093.64-.209.916c-.062.15-.21.367-.38.198c-.192-.19-.258-.568-.313-.828c-.295-1.454-.573-2.912-.902-4.358a17 17 0 0 0-.731-2.34a1.54 1.54 0 0 0-.492-.681a1.34 1.34 0 0 0-.768-.27c-.06 0-.482.008-.888.276a1.6 1.6 0 0 0-.582.687c-.359.744-.636 1.587-.871 2.656a12 12 0 0 0-.266 1.62a.8.8 0 0 0 .125.488c.092.145.23.26.386.316a.77.77 0 0 0 .678-.056a.82.82 0 0 0 .362-.541c.107-.497.202-1.01.293-1.502c.045-.249.313-1.539.375-1.702c.028-.09.074-.249.162-.357c.083-.103.191-.102.27.006c.087.122.125.275.161.418c.077.304.301 1.515.57 2.732c.257 1.183.5 2.369.807 3.54c.141.532.393 1 .58 1.3c.244.39.632.619 1.063.627c.343.01.667-.105.943-.324a2.16 2.16 0 0 0 .649-.918c.392-1.002.612-2.098.826-3.16c.36-1.821.54-2.728.62-3.125c.027-.125.177-.754.218-.864a.6.6 0 0 1 .125-.255c.063-.066.168-.08.236-.014c.178.173.326.81.445 1.41c.112.584.24 1.165.36 1.748c.199.967.396 1.934.607 2.898c.185.853.424 1.449.768 1.936c.258.364.564.577.896.645s.696-.008 1.074-.243c.32-.198.606-.546.78-.963c.273-.652.432-1.422.578-2.181c.058-.305.114-.61.174-.9c.081-.395.116-.647.095-.934c-.024-.331-.314-.696-.699-.703c-.5-.013-.759.242-.846.705q-.222 1.203-.45 2.404c-.052.26-.021.578-.212.787c-.029.029-.118.109-.236.088c-.075-.013-.173-.077-.252-.248c-.154-.43-.524-2.642-1.053-4.955a18 18 0 0 0-.732-2.371c-.268-.69-.685-1.043-1.34-1.043m-9.549 8.428c-.647 0-1.172.534-1.172 1.193c0 .656.548 1.196 1.172 1.195c.597 0 1.172-.536 1.172-1.195s-.525-1.193-1.172-1.193"/>`;
</script>
cssCSS mask(随 currentColor 改色)
.neptune {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%2012c0%206.62-5.372%2011.986-12%2011.986C5.373%2023.986%200%2018.62%200%2012S5.373.014%2012%20.014C18.628.014%2024%205.38%2024%2012m-9.67-5.291c-.754%200-1.144.476-1.437%201.055c-.397.78-.606%201.656-.819%202.636c-.27%201.244-.496%202.497-.748%203.744c-.06.294-.093.64-.209.916c-.062.15-.21.367-.38.198c-.192-.19-.258-.568-.313-.828c-.295-1.454-.573-2.912-.902-4.358a17%2017%200%200%200-.731-2.34a1.54%201.54%200%200%200-.492-.681a1.34%201.34%200%200%200-.768-.27c-.06%200-.482.008-.888.276a1.6%201.6%200%200%200-.582.687c-.359.744-.636%201.587-.871%202.656a12%2012%200%200%200-.266%201.62a.8.8%200%200%200%20.125.488c.092.145.23.26.386.316a.77.77%200%200%200%20.678-.056a.82.82%200%200%200%20.362-.541c.107-.497.202-1.01.293-1.502c.045-.249.313-1.539.375-1.702c.028-.09.074-.249.162-.357c.083-.103.191-.102.27.006c.087.122.125.275.161.418c.077.304.301%201.515.57%202.732c.257%201.183.5%202.369.807%203.54c.141.532.393%201%20.58%201.3c.244.39.632.619%201.063.627c.343.01.667-.105.943-.324a2.16%202.16%200%200%200%20.649-.918c.392-1.002.612-2.098.826-3.16c.36-1.821.54-2.728.62-3.125c.027-.125.177-.754.218-.864a.6.6%200%200%201%20.125-.255c.063-.066.168-.08.236-.014c.178.173.326.81.445%201.41c.112.584.24%201.165.36%201.748c.199.967.396%201.934.607%202.898c.185.853.424%201.449.768%201.936c.258.364.564.577.896.645s.696-.008%201.074-.243c.32-.198.606-.546.78-.963c.273-.652.432-1.422.578-2.181c.058-.305.114-.61.174-.9c.081-.395.116-.647.095-.934c-.024-.331-.314-.696-.699-.703c-.5-.013-.759.242-.846.705q-.222%201.203-.45%202.404c-.052.26-.021.578-.212.787c-.029.029-.118.109-.236.088c-.075-.013-.173-.077-.252-.248c-.154-.43-.524-2.642-1.053-4.955a18%2018%200%200%200-.732-2.371c-.268-.69-.685-1.043-1.34-1.043m-9.549%208.428c-.647%200-1.172.534-1.172%201.193c0%20.656.548%201.196%201.172%201.195c.597%200%201.172-.536%201.172-1.195s-.525-1.193-1.172-1.193%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M24%2012c0%206.62-5.372%2011.986-12%2011.986C5.373%2023.986%200%2018.62%200%2012S5.373.014%2012%20.014C18.628.014%2024%205.38%2024%2012m-9.67-5.291c-.754%200-1.144.476-1.437%201.055c-.397.78-.606%201.656-.819%202.636c-.27%201.244-.496%202.497-.748%203.744c-.06.294-.093.64-.209.916c-.062.15-.21.367-.38.198c-.192-.19-.258-.568-.313-.828c-.295-1.454-.573-2.912-.902-4.358a17%2017%200%200%200-.731-2.34a1.54%201.54%200%200%200-.492-.681a1.34%201.34%200%200%200-.768-.27c-.06%200-.482.008-.888.276a1.6%201.6%200%200%200-.582.687c-.359.744-.636%201.587-.871%202.656a12%2012%200%200%200-.266%201.62a.8.8%200%200%200%20.125.488c.092.145.23.26.386.316a.77.77%200%200%200%20.678-.056a.82.82%200%200%200%20.362-.541c.107-.497.202-1.01.293-1.502c.045-.249.313-1.539.375-1.702c.028-.09.074-.249.162-.357c.083-.103.191-.102.27.006c.087.122.125.275.161.418c.077.304.301%201.515.57%202.732c.257%201.183.5%202.369.807%203.54c.141.532.393%201%20.58%201.3c.244.39.632.619%201.063.627c.343.01.667-.105.943-.324a2.16%202.16%200%200%200%20.649-.918c.392-1.002.612-2.098.826-3.16c.36-1.821.54-2.728.62-3.125c.027-.125.177-.754.218-.864a.6.6%200%200%201%20.125-.255c.063-.066.168-.08.236-.014c.178.173.326.81.445%201.41c.112.584.24%201.165.36%201.748c.199.967.396%201.934.607%202.898c.185.853.424%201.449.768%201.936c.258.364.564.577.896.645s.696-.008%201.074-.243c.32-.198.606-.546.78-.963c.273-.652.432-1.422.578-2.181c.058-.305.114-.61.174-.9c.081-.395.116-.647.095-.934c-.024-.331-.314-.696-.699-.703c-.5-.013-.759.242-.846.705q-.222%201.203-.45%202.404c-.052.26-.021.578-.212.787c-.029.029-.118.109-.236.088c-.075-.013-.173-.077-.252-.248c-.154-.43-.524-2.642-1.053-4.955a18%2018%200%200%200-.732-2.371c-.268-.69-.685-1.043-1.34-1.043m-9.549%208.428c-.647%200-1.172.534-1.172%201.193c0%20.656.548%201.196%201.172%201.195c.597%200%201.172-.536%201.172-1.195s-.525-1.193-1.172-1.193%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 neptune 加一点动效

单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。

neptune 呼吸动效演示

呼吸

透明度往复渐变,适合状态提示与在线指示。

css呼吸动效样式
.icon-neptune {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
neptune 旋转动效演示

旋转

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

css旋转动效样式
.icon-neptune {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标,供工程侧评估引用方式。

文件体积

1.74 KB

1,786 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

1

<path> ×1

风格

单色(跟随 currentColor)

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 1.74 KB(1,786 字节),图元 1 个,风格为单色(跟随 currentColor)。

常见问题

关于 neptune 图标的下载、商用与改色。

neptune 图标是什么?▾

它是 Simple Icons(simple-icons)开源图标集中的 neptune 图标,单色(跟随 currentColor),viewBox 为 0 0 24 24,文件仅 1.74 KB,矢量格式可无损缩放到任意尺寸。

如何下载 neptune 图标?▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。

neptune 图标可以商用吗?▾

该图标采用 CC0 1.0(CC0-1.0) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

如何修改 neptune 图标的颜色?▾

在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。