简介面向UI设计师、产品经理及国际化产品团队这份Sketch国旗图标集收录了260多个国家的国旗矢量素材一套即可覆盖全球主要国家适配移动应用、响应式网站、地图导航、教育课件和跨国会议宣传等场景。压缩包约89.05MB整体采用Sketch格式矢量元素可自由缩放、改色也能无缝集成进现有设计系统图标集提供圆形、图钉、方形、矩形、六边形等多种常用外形变体便于一键切换地图标记、按钮、列表缩略图或展示组件免去逐国绘制与重复适配的琐碎工作。统一的设计语言让视觉输出更整洁尤其适合需要快速产出多语言/多区域版本的中高级UI设计师。下载后随包附带的Read Me说明可作为合规参考帮助使用者了解各国国旗使用规范与授权边界降低商业项目侵权风险。已有1841人学习浏览整体使用门槛不高解压即可用于实际项目能够明显提升全球化设计效率。1. 拿到 260 多个国旗图标先别急着解压这包 Sketch 素材值不值得用做海外落地页、多语言站点、或者给 App 配一套国家选择列表时最磨人的不是布局是国旗。从图标站一个个下载拿到的是分辨率随缘的 PNG放大发虚、白底去不干净、名字还经常是“flag_china_01”这种谁也看不懂的命名。等你凑齐十几个国家半天就过去了。260 多个世界各国国旗图标集这种压缩包的价值在于一次把国家和地区旗帜收齐而且是以 Sketch 源文件这种能编辑、能换色、能按符号复用、能导出多倍图的形态交付不是让你当图片收藏的。适合三类人做界面设计稿要快速出图的设计师要往 H5 或客户端里塞国旗资源的开发以及做多语言内容运营时需要一套统一视觉素材的编辑。这篇文章不聊怎么找资源聊拿到 zip 之后怎么验收、导入、改造成可复用资产以及在哪里翻车。2. 拆开 zip 看清家底名录、命名与矢量的三个真相2.1 默认解压路径为什么我劝你别用鼠标双击macOS 双击 zip 会自动解压到同名文件夹看着方便但有两个问题一是 Finder 会把__MACOSX这类隐藏目录一并解出来里面有.DS_Store索引垃圾后面定时同步到团队共享盘会到处传染二是如果原压缩包本身是散文件打包的解压后可能直接撒在你的下载目录里把本来就乱的目录搅得更乱。我拿到这类素材包的第一件事从来是先mkdir一个独立目录再unzip进去。mkdir -p ~/Projects/flags_kits unzip -q 260_country_flags_sketch.zip -d ~/Projects/flags_kits find ~/Projects/flags_kits -type f | wc -l参数说明-q是安静模式只报错不输出每个文件名文件多的时候避免刷屏-d指定解压目标目录不写它就会原地解压最后的find | wc -l用来数文件个数先对账再动手。这里有个小原则解压这个动作本身不产生价值产生价值的是解压后你能快速说清“里面有什么、缺什么、哪个能用”。所以我还会顺手列一下文件清单而不是直接一头扎进 Sketch.zipinfo -1 260_country_flags_sketch.zip | head -20 zipinfo -1 260_country_flags_sketch.zip | grep -i __MACOSX\|\.DS_Store | wc -lzipinfo -1只输出文件名是查看 zip 内容最快的命令比解压再翻文件夹省事得多。第二行是数垃圾文件的条数如果结果不是 0说明这个压缩包不是用干净的 zip 命令打的后续分发前要先清洗一遍。2.2 矢量素材 vs 位图素材为什么这包 Sketch 素材能经得起改很多所谓“国旗图标包”其实是 PNG 集合只是换了个漂亮名字。真正能进设计系统的国旗素材必须是矢量。矢量意味着你把它从 16×16 拉到 512×512 边缘不糊意味着你可以直接改填充色做“灰色不可点击”状态意味着前端拿到 SVG 后可以内联进代码不需要为每个尺寸单独切图。Sketch 源文件形式的国旗素材内部一般有两种组织方式一种是一个.sketch文件里放了上百个 Symbol打开就能在符号面板里搜另一种是每个国旗单独一个.sketch文件或.svg文件适合当独立资源管理。260 多个这套按命名推断是前者居多但也可能混着 SVG。不管哪种你都要在解压后做一次分类检查别默认所有文件都是矢量。用file命令扫一遍最快first_file$(zipinfo -1 260_country_flags_sketch.zip | head -1) file $first_filefile看的是文件头魔数SVG 文件会返回XML 1.0 document textPNG 返回PNG image dataSketch 源文件实际上是一个带Sketch标识的容器。这一步能立刻拆穿那些“打着矢量旗号、实则是位图”的打包行为。混入少量位图不算致命但你要在验收清单里标注出来后面单独处理。2.3 快速盘家底统计数量、查缺漏、找异类拿到这套素材后我建议先做三件事数国家数量、列国名、找重复和别名。260 多个国家或地区听起来很多实际工作中你会遇到三类麻烦一是缺你正好要的那个小岛国二是同一个国家出现两遍一份叫英文名一份叫中文名三是部分地区的旗帜有多个版本打包者可能把不同版本都收进来了。zipinfo -1 260_country_flags_sketch.zip | sed s/.*\/// | sed s/\.[a-z]*$// | sort | uniq -d | head -10 zipinfo -1 260_country_flags_sketch.zip | wc -l这个命令把路径和扩展名剥掉后排序再用uniq -d找出重复命名重复项会在命名规范阶段决定去留。wc -l是看顶层文件条目总数和标题的“260 多个”对上号。我一般会在这一步直接生成一个基础清单存档后续每做一次整理就往里追加字段。3. 让图标进入 Sketch导入、改命名与导出切图参数3.1 导入 Sketch 素材库的两种方法添加素材库和拖入 SymbolsSketch 对这类素材包的支持比 Figma 更原生因为它有“素材库Library”机制。你不需要每次都从旧文件里复制粘贴图标而是把整套国旗包做成一个 Library所有设计稿引用它源文件更新后设计稿里能一键同步。常见做法是新建一个名为CountryFlags.sketch的库文件然后把解压后的国旗 SVG 或原素材拖进 Symbols 页面。两种导入方式一是菜单栏的Sketch Preferences Libraries Add Library…选中你的库文件之后设计稿可以直接从 Insert 面板搜国旗。优点是在组件面板里有搜索框输入 ISO 代码能快速定位适合有上百个符号的包。二是从 Finder 直接把国旗 SVG 文件拖进当前画板Sketch 会按 SVG 原始尺寸生成图层组适合只临时用一两面旗的场景缺点是不会自动变成 Symbol复用性差。我建议用第一种并且把库文件放在团队共享目录而不是本地磁盘。Sketch 的 Library 是监听文件路径的你的同事只要在新机器上把这个库添加上就能获得一致的国旗素材。注意别在导入后立刻把源 SVG 挪走Sketch 库依赖的是源文件路径路径断了符号会变成灰色。3.2 批量把国旗文件命名成 ISO 代码JXA 脚本这包素材的原始命名可能是“China.png”“中国.png”“cn.png”混在一起。中文名在 UI 上可以直接展示但在代码交付、自动化导出、做动画序列时全部会成为障碍。我的习惯是全程只用 ISO 3166-1 alpha-2 作为文件名主键中文名只做显示字段。这一步我会用一段 JXA 脚本在访达层完成重命名不改动素材内容。// 运行方式osascript -l JavaScript rename_flags.js const fm $.NSFileManager.defaultManager; const dir /Users/you/Projects/flags_kits/flags2024; const err Ref(); const list fm.contentsOfDirectoryAtPathError(dir, err); const map { 中国: CN, 日本: JP, 韩国: KR, 美国: US }; for (let i 0; i list.count; i) { const name ObjC.unwrap(list.objectAtIndex(i)); if (!name.includes(.)) continue; for (const cn in map) { if (name.includes(cn)) { const ext name.split(.).pop(); const newName map[cn] _flag. ext; fm.moveItemAtPathToPathError(dir / name, dir / newName, null); break; } } }逻辑说明先读取目标目录下所有文件然后用一个中英文映射表逐条匹配文件名匹配成功后把“中文名_flag.扩展名”改写成“ISO码_flag.扩展名”。扩展名原样保留不影响 Sketch 和 SVG 的识别。参数说明dir是绝对路径你换成自己的素材目录map表必须手工维护完整映射JXA 里中文键值对可以直接写脚本编辑器会按 UTF-8 处理。跑完再执行一次ls检查有没有同名的覆盖风险再关掉访达窗口。这个脚本只处理了最常见的命名清洗真正的坑在于映射表本身。两个字母的 ISO 码有 250 多个建议从 Unicode CLDR 数据源拉一份完整对照不要自己用键盘敲否则一定会漏掉圣赫勒拿。3.3 导出切图给前端尺寸、后缀和透明底设计稿做完前端要的一般是三种格式小尺寸 PNG 用于文档和客户端、SVG 用于 Web 内联、偶尔要一张 WebP 做列表页背景。Sketch 的导出面板可以同时生成多组切图关键是参数要一次设对。导出目标格式尺寸后缀备注客户端小图标PNG24×24 2x_2x.png透明底必须勾选Web 列表SVG不缩放_flag.svg导出前检查是否有外部链接字体文档引用PNG48×48_doc.png用于 UI 标注平台Sketch 的导出面板里SVG 导出最容易出问题的是文本转曲和渐变。国旗里有些纹理会用到渐变导出 SVG 时如果形状组里嵌套了混合模式前端还原时会有色差。我在这种素材包里一般先把所有国旗图层压平成单层形状再导出 SVG宁可牺牲一点可编辑性也要保证交付物和设计稿视觉一致。PNG 导出要注意命名后缀Sketch 默认会追加2x到文件名尾部如果前端框架已经写了资源映射这个后缀需要在前端的构建配置里统一约定。4. 把素材包变成团队资产Symbol 化与 manifest 清单4.1 命名规范iso2_code/国旗/语种_状态谁交付谁不迷路素材已经改好名了但放进设计系统之前还要定一套层级规范。我见过最省心的方案是按“类型/ISO码/状态”三层组织 Symbols顶层叫flags中间层是国家码最底层是状态变体比如flags/CN/normal、flags/CN/disabled。这样在 Sketch 的插入面板里所有国旗按国家码排序灰色禁用态排在正常态旁边视觉上就是一组。如果要做多语言版本别把语言代码放进 Symbol 名里比如不要用flags/CN/zh这种。语言是运行时数据不是设计资产。国旗图案本身不随着语言变化语言应该作为设计稿里外挂的文本 label或者由前端在代码里动态拼接。这一条是整个命名规范里最容易被人忽略、后期返工最麻烦的点。4.2 用 Symbol 和覆盖层实现换色与文字标记Sketch 的 Symbol 支持覆盖层Override这是把国旗素材做活的开关。同一面国旗放进按钮、列表头像、下拉箭头三个场景时尺寸和圆角不同但图形不该重复画。把国旗做成嵌套 Symbol外层容器控制圆角遮罩内层 Symbol 留出可替换的覆盖参数改起来只需要在 Inspect 面板里动一个下拉。// 给 Symbol 批量添加覆盖层的替代方案直接用 Sketch 的 Data 填充 // 不需要代码在设计稿中把要替换的文本图层和图片图层命名为 #iso2 即可这块我一般不写脚本硬处理因为 Sketch 的 Symbol 覆盖层在 UI 上配置比代码更可控。需要注意一个性能问题260 多个 Symbol 全部放进一个.sketch文件后文件体积会明显变大打开和自动保存都会变慢。常见做法是把国旗库拆成“常用 50 个”和“全部 260 个”两个库文件团队默认加载常用库需要冷门旗帜时临时添加全部库。4.3 输出一份 asset manifest给开发看得懂的材料清单设计侧整理得再干净开发拿到手后也无法直接感知“这套素材全不全”。所以我每次交付前会生成一份manifest.json把文件名、ISO 码、中文名、格式、文件大小全部列出来。开发可以直接拿这份清单去做代码枚举甚至用它做 UI 自动化测试的输入数据。// 用 Node.js 生成 manifest.json const fs require(fs); const path require(path); const dir ./flags2024; const files fs.readdirSync(dir).filter((f) f.endsWith(.svg)); const manifest files.map((f) { const iso2 f.split(_)[0].toUpperCase(); const size fs.statSync(path.join(dir, f)).size; return { file: f, iso2, name: iso2 Flag, format: svg, bytes: size }; }); manifest.sort((a, b) a.iso2.localeCompare(b.iso2)); fs.writeFileSync(path.join(dir, manifest.json), JSON.stringify(manifest, null, 2));逻辑说明遍历目录下所有 SVG 文件按文件名里的 ISO 码提取主键统计文件大小最后按 ISO 码排序输出 JSON。参数说明dir换成你的素材目录split(_)[0]依赖你先前的命名规范——如果文件名不是“ISO码_xxx.svg”的格式这里取第一段就会出错。所以这个脚本也是命名规范的验证器manifest.json生成出来后发现 ISO 码有两位数的、有带数字的说明前面重命名还有漏网之鱼。5. 避坑手册这包国旗素材最常见的五类翻车现场5.1 zip 伪加密能预览不能解压现象压缩包在访达里双击能看到文件列表甚至能直接预览但真正解压时弹窗让你输密码输入常见的通用密码又解不出来。这不是资源失效是典型的 zip 伪加密——压缩包本身没加密但文件头的通用标志位general purpose bit flag第 0 位被置 1解压软件就认为它加密了。原因部分下载站为了诱导用户访问或注册在打包时用脚本批量篡改了标志位。这也解释了为什么很多“zip 密码移除”工具能轻松破解因为根本没有真正的加密数据改个位就行。解决用一段 Python 脚本把标志位清掉注意这属于修复损坏的 zip不是破解密码也不涉及任何密码移除工具。# 用法python fix_zip_flag.py input.zip output.zip import sys def patch_zip(src, dst): data bytearray(open(src, rb).read()) i, n 0, 0 while i len(data) - 4: sig data[i:i 4] if sig bPK\x03\x04: # 本地文件头 flag_off i 6 elif sig bPK\x01\x02: # 中央目录头 flag_off i 8 elif sig bPK\x05\x06: # 中央目录结尾 break else: i 1 continue if data[flag_off] 0x01: data[flag_off] 0xFE n 1 i 4 open(dst, wb).write(data) print(fpatched {n} encrypted flags) if __name__ __main__: patch_zip(sys.argv[1], sys.argv[2])逻辑说明遍历 zip 二进制内容识别PK\x03\x04本地文件头和PK\x01\x02中央目录头把各自标志位字节的最低位清零。参数说明src是要修复的原 zipdst是输出路径建议先复制一份再跑别直接覆盖原文件。这个脚本对真正加密的 zip 无效但真正用密码保护的国旗素材包本来就少见。跑完后用zipinfo -v查看 Flag 位确认第 0 位为0x00即可正常解压。5.2 解压后多出 __MACOSX 和 .DS_Store文件夹里的垃圾广告现象解压完发现目录里多了一个叫__MACOSX的空文件夹每个子目录里还散布着.DS_Store文件。Finder 里看不见命令行ls -a能看见传到 git 仓库或者团队共享盘后所有人都会在文件列表里看到这些垃圾。原因macOS 的归档工具在打包时会把扩展属性和 Finder 索引信息写进 zipWindows 机器解压后这些内容就成了无意义文件。常见做法是解压后直接清理但我更建议在第二次分发前重新压制一份干净包。unzip -q 260_country_flags_sketch.zip -d flags_kits find flags_kits -name __MACOSX -type d -exec rm -rf {} 2/dev/null find flags_kits -name .DS_Store -type f -delete zip -r -X flags_kits_clean.zip flags_kits参数说明-X在 zip 打包时不保存扩展属性是克制垃圾文件的关键参数两个 find 分别删掉目录和文件-delete比-exec rm更快也更安全。清完后重新打包再分发给 Windows 同事就不会出现怪目录。如果是在团队内部长期维护我一般只保留解压目录不保留 zip 包因为 zip 本来就是分发用的中间产物源目录里散着压缩包反而容易被旧版本覆盖。5.3 部分国旗“矢量化”了但另一些是位图混装素材现象导入 Sketch 后发现大多数国旗是图层组点击能选到路径但有几个点下去是整张图片放大明显发虚。在素材包里最常见的是“袖珍国”和“地区旗帜”出这个问题打包者在收集时找不到矢量源就随便塞了一张 PNG 凑数。原因这不是打包者不用心而是某些国旗图案的官方矢量版本授权不明确或者来源本身就是位图。处理方式分两种如果只是少数几个面积小、不会放大的图标保留位图并标注“受限资源”在交付清单里单独列出如果是需要大尺寸展示的国旗比如国家选择页的顶部横幅那就不能将就必须重建矢量版本。我处理时会先把位图挑出来find flags_kits -type f \( -name *.png -o -name *.jpg \) -o -name *.jpeg bitmap_list.txt cat bitmap_list.txt列出来之后逐个决定是重画还是标注。重画要注意国旗通常有规定的比例和色值别用 Sketch 的自动描摹或图片转矢量工具硬转描摹结果会出现大量多余锚点和颜色断点放大后比位图还难看。正确的做法是找官方的几何定义重新画或者确认该国旗没有复杂的非几何元素后再做描摹。5.4 国名翻译歧义朝鲜韩国、科特迪瓦、刚果为什么总混现象设计稿里放了“刚果金”开发给 CSS 注释里写的是“刚果共和国”两个页面出来的旗帜不一样。还有“朝鲜”“韩国”在不同设计稿里一会儿叫 Korea一会儿叫 North Korea一会儿叫韩国根本对不上。原因中文世界的国名翻译和 ISO 英文名是两套系统特别是历史上更名过的国家和地区打包者可能按中文名归档也可能按英文名归档最怕的是混着来。解决方式只有一个以 ISO 3166 代码为主键中文名和英文名都只作为辅助字段。文件命名里只能出现CD、CG、KR、KP这种代码中文一律出现在 manifest 的注释字段里。[ { file: CD_flag.svg, iso2: CD, name_zh: 刚果金, name_en: DR Congo }, { file: CG_flag.svg, iso2: CG, name_zh: 刚果布, name_en: Congo }, { file: KP_flag.svg, iso2: KP, name_zh: 朝鲜, name_en: North Korea } ]用 ISO 码做主键之后翻译歧义就变成了显示层的问题不再干扰文件系统。这个表的反面教训是别完全相信某个语言包里提供的翻译多个语种的维护人叫法不同最后对不上号是常态。5.5 跨平台分发Windows 压缩、Mac 解压结构直接少一层现象同事在 Windows 上右键把一个素材文件夹“压缩为 zip”传到 Mac 解压后文件夹结构变了有些文件还打不开。你在 win10 右键菜单里生成的压缩包Mac 端用自带归档工具解压经常出现目录层级丢失。原因Windows 自带压缩和 macOS 自带解压在 zip 的目录记录细节上并不完全兼容尤其是中文文件名编码Windows 默认用的是 GBK 或者本地化编码macOS 按 UTF-8 解码就会出现文件名乱码、路径错位。解决团队内统一用命令行 ZIP 工具。任何一方打压缩包都用同一套规则cd /path/to/parent_dir zip -r -X 260_flags_clean.zip flags_kits -x *.DS_Store -x *__MACOSX*参数说明-r递归-X去掉扩展属性-x排除垃圾文件。分发时文件名也尽量用纯英文不要用“国旗图标集 最终版 v3(1).zip”这种名字免得客户端下载后 URL 解码出问题。这条是纯经验不写代码的话会反复踩。6. 交付前的最后一道自检脚本核对 260 多个资源的完整度6.1 自检脚本把漏网之鱼找出来在我准备把这套素材发给前端或放进团队库之前会跑一套五分钟的自检。先看数量对不对再看有没有混入位图再看文件命名是不是全部符合 ISO 码规范。下面是直接可以复用的一段脚本#!/bin/bash echo 国旗素材自检 echo 文件总数: $(find . -type f | wc -l) echo SVG 数量: $(find . -name *.svg | wc -l) echo PNG 数量(应接近0): $(find . -name *.png | wc -l) echo 垃圾文件: $(find . \( -name .DS_Store -o -name __MACOSX \) | wc -l) echo 不合规命名: $(find . -name *.svg | grep -vE /[A-Z]{2}_flag\.svg$ | wc -l) echo 自检完成 这套脚本重在验证三条硬性指标数量符合预期、位图混入接近零、命名全部合规。如果数量对不上先看是不是有人误删了文件如果 PNG 数量不是零按 5.3 的流程处理不合规命名出现则说明上一轮 JXA 脚本没有覆盖全。脚本输出后我习惯直接贴在交付群消息里让每个人一眼看到自检结论减少“你发的是不是全的”这种来回确认。还有一个验证技巧把这套素材导入 Sketch 后在符号面板里搜两个极端的国家一个是最常见的CN一个是字母排最后的ZW两边都搜得到基本就没大问题。另一个我常用的验证是把manifest.json里导出的清单和开发那边的枚举文件做一次 diff差一个字母都是命名规范的漏洞。这套自检脚本每次开发新项目前把它和素材目录一起拷贝到新工程里跑一次心里就有底。做素材管理这几年我发现最大的教训不是整理素材费时间而是不整理就交付、等开发问“怎么缺了 XX 国”之后再做临时修补。把命名规范和自检脚本固定下来之后这套国旗包在任何项目里都能用同一种方式被消费不再是一件每次重新折腾的事。希望帮到你。本文还有配套的精品资源点击获取