選單

Evil Icons 簡約風格免費圖示,開放原始碼 SVG、AI 及 Sketch 三格式下載

Evil Icons 簡約風格免費圖示,開放原始碼 SVG、AI 及 Sketch 三格式下載

一般在開發專案或應用程式時會用到圖示集,不但能提升介面質感,也能讓使用者更容易學習使用,其實網路上也已有不少免費圖示素材可以下載、使用在自己的專案上,節省重新設計或繪製時間預算,當然要找到能夠搭配的圖案可能不是那麼容易,我傾向介紹一些較為簡單、線條乾淨的圖示組,這會更適合整合到各種設計風格。

Evil Icons 是我最近發現的免費圖示集,這是一套簡單、乾淨 SVG 圖示,開放原始碼,對於開發者來說只要幾行程式碼就能輕鬆調用,支援 Rails、Sprockets、Node.js、Gulp、Grunt 和 CDN,如果你想要自己稍作修改或重新設計,Evil Icons 還提供 SVG、AI 及 Sketch 圖示格式下載。

最快速套用 Evil Icons 至網站的作法是直接使用 CDN 也就是 jsDelivr 的 Evil Icons,只要將兩行程式碼插入網站(分別是最小化後的 CSS 和 JS),就能透過 CSS 來調用圖示或調整顏色尺寸。

Evil Icons 收錄的圖案總數有 70 個,三種圖示大小,線條簡單乾淨。

網站名稱:Evil Icons
網站鏈結:https://evil-icons.io/

使用教學

STEP 1

開啟 Evil Icons 網站後,可以看到所有圖示的預覽及代碼,這套圖示集是 SVG 格式,有 70 種不同圖案設計,其實都是蠻容易用到的圖案,在社群圖示部分也有台灣很多人使用的 Facebook、Google+ 和 Instagram。

Evil Icons

如果想預覽不同的大小尺寸呈現效果,可點選左上角的 S、M 和 L 來切換,圖示大小看起來有完全不同的感覺,也能運用在不同位置。

Evil Icons

STEP 2

如果你想要打包下載整套 Evil Icons 圖示,點選網頁上方的「Download」就會有下載選項,分別提供四種格式:SVG、Illustrator CC 及 Illustrator CS 適用的 AI 格式及 Sketch。

Evil Icons

STEP 3

因為 Evil Icons 屬於開放原始碼專案,可以在 GitHub 頁面找到更多詳細使用說明,其中我認為將圖示套用到網頁設計最快的方法就是利用 CDN 服務(jsDelivr),只要在網頁載入兩段程式碼,就能依照下方的範例來顯示圖示,非常好用。

Evil Icons

其他更多將 Evil Icons 套用到你當前開發專案的用法,除了從 GitHub 找到,也能自己把圖示下載下來研究一下,應該不會太難,這套圖示是由 Evil Martians 公司的兩位成員設計製作,以 MIT License 授權釋出。

分享本文