CSS Icons 除了提供SVG格式可直接嵌入網頁中，甚至還可直接嵌入Figma、Adobe XD

　　無論是在設計網頁，還是行動裝置的界面，圖示一直是目前不可或缺的設計要素，而以往免費的圖示資源，大部分都僅限於網頁使用，甚至是以字型的方式，當要使用時，再以文字的方式，將圖示嵌入網頁中，雖然這些免費的圖示資源，有提供SVG的格式，但要單獨使用時，就得宣告版權才可使用，實在有些不便。

最近梅干發現一個超棒的平台，裡面所提供的圖示，除了可以全部載入外，甚至也可用SVG的方式，嵌入到網頁中，最酷的是該平台所提供的圖示，除了可以給網頁用以外，甚至還可以給UI工具使用，像是Figma、Adobe XD因此身為設計的你，也趕快來看看囉！

---

CSS Icons

---

Step1
首先在進入CSS Icons的網站後，可點下方預覽所有圖示的按鈕，接著可從左邊的分類中，尋找所需的圖示。

---

Step2
當找到喜歡的圖示後，在左上方，分別就會看到CSS、SVG、TSX，而前二個是給網頁使用，TSX則是給UI工具使用。

---

Step3
切到SVG的頁籤後，再點右上的複製圖示，將SVG的原始碼給複製起來。

---

Step4
接著再貼入HTML架構中，立即就會顯示剛所貼上的圖示啦！雖然目前這個平台所提供的圖示只有700+不算多，但還算夠用，因此身為前端的視覺設計師，這平台可千萬別錯過了。