除了阿里的iconfont圖標庫，還有這10個開源SVG圖標庫

時間 2020-05-09

標籤除了阿里 iconfont 圖標還有開源 svg 欄目阿里巴巴简体版

原文原文鏈接

在國內，我想你們基本上都是用阿里的iconfont圖標庫，這裏介紹10個其餘的開源圖標庫，下面列出的全部庫都是徹底開源的，由於我已經檢查了許可條款和條件。css

Font Awesome

我相信咱們大多數人至少使用過一次Font Awesome圖標，直到如今爲止，由於它們是最先發布的高度流行的開源圖標庫之一。截至目前，他們的圖庫中總共有1,588個免費圖標和7,842個專業圖標。html

Font Awesome仍被普遍使用的主要緣由之一多是由於它們提供大量的各類圖標。咱們的網站實際上使用了Font Awesome Pro的雙色調圖標，咱們相信，與其餘相似網站相比，它使咱們的網站更具特點。前端

另外一個有趣的功能是Font Awesome提供了一個個性化的CDN連接，若是你建立一個賬戶，你能夠生成一個個性化的CDN連接。這樣，你能夠有條件地排除常規圖標，而僅使用雙色調圖標。git

固然，你也能夠經過直接複製粘貼SVG代碼來選擇僅包含幾個圖標，若是你在網站上使用的圖標不超過20-30個，我建議你這樣作。github

總之，有不少使用Font Awesome的方法，例如複製單個圖標的SVG源代碼，下載庫或使用公共或本身的CDN。他們的頁面很棒，能夠幫助你開始使用Font Awesome。web

Demo：https://fontawesome.com/
Github：https://github.com/FortAwesom...

Ionicons

Ionicons.io是另外一個由SVG驅動的開源圖標庫，具備457個獨立圖標，具備三種不一樣樣式：輪廓、填充和銳利。我特別喜歡輪廓和形狀設計的簡潔明快。我絕對建議你爲下一個項目嘗試一下。面試

若是你想使用ionicons，而不是隻使用獨立的SVG，你能夠在頁腳中加入如下腳本。shell

<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

而後，只需在HTML模板中添加如下元素，而後更改 name 屬性以匹配要顯示的圖標，以下所示：npm

<ion-icon name="heart"></ion-icon>

你能夠從他們的官方網站上閱讀有關基本用法的更多信息。bootstrap

Demo：https://ionicons.com/
Github：https://github.com/ionic-team...

CSS.gg

若是你是Reddit開發人員社區的活躍成員，也許你會注意到一個新的圖標庫已發佈，該庫僅使用CSS進行樣式設置。目前，它具備基於提醒，箭頭，代碼，設計等類別的704個獨立圖標。

關於使用CSS仍是SVG在性能上更好，曾有過一些爭論，但庫的建立者@astritmalsija)後來發佈了SVG、SVG Sprite、Figma和Adobe XD格式的第2版，以提供更普遍的實現。

開始使用CSS.gg就像運行 npm -i css.gg 命令同樣容易，而且稍後在head標記中包含如下樣式表：

<link href='https://css.gg/css' rel='stylesheet'>

固然，還有CDN替代方案，例如使用UNPKG或JSDelivr，以下所示：

<!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>

<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>

能夠從倉庫的正式入門指南中瞭解有關CSS.gg入門的更多信息。

Demo：https://css.gg/
Github：https://github.com/astrit/css.gg

Feathericons

Feathericons是另外一個很是漂亮和乾淨的圖標庫，包含282個SVG圖標。默認狀況下，它僅以SVG爲主要格式，但這也不要緊，由於這是目前推薦的圖標使用方式，由於它是最快的。

我喜歡在下載圖標以前配置圖標的大小、筆畫寬度和顏色。你還能夠經過單擊網站右上角的月亮圖標來切換明暗模式。

Feathericons入門就像下載SVG文件並將其包含在標記中同樣容易，方法是使用src或將其用做嵌入式SVG對象。

Demo：https://feathericons.com/
Github：https://github.com/featherico...

