世界地图
OpenMoji
颜色与描边跟随预览参数实时变化,以下为常见界面中的渲染效果。
按钮内
输入框
导航
空状态
暂无内容
桌面 / 浏览器 / 按钮 / 导航栏
手机桌面 · App 图标
浏览器 · 标签页与站点
操作按钮 · 主次层级
底部导航 · Tab 栏
真实组件上下文中的渲染效果,代码可直接复制。
导航项
导航菜单
<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>主要按钮
立即开始
<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 组件
内联引入
import { IconIcon } from './icons';
function Nav() {
return <IconIcon className="size-4" />;
}状态徽标
已完成
<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>输入框前缀
搜索框
<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>功能卡片
功能名称
功能名称
功能的一句话说明。
<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-c4550d4759a408b8 { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }呼吸
透明度往复渐变,适合状态提示图标
.icon-c4550d4759a408b8 { animation: svg-breathe 1.8s infinite; }旋转
匀速循环旋转,适合加载中场景
.icon-c4550d4759a408b8 { 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 一键导出;下载前可在下方「预览参数」改色,导出文件同步生效。
Web、移动端、桌面端与小程序共 17 种格式;代码基于当前预览颜色生成,复制即用。
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M115.3 111.46H12.7c-5.52 0-10-4.48-10-10v-72c0-5.52 4.48-10 10-10h102.6c5.52 0 10 4.48 10 10v72c0 5.53-4.48 10-10 10" fill="#016ca2"></path><g fill="#016ca2"><path d="m63.96 59.81l-.03.01c-.24.09-.31.39-.15.59l1 1.21l.68-.58l-1.09-1.14a.39.39 0 0 0-.41-.09M47.73 78.96l-2.63-1.37c-.23-.12-.5-.19-.76-.19h-.76a.29.29 0 0 1-.28-.25c-.08-.84-.79-1.49-1.63-1.49h-.24c-.51 0-.99-.24-1.3-.65l-.36-.48c-.28-.37-.7-.6-1.16-.64l-1.96-.17a.2.2 0 0 1-.13-.05l-.32-.22c-.09-.06-.2-.07-.29-.01l-1.4.79q-.375.21-.81.21h-1.44c-.05 0-.09-.01-.13-.03c-.16-.09-.53-.37-.53-.99v-.83a.28.28 0 0 0-.28-.28h-.91a.28.28 0 0 1-.24-.42l.43-.75c.02-.04.04-.09.04-.14v-.66a.28.28 0 0 0-.28-.28h-.5c-.09 0-.18.05-.23.13l-.28.44c-.3.47-.82.75-1.38.75h-.4s-.65-.12-.65-.81v-2.51c.01-.08.07-.33.34-.5c.24-.15.8-.45 1.08-.6c.1-.05.23-.04.32.04l.53.49c.05.05.11.07.18.07c.17 0 .48.01.54-.02c.08-.04-.12-.4.36-.55c.49-.14.81.3.81.3l1.24 1.47c.09.11.25.13.37.05l.18-.12c.12-.08.16-.24.09-.37l-.02-.04c-.4-.69-.25-1.57.36-2.08l1.03-.87s.12-.08.18-.53c.04-.27.11-.67.16-.95c.11-.18.2-.35.31-.53l2.22-1.87c.13-.11.32-.08.41.06c.11.16.29.34.52.33c.35-.02 1.22-.49 1.56-.69a.27.27 0 0 0 .14-.24v-.35l-1.07.22c-.15.03-.3-.07-.33-.23l-.12-.7a.28.28 0 0 0-.27-.23l-1.07.12l.13-.32c.04-.11.14-.18.26-.2l2.64-.28c.24-.1.6-.24.84-.34l.53-.41c.13-.1.14-.29.03-.41l-2.97-3.04a.29.29 0 0 0-.32-.06l-.89.42c-.09.04-.2.03-.28-.02l-2.46-1.73a.27.27 0 0 0-.38.06l-.38.52c-.03.04-.05.09-.05.15l-.07 1.29c0 .08.02.15.08.21l.36.37c.12.12.1.32-.04.42l-.53.38a.28.28 0 0 1-.25.04l-1.2.2c-.17-.45-.54-.8-1-.96l-.6-.21c-1.09-.37-1.46-1.72-.73-2.6l1.17-1.41a.31.31 0 0 0 .05-.28l-.33-.85l-.06-.09l-1.32-1.41c-.52-.55-1.45-.27-1.57.48l-.01.08c-.07.44-.46.77-.9.77h-3.93c-.22-.05-.44-.09-.67-.14l-2.69-1.2c-.19-.05-.37-.09-.56-.14l-2.47-.16c-.23.04-.46.07-.69.11l-1.11.43c-.3.11-.62.14-.93.07l-5.49-1.17c-.33-.07-.68-.04-.99.1L4.6 49.52c-.19.08-.23.33-.07.47l.68.57c.19.16.08.48-.17.49l-1.02.02c-.15 0-.27.13-.27.28v.14c0 .15.12.27.27.28l.88.01c.3.01.38.41.11.53l-.76.34c-.11.05-.17.16-.16.28l.07.76c.07.75.63 1.35 1.38 1.47l.54.09c.26.04.32.38.1.51l-.17.1c-.18.11-.18.37 0 .47l.09.05c.08.05.17.05.26.02l4.63-2.09c.6-.27 1.3-.16 1.78.29l4.41 4.03c.32.29.51.7.53 1.13l.15 3.08c.02.35.14.68.36.95l4.34 5.4c.08.1.22.13.34.07c.15-.08.2-.27.1-.41c0 0 2.7
…调整颜色、描边或开启轮廓化,使用场景与用法示例实时跟随。
风格变体
细线 · 1.2px · 密集布局
常规 · 2px · 通用界面
加粗 · 3.5px · 大尺寸标题
世界地图 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。
在本页点击「下载」即可保存 世界地图 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
世界地图 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 12.05 KB,viewBox 为 0 0 128 128,共 6 个矢量图元。
世界地图 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。
在本页点击「下载 SVG」即可保存 世界地图 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。
世界地图 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。
在「预览参数」面板中调整颜色与描边宽度,使用场景与用法示例会实时跟随,确认效果后再复制或下载即可。
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
文件体积
12.05 KB
12,344 字节
viewBox
0 0 128 128
同时含 width/height 与 viewBox,可仅保留 viewBox 以自适应容器
图元总数
6
<path> ×6
风格
双色
2 种品牌色 · 纯填充
品牌色 #016ca2 的同色相色阶,点击复制色值;下方为同分类中可搭配使用的图标。
| 色值 | RGB | HSL | CMYK | 色名 |
|---|---|---|---|---|
| 1, 108, 162 | 200°, 99%, 32% | 99, 33, 0, 36 | 品牌主色 · 深青色 | |
| 194, 234, 255 | 201°, 100%, 88% | 24, 8, 0, 0 | 浅灰色 | |
| 133, 214, 254 | 200°, 98%, 76% | 48, 16, 0, 0 | 天蓝色 | |
| 62, 190, 254 | 200°, 99%, 62% | 76, 25, 0, 0 | 湛蓝色 |
世界地图 是一个通用类别的单文件 SVG 矢量图标,文件体积 12.05 KB,协议为™ 品牌商标(版权归品牌方,仅供识别参考)。可在本站免费下载 世界地图的 SVG 源文件与 PNG 位图(16-512px),支持自定义颜色与描边宽度、一键生成 Favicon 包,并提供 React / Vue 组件代码与 Data URI 引用。
同名不同风格的版本,点击查看与下载
Search for a command to run...