Heroicons 免費可商用的SVG圖示，同時可直接嵌入網頁中使用，並且利用CSS設定圖示的大小與顏色

　　現在網路上有不少的免費圖示資源可使用，因此就不用自己畫半天，同時這些圖示也都會以文字的方式，嵌入到網頁中，並且再透過CSS就可設定圖示的大小、顏色，雖然說這些圖示都不大，但每次總得載入一大包，而實際用到的卻只用到幾個，所以梅干比較常使用IcoMoon用多少載多少，但有個麻煩的是，當下回要再增加時，就比較麻煩些。

因此最近梅干發現一個好用的平台，不但可以將圖示以SVG嵌入到HTML的網頁中，甚至還可以控制SVG圖示的大小與顏色，相當的方便，由於是直接嵌入HTML，因此在顯示上也更加的快速，雖然目前的圖示只有226個，但對於一般常用的指示符號還算齊全，最重要的是直接嵌入至網頁中，這點讓梅干覺得很方便！身為網設的朋友，也千萬別錯過了。

---

Heroicons

---

Step1
首先在進入Heroicons的平台後，除了可從下方直接尋找外，也可透過上方的搜尋框，進行搜尋。

---

Step2
當找到喜歡的圖示後，將滑鼠移到圖示上方，再按一下「Copy SVG」。

---

Step3
接著再將它貼到HTML的網頁中，這邊梅干外層則利用了一個span標籤，將它包覆起來。

---

Step4
這時就可利用CSS來設定SVG的大小，但得特別注意到的是，在設定大小不是用font-size，而是用width甚至還可用color改變顏色。

---

Step5
除此之外，也可使用背景色，再加圓角框，就可將圖示，變成圓形鈕的效果，相當的方便也期待這平台，之後加入更多的圖示，而有需要的朋友，也趕快來試用一下囉！

---

#範例預覽：