跳到主要内容
项目详情

Zwicon 是由 zwoelf 为自身工作创建、并分享给设计师与开发者使用的图标库,定位是一个快速、易用的 handcrafted iconset。它包含 566 个图标,分为 26 个类别,覆盖用户、通知、文件、设备、界面操作、原型和开发部署等多种使用场景。与单纯提供图片预览的图标集合不同,Zwicon 同时提供 Sketch、InVision Studio 和 Figma library,并准备了 SVG、JPG、PNG、PDF、IconJar 等文件格式;对开发者则提供清理过的 SVG 代码、CSS 安装方式和 Webfont 调用示例。图标按照 24px 网格设计,采用 8pt Grid System,统一使用 1px 线宽、2px 圆角和圆润线帽,便于在同一项目中保持视觉规则一致。

核心功能

566 个图标与 26 个分类

官网明确展示了 566 icons in 26 categories。图标内容包括 user-circle、bell-snooze、calendar、briefcase、camera、file-image、repository、qr-code、web、prototype 等,能够覆盖账户、通知、日历、文件、设备、网页和原型等界面语义。官网还展示了 Menu、Pathfinder、Align、Shape modes 等内容,说明图标集合同时考虑了常见产品界面和设计工具工作流。

统一的网格与绘制规范

Zwicon 的图标设计基于 24px grid,并与 8pt Grid System 配合使用。其设计原则明确为 1px line weight、2px corner radius 和 rounded line caps。这样的规范被应用于整套图标,设计者可以在项目中使用相对统一的线条、圆角和端点样式。

面向设计软件的资源库

Zwicon 随附 Sketch、InVision Studio 和 Figma library,适合直接放入这些设计工具的工作流。官网特别说明采用了 categorized naming,方便浏览和 override components。除设计软件资源库外,还提供 SVG、JPG、PNG、PDF 和 IconJar 文件,用户可以根据设计或交付环节选择对应格式。

清理过的 SVG 代码与开发调用

官网表示对 SVG code 做了尽可能的清理,以便开发者节省处理时间。页面展示了诸如 <i class="zwicon-cardboard-vr"></i><i class="zwicon-headphone"></i><i class="zwicon-deploy"></i> 的调用形式,说明图标可以通过对应的 zwicon 类名嵌入项目,而不必逐个手动绘制图形。

Webfont 使用方式

Zwicon 标注为 webfont ready。使用时先安装 CSS,再在 cheatsheet 中选择需要的图标,随后调用所选图标。官网提供了独立的 how to use 页面,并在主页面展示了 CSS 安装、图标选择和类名调用之间的使用关系。

使用方式

Zwicon 可通过设计资源库或文件格式使用:Sketch、InVision Studio 和 Figma 均有对应 library,同时提供 SVG、JPG、PNG、PDF 和 IconJar 文件。开发者可以安装 CSS,通过 cheatsheet 选择图标,再使用 zwicon-图标名称 形式的类名调用 Webfont。官网正文没有提到注册流程、客户端安装、自备模型 Key、API 或导入导出功能。

适用人群与场景

产品设计师可以在 Sketch、InVision Studio 或 Figma 中浏览分类、使用组件并覆盖组件;需要交付设计资源的团队可以按需求选择 SVG、JPG、PNG、PDF 或 IconJar 文件;前端开发者可以使用清理过的 SVG 代码,或安装 CSS 后通过 Webfont 类名把图标放入项目;正在制作网页、移动设备界面、菜单、支付、订单或原型相关界面的人员,则可以从对应图标类别中选择 user、shopping-bag、credit-card、prototype 等图标。

定价

官网提供名为“free download”的下载入口,因此正文明确支持免费下载。页面没有列出付费档位、订阅方案或具体价格,也没有说明免费使用的数量限制。

注意事项

官网表示图标库仍会随着团队工作、遇到问题以及发现缺失内容而更新 gallery。页面还说明团队正在为不同软件和工具准备 Axure RP、Adobe XD 和 Desktop font 支持,这些内容被列为 on the horizon,不能视为当前已经提供的功能。

566 个图标与 26 个分类提供 566 个图标,并按 26 个类别组织,覆盖界面、文件、设备和原型等内容。
多种设计软件资源库随附 Sketch、InVision Studio 和 Figma library,并采用分类命名方便浏览和覆盖组件。
多格式文件支持提供 SVG、JPG、PNG、PDF 和 IconJar 文件格式。
清理过的 SVG 代码官网对 SVG 代码进行清理,并展示了可用于项目中的图标类名调用方式。
Webfont ready安装 CSS 后可通过 cheatsheet 选择图标,并使用对应类名调用。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

Zwicon 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500