设计神器iconmonstr！收录超过4000款免费图标素材网站

经过这么长时间的推荐，相信小伙伴们已经收藏了很多免费的 icon 资源。如果没有收藏，大家可 以再多浏览浏览优优，毕竟对我们设计师来说，自己绘制图标还是需要占用不少时间的，尤其是 在一些没有必要自绘的项目中，一个能直接使用的现成的 Icon 库几乎是必不可少的，能大幅减少 时间成本。本篇就再给大家推荐一款十分优质并且可免费使用的 icon 库神器！

神器介绍

本文要介绍的「iconmonstr（Icon怪）」是一个收录大量免费图标的网站，目前共有 316 个图 集、4512+ 款图标可供免费下载！由来自德国的资深设计师 Alexander Kahlkopf 创作，他拥有超过 15 年的图标设计专业经验，所有图标均可免费用于任何商业用途：

iconmonstr 全部的图标都有提供  PNG、SVG、EPS、PNG 这 4 种源文件类型，完美解决所有应用方向，值得一提 iconmonstr 所有图标都会提供对应的 CSS 代码，方便让开发小伙伴快速写出 Icon样式：

内容介绍

先给大家介绍介绍网站的长相吧，首先是网站首页：

网站的设计风格很简约很大气，但是功能按钮、入口繁多，进入网站的首页首屏内容如上图所示，一个一个介绍吧，以从左到右、从上到下来说明：

左上角三横的 ICON，列表按钮，点击后会呼出一行新的顶部导航：

字如其意，这几项内容都与常规的展示内容都一般无二，大家理解起来不难，点进去看看就明白它们都是什么意义了，这里就不过多赘述了。

回到首页，顶部的两项页签，网站的首页内容就是 ICON 页签的内容，不用特殊操作。而它后面的 Iconic font 页签点击之后则是一个另外的页面：

这个页面比较特殊，设计师小伙伴不要被它迷惑了，这个 Download 按钮对设计师来讲没有用处，因为这个版块是开发所需要的功能，比如 CSS 文件、CDN 地址什么的，所以大家知道就可以了，要是有前端经验的小伙伴可以多看看。

OK，该说到右上角了，右上角的大星号，是收藏夹，如果你在网站里收藏了一些 Icon，可以直接来这里浏览：

首页的搜索框跟一般的搜索框使用逻辑一样，不赘述了，不过建议大家键入英文搜素，这样比较精准。

下面说一下下图这块儿：

Collections（图集）入口，点击进去以后会展示按用途分类的各种icon，搜索定位 icon 类别十分方便：

Learn More 是个网站介绍页的入口，大家不用特意去浏览，因为跟使用 icon 的步骤没有关系：

首页的这两处按钮，是用来快速筛选 icon 样式的，点 Fill/Bold 就会立即筛选出填充/粗体的 icon，点 Thin 则会展示出线性 icon：

最后一个功能版块则是一个很为用户着想的体现：

我们可以进来这里给我们想要的 icon 类别投票，网站的运营者会根据投票结果，不定时向网站更新该类目的新 icon 进来，所以你想要啥要是网站目前没有，就尽情来投票吧！

下载方式

icon 的下载方式跟设计风格一样十分简洁，只需要 2 步即可，首先我们需要找到合适的 icon，这里为了缩短大家的理解时间，就直接用首页的 icon 举例了。

在首页的下面，找到 icon 列表：

然后随意点击一个 icon 进入详情页：

在详情页里点击选择我们需要的源文件格式：SVG、EPS、PSD、PNG，选择源文件类型之后，同意一下「I agree to the License Agreement」条款：

最后就可以点击蓝色的「Download」按钮就自动开始下载字体源文件了，比如我下载的是 SVG，就立即得到了一个 SVG 文件：

然后在 SVG 类型中，还可以点击< Embed >去生成 CSS 代码：

下载方式是不是很简单，方便到爆啊！

使用授权范围

网站中的所有 icon 都可以免费下载使用在个人项目中，在网站中有明确说明，但是不允许直接把 icon 使用在商业项目中作为 LOGO、形状、转售给第三方进行盈利，所以大家要明确一下实际项目边界，规避掉不必要的麻烦：

值得一试的4个理由

1. 网站版式简洁易识别
2. icon下载免费且可自由使用在个人项目中
3. icon样式优质不存在任何毛边
4. 图标支持多种格式并且对开发十分友好可导出CSS

结语

iconmonstr 是一个全英文网站，不过大家不用担心看不懂，毕竟现在的浏览器都支持中英文互译，而且网站的各项按钮基本都搭配了 icon，只看 icon 也能明白各个按钮的功能。快来试试它

吧，保证会给你一些意想不到的惊喜！

神器链接：iconmonstr

本文编辑：CCOA

使用过这款神器的朋友也使用过...