图标库新选择-IconPark ,字节跳动官方免费矢量图标库

602

图标库新选择-IconPark ,字节跳动官方免费矢量图标库

说到图标库设计师很容易想到阿里巴巴矢量图标库

然而我们今天介绍的这款图标库同样是免费可商用的图标库,1300+基础图标,28种图标分类,提供更多的选择

致力于构建高质量、统一化、可定义的图标资源,让大多数人都能够选择适合自己的风格图标,更是有规范、轻量的代码仓库,包括 React,Vue,SVG,让你的程序无法拒绝。

IconPark网页提供可自订图示功能,像是图示大小、线条粗细、图示风格(颜色)、边线和填充颜色、端点类型、拐点类型都能选择设定,直接在网页线上预览效果,透过SVG原始档案变化出不同的颜色效果,只需要改变一个SVG档案的属性就能切换多种布景主题设计。如果你需要更多资讯,IconPark也在GitHub 开放原始码提供完整原始文件。

不想看介绍的我直接贴地址,后面去官网阅读使用说明

一、官网地址

01.ByDesign IconPark【官网】地址

https://iconpark.bytedance.com/

02.ByDesign IconPark【图标库】地址

https://iconpark.bytedance.com/official

03.ByDesign IconPark【使用教程】地址

https://bytedance.feishu.cn/docs/doccnLPwy983J6oaMu5Zfpm166f

二、使用教学

步骤01

打开IconPark 后可以看到许多图标,从左侧选单选择图示类别,或者顶部有搜索框直接搜索,每个图标会有预览、中文说明和英文名称,右侧是调整图示大小、线条粗细、图示风格颜色的工具栏位。

IconPark 依照主题对图案进行分类,包括基本图示、人群、书籍、内容编辑、天气、手势、方向、交流、医疗健康、声音、时间、图表、抽象等等相当详细,使用者可以很容易找到自己需要的图示图案。

步骤02

点选图标可以勾选,以便稍候批次下载、一次取得所有选择的图示。如果点选图示选单,可以快速复制SVG、React 和Vue 代码(贴上就能使用),或是直接下载SVG、PNG 格式。

步骤03

若你觉得每个图示标示中文描述和名称看起来很杂乱,无法很仔细查看这些图案,从右上角也能切换不同预览模式,让它只有单独显示图示图案而没有其他信息。请看下面的Gif

步骤04

从右侧的编辑器可以调整图示大小、线条粗细、图示风格(颜色)和线条颜色,设定后预览模式会自动更新,就能立即查看新的图示效果。

比较特别的是IconPark提供线性、填充、双色和多色的图示风格,若你觉得预设线性设计看起来太过单调无趣,也可以选择不同风格加入颜色,颜色部分可供使用者自订,例如选择多色模式下可自订外框线条颜色、外部填充颜色、内部线条颜色和内部填充颜色,就可以制作出看起来更生动活泼的彩色图示集。

你以为这就结束了???既然是Figma相关的文章,怎么可能从头到尾不带Figma,这显然很不科学!!

figma用户请看下面的Mr.Biscuit给大家已经整理好的figma社区资源-Byte Dance Icons Open Source

三、Figma社区资源-Byte Dance Icons Open Source图标库

图标资源地址:

https://www.figma.com/community/file/898096768838677942

FIgma图标库作者主页:

https://www.figma.com/@MrBiscuit

记得给作者点赞哟!

四、更多关于figma的文章教程或资源请关注

语雀团队地址:https://www.yuque.com/figma

关注我:https://www.yuque.com/houhuan

或者关注我的网站:www.uifig.com

Figma交流QQ群:667916742

共享资源

免费用于Figma的低保真Lo-Fi线框套件-figma精选社区资源推荐

2020-12-14 1:52:32

干货插件

设计软件Figma不用懂英语也能学,附学习Figma方法

2020-9-27 7:51:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索