Eva Icons ❤️

Eva Icons是一組480個精美製做的開源圖標，分別以SVG和PNG格式提供。有兩種主要的輪廓和填充風格，我喜歡的是，你能夠在懸停時選擇框外縮放、脈動或搖動的動畫。

使用Eva Icons的入門方法很簡單，只需下載SVG或PNG文件後選擇使用的圖標或下載整套圖標便可。你還能夠經過安裝NPM軟件包來包括Eva Icons，以下所示：

npm i eva-icons

Demo：https://akveo.github.io/eva-i...
Github：https://github.com/akveo/eva-...

Heroicon

Heroicons是由Tailwind CSS的建立者構建的另外一個很棒的開源圖標庫。它具備超過165個具備填充和輪廓樣式的獨立圖標，但每一個元素也提供深色和白色版本。圖標的外觀很是優質且製做精良。

這些圖標的入門很是簡單，只需單擊其中一個圖標並複製可當即在項目中使用的內聯SVG代碼。我喜歡他們還提供了Figma中的庫。若是你想包含全部的圖標，你能夠從公共資源庫中下載全部的SVG文件。

Demo：https://heroicons.dev/
Github：https://github.com/refactorin...

Bootstrap icons

幾周前，我經過將新的Bootstrap 5圖標與Font Awesome進行了比較。目前，它具備600多個由SVG驅動的自定義圖標，我認爲它在設計方面確實很出色。若是你喜歡將Bootstrap用做CSS框架，則應該考慮爲下一個項目使用Bootstrap 5圖標。

開始使用Bootstrap 5圖標就像複製SVG代碼同樣簡單，而後你能夠用你認爲合適的方式來使用它，不管是內聯使用，將其做爲圖片的源碼，仍是在CSS中建立僞代碼類。不論是哪一種方式，他們的網站都清楚地解釋了實現方法。

Demo：https://icons.getbootstrap.com/
Github：https://github.com/twbs/icons

Remix Icon

Remix Icon是一個Apache License下的2149個漂亮的開源圖標大集合。有各類各樣的圖標可供選擇，例如業務，通信，財務，地圖等等。絕對值得一看。

經過下載SVG或PNG版本，或者直接複製內嵌的SVG代碼到剪貼板上，Remix Icon的使用很是簡單。另外，您也能夠選擇將整個軟件包下載爲單個.svg文件或SVG Sprite文件。

Demo：https://remixicon.com/
Github：https://github.com/Remix-Desi...

Octicons

Octicons是一組超過100個開源圖標，Github也將其用於其主要網站。顯然，他們已經在經過改進圖標的設計和種類來開發庫的第二版。

Octicons的一個巨大優點是，你還能夠在React，Ruby，Rails，Jekyll和Javascript中將它做爲即用型軟件包得到。這是你能夠用來開始使用Octicons的全部軟件包。

Demo：https://primer.style/octicons/
Github：https://github.com/primer/oct...

Ikonate

最後但並不是最不重要的是，Ikonate是另外一個使人敬畏的開源圖標庫，它擁有約100個基於平面設計的高級圖標。它是根據很是寬鬆的MIT許可證慷慨受權的。

導出以前，你能夠輕鬆配置圖標的大小，邊框寬度，邊框和邊角以及顏色。在導出ZIP文件中，你將得到一個帶有全部選定內嵌圖標的html文件，還有一個包含單獨的SVG文件和一個雪碧圖的文件夾。

Demo：https://ikonate.com/
Github：https://github.com/mikolajdob...

最後，請給這些庫一個Github星，並讓他們知道他們所作的工做多麼出色，以支持這些庫。若是你還沒有決定在下一個項目中使用特定的圖標庫，請考慮與你的朋友或同事共享此列表。

文章首發《前端外文精選》微信公衆號

若是對你有所啓發和幫助，能夠點個關注、收藏、轉發，也能夠留言討論，這是對做者的最大鼓勵。

做者簡介：Web前端工程師，全棧開發工程師、持續學習者。

繼續閱讀其餘高贊文章

更多...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。