简介：这份Sketch格式图标库收录了260多个国家的国旗矢量素材，目标用户是界面设计师、前端工程师与品牌物料制作团队，可广泛用于移动应用、响应式网页、国际业务报表、在线地图及海外运营活动等。素材按Sketch源文件组织，所有图标均可自由调整尺寸、颜色与导出格式，兼容Sketch的Symbol与共享样式，能够快速融入既有设计系统，免去逐个创建和反复调整的麻烦。资源包内部按展示形态划分出圆形、图钉、六边形、方形、矩形等子集，分别对应地图定位、按钮图标、信息图表等常用场景；同时附带Read Me说明文档，交代授权、版权与合规建议，帮助团队在商业环境中规范使用各国旗帜。整包容量约89.05MB，以.sketch源文件为主，另有HTML格式说明档案，目录结构清晰易检索。上线至今已有1841人浏览学习，统一的插画风格和完整国家覆盖度，尤其适合全球化产品与多语言项目，能明显提升多区域标识的产出效率与视觉一致性。
1. 260 多个国旗的 Sketch 图标集：先搞清资源边界，再决定怎么接进项目
做国际业务后台、海外旅行 App 或者在线教育平台时，最烦人的不是找不到国旗素材，而是找到的国旗风格散：不同图标站下载的描边粗细不一致，圆角、底色、比例五花八门，摆进同一个页面，拼凑感一眼就能看出来。这套「260 多个国家国旗图标集」把全球主要国家和地区的国旗做成了 Sketch 矢量 symbol，并按 circle（圆形）、pin（图钉）、hexagon（六边形）、square（正方形）、rectangle（横向矩形）五种载体打包。它解决两件事：一是覆盖够全，260 多个国家和地区不用再逐个翻图标库；二是风格统一，所有国旗收进同一种形状骨架，视觉层级干净。适合 UI 设计师、数据可视化同学，以及需要把国旗切成 SVG 交付前端的工程师。
2. 解包看结构：五种载体、命名规律和准确度边界
拿到 zip 不要急着拖进 Sketch。先解压，把目录结构看清，再决定怎么接入。很多素材包从网盘下载后会有一层套娃结构，外层 zip 套内层文件，不先解开，后面引用路径很容易乱。
2.1 zip 里到底有什么：目录结构和命名规律
用命令行解压并查看两层目录：
mkdir flag-icons && cd flag-icons unzip ../260多个国家国旗图标集_sketch素材下载.zip find . -maxdepth 2 -type d | sort说明：
mkdir先建一个干净目录，避免 zip 解出来的内容散落在桌面；unzip带路径参数，解压后如果出现同名顶层文件夹，后续引用不会和别的文件混淆；find -maxdepth 2 -type d | sort只列两层目录，目的是快速确认子文件夹命名，以及有没有.DS_Store这类系统垃圾文件混进来。
常规解压结果会看到：circle/、pin/、hexagon/、square/、rectangle/和Read Me.html。这五个子目录对应的使用场景差别很大，先想清楚再下手：
| 子目录 | 形状 | 典型场景 |
|---|---|---|
| circle | 圆形 | 头像、筛选按钮、列表圆标 |
| pin | 图钉 / 水滴定位 | 地图标注、位置选择 |
| hexagon | 六边形 | 徽章、成就、科技感标签 |
| square | 正方形 | 表格单元格、规整色块列表 |
| rectangle | 横向矩形 | 详情页大图、国际站头部 Banner |
命名规律一般有两种：按国家英文名（China、United States 这种），或者按 ISO 3166-1 的 alpha-2/alpha-3 代码（CN、US 这种）。先搜一遍摸清命名方式，后面查找效率差很多。如果习惯搜中文名但库是按英文名排的，会漏掉条目，别急着断定“素材缺图”。另外，Read Me.html里通常写着授权范围、修改边界和字体引用，正式开工前一定打开看一遍，这一步能挡掉后面一半的坑。
2.2 为什么选 Sketch 而不是导出 PNG 或单独用 SVG
单独导出的 PNG 是位图，放大到详情页直接糊；SVG 虽然是矢量，但一个文件一个图，没有组织成 symbol 体系，每次都要手动拖进画板再排版。Sketch 的 symbol 机制解决了批量替换问题：整个素材包可以作为一个 Library 加载到库面板，文档里拖一个实例出来，然后通过右侧的覆盖层切换国家，不用复制粘贴，也不用改底层。
从设计效率和团队协作角度看，这套格式的优势明显：
| 对比维度 | Sketch symbol | PNG | 散装 SVG |
|---|---|---|---|
| 放大清晰度 | 矢量，无限缩放 | 到 2x/3x 就明显发虚 | 矢量，清晰 |
| 批量换国家 | 覆盖层一键切换 | 需手动替换文件 | 需手动替换 |
| 样式统一 | 库文件统一管理 | 各导各的容易走样 | 元数据零散 |
| 前端交付 | 直接导出 SVG/PDF | 需多倍率出图 | 可以直接交付 |
限制也要说清楚：素材包里 260 多个“国家和地区”并不代表全部获得公认，个别地区旗帜会混在主列表里。严谨的项目里，使用前需要按自己的国家清单对一遍，避免把地区旗当成独立国家放进正式页面。
3. 真正用起来：导入库、按国家调用和三种落地姿势
这一章讲怎么让这套素材在项目里真正跑起来，而不是躺在素材库里吃灰。核心动作是三步：接入 Library、按国家调用、把五种载体用对场景。
3.1 两步变成 Sketch 库：别直接拷贝粘贴
第一步，解压后找到其中的.sketch主文件，双击打开；第二步，通过 Sketch 的「偏好设置 > 库」或「Sketch > 库 > 添加库」把这个文件加入并启用。之后新建任意文档，在组件面板（Insert > Symbol）里就能看到这批国旗 symbol。
为什么不建议直接打开文件复制粘贴？直接复制会把整个 symbol 定义复制进当前文档，团队协同时别人看到的是孤立图层，素材更新后所有旧文档不会自动同步。通过 Library 引用后，后续素材包升级，所有引用过它的文档在重启 Sketch 后可以一键替换为新版本，这才是团队资产该有的用法。
3.2 三种落地姿势：列表、地图、Tab 栏
列表/选择器场景，比如注册页的国籍下拉列表，用circle或square最稳。固定一个 24×24 或 32×32 的 frame，把 symbol 拖进去，通过覆盖层切换国家，视觉上整齐；hover 状态可以单独做一个灰色版本，不要用透明度硬撑。
地图场景用pin。图钉的锚点在底部尖端，但 Sketch 里 frame 对齐默认基于整个画板，如果图钉底部留了一圈空白，摆在地图标注点上会对不准。把 pin 实例拖进画板后，手动把 frame 底部和标注点中心对齐，而不是顶部对齐。这个细节第一次用的人几乎都会翻车。
国际站头部或语言切换 Tab 用rectangle。rectangle 最接近真实国旗的长宽比，适合放大看；搭配文字国名排进表格，观感比圆形正式。它不适合塞进小尺寸 Tab，字符一多，横向空间就被吃掉了。
3.3 Overrides 切换国家与批量导出 SVG
Sketch 的 symbol 实例选中后，右侧检查器会列出可替换的覆盖项，直接下拉切换国家，不用进底层图层改任何东西。如果素材包里五个子目录是五个独立.sketch文件，而不是同一个文件里的五组 symbol，需要先手动合并到一个主文件再作为库使用——五套文件分开引用，每次切换载体都要切换文件，效率很低。
给前端交付时，我一般直接用 sketchtool 批量导出 SVG，而不是手工导出：
sketchtool export slices 国旗图标集.sketch --output=./exports --formats=svg --scales=1,2说明：
sketchtool是 Sketch 自带的命令行工具，路径随版本不同，macOS 下通常在Sketch.app/Contents/Resources里；--output指定导出目录，避免文件散落在工程根目录；--formats=svg导出矢量格式，前端可以直接用路径资源，不需要再放大缩小；--scales=1,2同时导出 1 倍和 2 倍尺寸，适合需要兼顾高分屏的场景。
如果只需要某些国家，不要整个库导出，先建一个只放目标国旗的切片画板，再跑 sketchtool，输出体积小，前端也好管理。
4. 避坑与排查：比例、色彩、授权，五个坑一次说清
国旗素材看着简单，实际用起来翻车点比其他图标多不少。这一章把最常见的五类问题按“现象 → 原因 → 解决”拆开，每一条都是我或同行真实撞过的。
4.1 非标准比例：瑞士、梵蒂冈、尼泊尔为什么一眼就怪
现象：瑞士国旗放进矩形列表，比旁边国家明显矮一截，整体看着比例失调。
原因：国旗比例并不统一。瑞士和梵蒂冈是正方形 1:1，尼泊尔是异形双三角旗，素材作者为了整体风格统一，把非标准比例强行塞进预设的矩形或圆形画板，放大后视觉比例就被压缩了。
解决：使用前单独处理这类“异常比例”国家。瑞士和梵蒂冈优先用square载体，正方形形状本身不突出比例问题；尼泊尔最好用circle或pin承载，不要放进等宽矩形列表。做表格时给这类国家加一点内边距，视觉上会更协调。
4.2 细节简化：星条旗的星星位置和中国国旗的五星
现象：缩略图里没问题，一旦放到详情页大图，美国国旗的条纹道数和星星布局不对，中国国旗四颗小星的角度也明显偏。
原因：图标类素材为了小尺寸可读性，通常会简化图形细节，这是普遍做法。问题在于要分清“简化”和“画错”——简化是在保留识别特征的前提下减少视觉噪音，画错则是比例、数量、相对位置出了偏差。
解决：需要大图展示时，优先用与真实比例一致的rectangle载体，并对照官方参考图核对星星和条纹数量；列表缩略图可以继续用简化版，但详情页不要直接拿小图放大用。核对时重点看数量元素：条纹、星星、十字、太阳图案，这几类最容易错。
4.3 颜色偏差：Pantone 转 Hex 不是万能
现象：同一个红色，在国旗图标里和页面按钮放在一起时，看着要么偏艳，要么偏暗，整体色调不统一。
原因：国旗色的官方定义大多用 Pantone 专色，素材作者转 RGB/Hex 时用的色彩空间、参考版本不一样，导致同一种专色在不同作者手里呈现的 Hex 值差异很大。
解决：确定项目主色后，把常用国家的国旗色统一抽出来，做成 Sketch 的 Color Variables 统一管理。做深色模式时，用 HSL 微调而不是直接替换色值，否则整个国旗会一起“变色”。如果不确定以哪版为准，优先参考目标国家政府旅游或信息网站公开的标准色。
4.4 zip 伪加密与版本兼容：解压报错和打不开文件
现象：解压 zip 时提示需要密码，输入下载页标注的密码仍然失败；另一种情况是双击.sketch文件后，提示文件由更高版本创建，当前版本打不开。
原因：素材站为了防止网盘自动识别和抓取链接，可能会给 zip 套上“伪加密”——即修改 ZipCrypto 的标志位，部分压缩工具会误判为需要密码。Sketch 侧则是新版文件格式对旧版本不兼容，老版本软件读不了新文件。
解决：zip 报错先换 7-Zip 或 Bandizip 打开，伪加密文件在多数情况下可以直接把内容拖出来；如果确实有密码，仔细看下载页说明，密码通常写在简介里，不要在错误的输入框里反复试。Sketch 版本问题没有取巧办法，升级软件到主流版本，并让团队里所有人统一版本再协同。
4.5 命名不统一：同一国旗出现两个条目，怎么排查
现象：素材列表里同一个国家既有英文全称条目，又有 ISO 代码条目，统计国旗数量时算成了两个国家；也可能有地区性旗帜混在主列表里，不仔细看会误用。
原因：素材作者按一个固定词表命名时，可能同时保留了“英文简称”和“代码”两套命名规则，造成重复条目；部分地区旗帜命名接近，也容易被误伤。
解决：用 ISO 3166-1 的 alpha-2 代码与国家清单做一次比对，兜底检查漏项和重复项：
import os import re # ISO 3166-1 alpha-2 代码基准清单，实际使用放全量国家代码 iso_a2 = ['CN', 'US', 'JP', 'GB', 'DE', 'FR', 'BR', 'IN', 'RU', 'KR', 'SG'] source_dir = './flag_symbols' files = os.listdir(source_dir) for f in files: name = os.path.splitext(f)[0] # 匹配形如 CN / flag-CN / China(CN) 的名字 parts = re.findall(r'[A-Z]{2}', name) if parts: code = parts[-1].upper() if code not in iso_a2: print(f'[未收录] {name}') else: print(f'[无代码] {name}')说明：
re.findall(r'[A-Z]{2}', name)是提取文件名里连续两个大写字母作为候选 ISO 代码，实际命名中顺便提取到国家缩写也问题不大，脚本只是兜底；iso_a2列表需要替换成完整的国家代码表，示例只放了几个常用国家；- 脚本会把“无代码”和“未收录”两类文件打印出来，人工再决定以哪个命名标准为准，避免重复计数。
核对完命名，再对照项目需求清单删掉不需要的条目，导出的文件干净很多。
5. 进阶：把国旗图标集变成团队资产：色板、灰态与 SVG 交付
形成长期可用的资源，第一步不是猛干，而是把习惯固定住。我拿到任何一个素材包，第一件事一定是先读它的Read Me.html，里面写明了授权边界、可修改范围，还可能藏着字体依赖。这个习惯帮我绕开过好几次大坑。
把素材升级成团队资产，我会按四步做。第一步，从这套库里挑出项目实际用得到的 20 到 30 个国家，复制到一个新文档，重命名为Flag-Icons-Team，拖进团队 Library 单独管理，避免所有人共用 260 多个 symbol，组件面板里找图太慢。第二步，给常用国旗建 Color Variables，命名带上国家代码，比如Flag_Red_CN、Flag_Blue_US，后续统一换主题色时直接改变量，不用一个个 symbol 去翻。第三步，做灰态禁用样式。Sketch 里选中国旗图层，把混合模式设为 Color，再叠一层灰，彩色会变成灰色但形状轮廓保留，适合未选中的 Tab 项或不可用状态。第四步，交付前端时用 sketchtool 导出 SVG，而不是导出多倍率 PNG，前端拿到矢量路径可以自己做响应式缩放。
验证素材靠“三看清单”：看比例、看颜色、看数量细节。比例看国旗长宽比是否符合国家规范；颜色看主色是否偏色，拿官方 Pantone 对照结果为准；数量细节看美国国旗的星星条纹数、中国国旗五星的相对位置这类易错点。每一次导出前，把这三项过一遍，基本能挡住 90% 的返工。
以前我在一次官网改版里，把某个国家和它的属地区域旗帜弄混了，因为既没有先读 Read Me，也没有按代码核对，等到前端上线前才被运营发现，临时换图重新导出 SVG，折腾了大半天。从那以后，我每次用这套国旗素材，都强制走一遍“读说明 → 核对命名 → 抽查比例 → 导出前预览”的顺序，一次都没落过。希望帮到你。
本文还有配套的精品资源，点击获取
