跳到主要内容
网站首页

图标库

← Flagpack
科科斯(基林)群岛旗帜

科科斯(基林)群岛旗帜

cc

图标库
Flagpack
作者
Yummygum
许可
MIT ↗

正在读取图标颜色…

使用场景

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

按钮内

输入框

搜索科科斯(基林)群岛旗帜...

导航

科科斯(基林)群岛旗帜

空状态

暂无内容

场景预览

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

手机桌面 · App 图标

9:41
科科斯(基林)群岛旗帜

浏览器 · 标签页与站点

693a2fd6ff1b763f.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-693a2fd6ff1b763f { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

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

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

旋转

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

.icon-693a2fd6ff1b763f { 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 32 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none"><path clip-rule="evenodd" d="M0 0h32v24H0z" fill="#5eaa22" fill-rule="evenodd"></path><path clip-rule="evenodd" d="m24 7l-1 .732l.134-1.232L22 6l1.134-.5L23 4.268L24 5l1-.732l-.134 1.232L26 6l-1.134.5L25 7.732zm-1.037 6.679l-1 .732l.134-1.232l-1.134-.5l1.134-.5l-.134-1.232l1 .732l1-.732l-.134 1.232l1.134.5l-1.134.5l.134 1.232zM26 19l-1 .732l.134-1.232L24 18l1.134-.5L25 16.268L26 17l1-.732l-.134 1.232L28 18l-1.134.5l.134 1.232zm1-9.5l-.5.366l.067-.616L26 9l.567-.25l-.067-.616l.5.366l.5-.366l-.067.616L28 9l-.567.25l.067.616zM7 14A5 5 0 1 0 7 4a5 5 0 0 0 0 10m12.898.945c-.658 1.13-1.704 1.642-3.104 1.642a3.794 3.794 0 1 1 0-7.587c1.598 0 2.874.56 3.459 2.083c-.463-.46-1.18-.775-2.253-.735c-1.657 0-2.735 1.29-2.735 2.395S16.343 15.35 18 15.35c.833-.013 1.449-.165 1.898-.405" fill="#5eaa22" fill-rule="evenodd"></path><path d="M7.582 8.694s-.977 3.58-1.38 3.92c-.18.078 1.618 0 1.618 0s-.674-.295-.437-.688s.548-2.916.437-3.776s-.238.544-.238.544" fill="#5eaa22"></path><path clip-rule="evenodd" d="M7.79 8.827s1.049.314 1.049.85s.872 1.289.872.576s-.163-1.426-.518-1.426c-.354 0 .174-.48.477-.082s1.366-.037 1.15-.316c-.216-.28-.982-.628-1.11-.628c-.126 0 .873-.68 0-.68c-.871 0-.371.58-.962-.036c-.591-.618.252.3.252-.736s-.24-1.46-1.029-.878c-.79.582-.638.213-.919-.006c-.281-.22-.528.803-.218 1.012c.309.208.652.726.342.726c-.309 0-.527-.299-.527-.513c0-.213-.841-.591-1.64-.591s-.282.591 0 .591s1.544.43.913.43s.049-.318-.747-.318c-.795 0-1.72-.362-1.72.318c0 .681.795.982 1.043.681s.536-.81.536-.302c0 .507-.633.3-1.58.615c-.945.315-.674 1.144.455.942c1.128-.203 1.006-.192 1.46-.507c.452-.314 1.013-.227.553.278c-.46.504-.92 1.426-.46 1.426s.757.125.757-.362s.267-1.436.267-.835c0 .6.348 1.054.657.835s-.072-.902.28-.902c.354 0 .367-.162.367-.162" fill="#5eaa22" fill-rule="evenodd"></path></g></svg>

预览参数

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

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 科科斯(基林)群岛旗帜 图标

科科斯(基林)群岛旗帜 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。

在本页点击「下载」即可保存 科科斯(基林)群岛旗帜 的 SVG 矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

科科斯(基林)群岛旗帜 的品牌标志与名称版权归其品牌方所有,本站内容仅供学习与设计识别参考,请勿用于商标注册或误导性用途;商用前请确认品牌官方的使用规范与授权要求。文件体积 1.91 KB,viewBox 为 0 0 32 24,共 4 个矢量图元。

常见问题

科科斯(基林)群岛旗帜 图标是什么?

科科斯(基林)群岛旗帜 是通用分类下的矢量图标(SVG 格式),矢量特性意味着任意缩放不失真,适配网页、App、演示文稿与印刷物料。

如何下载 科科斯(基林)群岛旗帜 图标?

在本页点击「下载 SVG」即可保存 科科斯(基林)群岛旗帜 的矢量文件,或在下载面板中选择 PNG(16~512px)与 Favicon 包等导出方式;也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

科科斯(基林)群岛旗帜 图标可以商用吗?

科科斯(基林)群岛旗帜 为品牌标志,版权归品牌方所有,本站内容仅供识别参考;商用前请先确认对应品牌的使用规范与授权要求。

如何修改 科科斯(基林)群岛旗帜 图标的颜色?

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

SVG 健康报告

100/100

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

文件体积

1.91 KB

1,954 字节

viewBox

0 0 32 24

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

图元总数

4

<path> ×4

风格

多彩

3 种品牌色 · 纯填充

提取色值#5eaa22#feca00#915e2b

同色系图标

品牌色 #5eaa22 的同色相色阶,点击复制色值;下方为同分类中可搭配使用的图标。

#f1fbea#def5cc#bdeb99#97df5e#71cc29#5eaa22#3d6e16#213b0c
科科斯(基林)群岛旗帜 品牌色详表
色值RGBHSLCMYK色名
94, 170, 3494°, 67%, 40%45, 0, 80, 33品牌主色 · 橄榄绿
222, 245, 20494°, 67%, 88%9, 0, 17, 4米色
189, 235, 15394°, 67%, 76%20, 0, 35, 8薄荷绿
151, 223, 9493°, 67%, 62%32, 0, 58, 13薄荷绿

图标信息摘要

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

继续探索

相关搜索

暂无推荐

科科斯(基林)群岛旗帜 在其他图标库

同名不同风格的版本,点击查看与下载

Command Palette

Search for a command to run...