本期給大家整理了可商用的圖標網站,
你還在苦苦的畫 icon 嗎?
這些圖標網站可以解放你的雙手
公眾號:友設青年
一、IconPark
網址:http://iconpark.bytedance.com
IconPark 是字節跳動公司內部產品體系使用的官方圖標庫,現在可以免費使用了。
IconPark 圖標庫是一個通過技術驅動矢量圖標樣式的開源圖標庫,可以實現根據單一 SVG 源文件變換出多種主題, 具備豐富的分類、更輕量的代碼和更靈活的使用場景;致力於構建高質量、統一化、可定義的圖標資源,讓大多數人都能夠選擇適合自己的風格圖標。
IconPark的特點:
提供超過 2000+ 預設圖標、32 種圖標分類;支持 4 種主題和在線換膚:線性、填充、雙色、四色;網站提供多種便捷操作:複製 SVG code、複製 React 組件、複製 Vue 組件、下載 PNG、下載 SVG,無論是設計師還是開發者,使用起來都非常方便;針對前端開發者,還提供多種 NPM 包下載。
是不是很 nice ~
以後都不要畫了,在線調整完樣式後再下載 SVG,爽歪歪!
二、Remix Icon
網址:https://remixicon.com/
特點:
每一枚圖標都是按照統一標準進行設計,擁有完美像素對齊;設計風格一致,完勝那些拼湊混搭的圖標庫;設計簡潔易懂,特別是很多交互意義的圖標,創意十足又具有該有的代表性。
三、Iconfont
網址:https://www.iconfont.cn/
這個網站大家應該比較熟悉了,這個也是我使用比較頻繁的開源圖標網站。好處就是圖標多而全,可以說是滿足大部分設計師的需求。但是相對於 IconPark 來說,缺點就是不能在線調整圖標的小細節。所以這兩個網站可以結合使用。
Iconfont 也有整組的圖標庫,在產品初期,可以找一套完整的來使用,不夠的話再補充,提高效率。
四、Bootstrap Icons
網址:https://icons.bootcss.com/
Bootstrap 圖標庫 的設計初衷是與 Bootstrap 組件配合使用,從表單到導航組件等。Bootstrap 圖標庫 全部是 SVG 文件格式,能夠輕鬆快捷地進行縮放,保證清晰,並可以通過 CSS 設置顏色。雖然 Bootstrap 圖標庫 是為 Bootstrap 而開發的,但也可以應用在任何項目。
特點:
Bootstrap 是一個凝聚了設計與html/css/js 極致追求的一個移動優先的UI框架,多年來被大量使用在移動+PC的項目上,組件非常優美大氣。而 Bootstrap Icos 像它一樣,非常漂亮,風格中性,適合運用在很多項目上;每個圖標幾乎都有線性和填充兩種樣式,每一個質量都很高,這滿足絕大部分的交互需求;提供 SVG 文件格式,運用非常廣泛。
五、Iconmonstr
網址:https://iconmonstr.com/
特點:
iconmonstr 的圖標表現力非常豐富,非常適合用在PPT、企業官網設計下的大圖標塊以及 UI 界面上的大圖標模塊;風格為以簡單線條構成的圖標,收錄超過 4000+ 種圖標;由單一創作者維護,而且還在不斷更新中,這在很大程度上保證了圖標的質量;提供 SVG、EPS、PSD、PNG 和內嵌原始碼等各種格式下載,滿足了設計師和開發者的各種需求場景;iconmonstr 還有提供一套類似於之前推薦的 remix icon的 web 圖標庫 Iconic Font,有超過 300 個小型免費圖標,更加的簡潔精緻,很適合使用於網頁或界面開發。
六、Feather Icon
網址:https://feathericons.com/
特點:
每一枚圖標都是按照統一標準進行設計,具有完美像素對齊;同樣,也可以在線調整圖標樣式、顏色等,然後再下載。
以上 6 個網站為目前主流的開源圖標網站,根據每個網站的特點用在不同的場景下,會讓設計師事半功倍。