Keyline Icons：多套图标风格总不统一

13次阅读

获取下载链

微信关注「软件教程管家」公众号，回复 Keyline Icons （提取码 qjku）

Keyline Icons 是一套免费开源的开源图标集，专门给搭界面的人准备：它把 1114 个图标全画在同一个 24 乘 24 的格子上，每条线统一 2 像素，再按四种粗细、两种边角分开导出，同一套图标能派生出八千多个可用文件。对界面风格总不统一、为挑图标耗掉半天的人来说，它的价值不在图标多，而在换哪一张都不会忽粗忽细、版面纹丝不动。

项目信息

软件名	Keyline Icons
版本	原文未标明版本号
平台	网页端直接取用，前端项目整包引入，不限操作系统
图标数量	1114 个，统一 24 乘 24 网格、2 像素线宽
授权	图标与源码为 MIT 许可，商用无需署名；名称使用权不在许可范围内
费用	免费，无付费档，官方写明今后也不会有

Keyline Icons 开源图标集为什么能派生八千多个文件

答案不在排列组合，而在同一张底稿的系统化导出。每个图形都有四副样子：描边、双色、灰底黑细节、实心，每种都是 1114 个。描边那副是其余三张的底稿，线宽统一 2 像素。圆角那套是默认画法，每个转角按同一把尺倒圆，线头也收圆；尖角那套把转角逐个抹平重画，不是把圆角图一键拉方，换成尖角时版面、格子、文件名和外框全都一样。实心那套的做法是从形状里掏掉细节，要是某个图根本没东西可掏，比如柱状图，它就把描边那份直接拿出来，不会出现引入之后一片空白。另外，1114 个图标里有 125 个自带外框，60 个是方框，65 个是圆圈，容器包在图形外面那一层，图形本身没动，只是换了观感。整套按用途分成三十多类，找图时不必一列列扫。

Keyline Icons 版本选择与取用三条路

它没有按功能分层的付费版本，版本选择的问题就变成了取用方式的选择。最省事的一条是打开官网，跟逛宝藏网站差不多：看图、点开、选好粗细和边角，直接复制成矢量图或者一行引入语句，面板上留着最近打开过的三个图，两个候选能摆在一起比。想整包引入的话，官方给主流前端各留了一个包，一个图标一个组件，颜色默认跟着文字走。不做前端也不打紧，整套还挂在公开的图标服务上，别的写法官网上都写着；设计那边配了插件和社区文件，源文件全部公开。我的建议是：只用零星几个图标时直接在网页上复制，别为几个图整包引入；整套界面都要统一风格时再整包引入，一次定好粗细和边角，后面不要来回换。

Keyline Icons 安装步骤与必改设置

不装也能用：在官网挑一个图标，复制矢量图或者那行引入语句就够了。要整包引入，两条命令足够：前一条把整套搬进项目，后一条只取这一个图的文件。接进前端开发之后没什么要额外学的：组件收常规参数，颜色默认继承，整套矢量图都按同一套规矩导出。

先定粗细：描边、双色、灰底黑细节、实心四种里按界面层级选，工具栏要轻、空状态要有分量、按钮里用实心，不要混着来。
再定边角：圆角和尖角二选一，全站统一，不要一个页面圆角、一个页面尖角。
再定颜色规则：颜色默认跟着文字走，特殊状态再单独处理，不要给每个图标单独写颜色。
再定引入方式：零星取用走网页复制，成套使用走整包引入，两种方式不要在同一个项目里混用。
最后做一次全站扫查：把同一类图标放在一起看，确认粗细、边角和尺寸没有忽大忽小。

必改设置其实是四条成套规则。第一，粗细规则：同一层级的图标用同一副样子，层级变化才换粗细。第二，边角规则：全站只用一种边角，换边角等于换一套图标。第三，容器规则：带外框的 125 个图标只在需要容器的场景用，不要为了好看给所有图标加框。第四，修改路径规则：库里的文件是加工出来的产物，想改要回到原始设计源文件再重新生成，直接改导出结果是没用的。

Keyline Icons 适用人群与同类取舍

适合的人很清楚：手上有一整套界面、不想在配色和粗细上反复纠结的人；做工具栏、空状态和按钮等多种层级界面，需要同一套图标在不同分量下保持一致的人；缺设计资源、又希望找图省时间的人，三十多类分类可以直接定位。不能用的人也要说清：只需要一两个装饰图标、且对风格一致性没有要求的人，用它属于大材小用；想直接改导出文件来定制图标的人会走弯路，必须回到原始源文件；想把 Keyline Icons 这个名字也拿去用的人要注意，许可不含名称使用权，图标和源码本身可以商用无需署名，名字不在此列。与多数只给一种画法的图标库相比，它的取舍是把风格一致性做在前面，代价是前期要先定好粗细和边角规则，定好之后反而最省事。