Icons8 の Free Icons を使ってみる

Icons8 について

公式サイト: 🔗 Free Icons | Icons8

使い方

(1) スタイルを決める

まず、アイコンのスタイルを決める。
例えば、Material Design Filled というスタイルを選ぶのであれば、Material Design Filled のところをクリックする。すると Free Material Design Icons というページに進む。

(2) カテゴリを決める

アイコンのカテゴリが表示されるので、どれかをクリックする。
例えば、Characters をクリックすると、Characters Icon Pack (PNG, vector) というページに進む。

(3) アイコンを決める

アイコンが表示されるので、どれかをクリックする。
例えば、Mongrol をクリックすると、このアイコンを利用するためのリンクなどが表示される。

(4) アイコンの使い方を決める

[Download], [HTML] などから利用方法を選択する。

[Download] の場合、PNG / SVG / EPS / PDF などのファイル形式や、サイズを指定することができる。

[HTML] の場合は、PNG と SVG があり、それぞれオプションが指定できる。
- PNG: [CDN], [Base64] (Icons8 のリンクも貼らないといけない)
- SVG: [inline], [img tag], [Background]

アイコンを編集することもできる。

アイコンを表示してみる

(1) Download による表示

(1-1) PNG: 24px

アイコン表示

(2) HTML による表示

(2-1) PNG: CDN

HTMLコード

<img src="https://img.icons8.com/material/24/000000/mongrol.png">

アイコン表示

Mongrol icon by Icons8

(2-2) PNG: Base64

HTMLコード

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGVSURBVEhLzZXPKkVRFIcPYSLewUAGCEOlREoZGCDXG5B4A3kGmVIGGMkzKHkBSZRCjDBAiRTx+46zbtc+e58/dyBffXXWb6+97t37du+N/gNjckOey5dEnslYq5tOeSS/cjyUHbIUQ/JZMuBersgB2ZrIM9mDpOdRDspCdMknycY92SZDtMt9SS97OHUmDZIj23DqPOixFzkgyGJE0ngns965Cyex6xomCLElaeJ+y7Iq2bsZVwHOJE19cRVFt5IabwgSfHm/pGZGCms27XomJMMYMk6Q4MvZ486pElwoSXCOG/iaarNQbrh1sCGUhXLDravBp2wiSLA8T4O9H9LNfzX3ECTU5i6+tV7py2N2JeFiXP0QbBa+tWVJzawUFcnisbSfCN8Qw11rlCeSmlkpWuSVpGGBoCT27i9lM4GPGUnTqxwlKAi975K90wRZrEsa3+S85OghWFuS9LJnTebC/duLIPfK8bul/eHwTHYqrY/hRX7eq0zJa2kDQtIzKeuCD2tO7sgLaX/6PG/LWVn7xfxrougb82u+NRmsyEIAAAAASUVORK5CYII=">

アイコン表示

Mongrol icon by Icons8

(2-3) SVG: inline

HTMLコード

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     width="24" height="24"
     viewBox="0 0 24 24"
     style=" fill:#000000;">    <path d="M 12 1 C 7.375 1 3.5536875 4.506 3.0546875 9 L 1 9 L 1 15 L 2.1992188 15 C 3.1312187 19.619 7.198 23 12 23 C 16.802 23 20.867781 19.619 21.800781 15 L 23 15 L 23 9 L 20.945312 9 C 20.446313 4.506 16.625 1 12 1 z M 12 3 C 15.86 3 19 6.14 19 10 L 19 11 L 21 11 L 21 13 L 20.050781 13 L 19.951172 13.890625 C 19.503172 17.943625 16.085 21 12 21 C 7.915 21 4.4968281 17.943625 4.0488281 13.890625 L 3.9511719 13 L 3 13 L 3 11 L 5 11 L 5 10 C 5 6.14 8.14 3 12 3 z M 5 11 L 5 13 L 7 13 L 7 17 L 10 17 L 10 14 L 14 14 L 14 17 L 17 17 L 17 13 L 19 13 L 19 11 L 16 11 L 16 13 L 14 13 L 14 11 L 10 11 L 10 13 L 8 13 L 8 11 L 5 11 z M 7 8 C 7 9.105 7.895 10 9 10 C 10.105 10 11 9.105 11 8 L 7 8 z M 13 8 C 13 9.105 13.895 10 15 10 C 16.105 10 17 9.105 17 8 L 13 8 z"></path></svg>

アイコン表示

(2-4) SVG: img tag

HTMLコード

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAgMCAyNCAyNCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij4gICAgPHBhdGggZD0iTSAxMiAxIEMgNy4zNzUgMSAzLjU1MzY4NzUgNC41MDYgMy4wNTQ2ODc1IDkgTCAxIDkgTCAxIDE1IEwgMi4xOTkyMTg4IDE1IEMgMy4xMzEyMTg3IDE5LjYxOSA3LjE5OCAyMyAxMiAyMyBDIDE2LjgwMiAyMyAyMC44Njc3ODEgMTkuNjE5IDIxLjgwMDc4MSAxNSBMIDIzIDE1IEwgMjMgOSBMIDIwLjk0NTMxMiA5IEMgMjAuNDQ2MzEzIDQuNTA2IDE2LjYyNSAxIDEyIDEgeiBNIDEyIDMgQyAxNS44NiAzIDE5IDYuMTQgMTkgMTAgTCAxOSAxMSBMIDIxIDExIEwgMjEgMTMgTCAyMC4wNTA3ODEgMTMgTCAxOS45NTExNzIgMTMuODkwNjI1IEMgMTkuNTAzMTcyIDE3Ljk0MzYyNSAxNi4wODUgMjEgMTIgMjEgQyA3LjkxNSAyMSA0LjQ5NjgyODEgMTcuOTQzNjI1IDQuMDQ4ODI4MSAxMy44OTA2MjUgTCAzLjk1MTE3MTkgMTMgTCAzIDEzIEwgMyAxMSBMIDUgMTEgTCA1IDEwIEMgNSA2LjE0IDguMTQgMyAxMiAzIHogTSA1IDExIEwgNSAxMyBMIDcgMTMgTCA3IDE3IEwgMTAgMTcgTCAxMCAxNCBMIDE0IDE0IEwgMTQgMTcgTCAxNyAxNyBMIDE3IDEzIEwgMTkgMTMgTCAxOSAxMSBMIDE2IDExIEwgMTYgMTMgTCAxNCAxMyBMIDE0IDExIEwgMTAgMTEgTCAxMCAxMyBMIDggMTMgTCA4IDExIEwgNSAxMSB6IE0gNyA4IEMgNyA5LjEwNSA3Ljg5NSAxMCA5IDEwIEMgMTAuMTA1IDEwIDExIDkuMTA1IDExIDggTCA3IDggeiBNIDEzIDggQyAxMyA5LjEwNSAxMy44OTUgMTAgMTUgMTAgQyAxNi4xMDUgMTAgMTcgOS4xMDUgMTcgOCBMIDEzIDggeiI+PC9wYXRoPjwvc3ZnPg==">

アイコン表示

(2-5) SVG: Background

スタイルシートを使い、背景とする。

HTMLコード

<div class="icons8-mongrol"></div>

CSSコード

.icons8-mongrol {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAgMCAyNCAyNCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij4gICAgPHBhdGggZD0iTSAxMiAxIEMgNy4zNzUgMSAzLjU1MzY4NzUgNC41MDYgMy4wNTQ2ODc1IDkgTCAxIDkgTCAxIDE1IEwgMi4xOTkyMTg4IDE1IEMgMy4xMzEyMTg3IDE5LjYxOSA3LjE5OCAyMyAxMiAyMyBDIDE2LjgwMiAyMyAyMC44Njc3ODEgMTkuNjE5IDIxLjgwMDc4MSAxNSBMIDIzIDE1IEwgMjMgOSBMIDIwLjk0NTMxMiA5IEMgMjAuNDQ2MzEzIDQuNTA2IDE2LjYyNSAxIDEyIDEgeiBNIDEyIDMgQyAxNS44NiAzIDE5IDYuMTQgMTkgMTAgTCAxOSAxMSBMIDIxIDExIEwgMjEgMTMgTCAyMC4wNTA3ODEgMTMgTCAxOS45NTExNzIgMTMuODkwNjI1IEMgMTkuNTAzMTcyIDE3Ljk0MzYyNSAxNi4wODUgMjEgMTIgMjEgQyA3LjkxNSAyMSA0LjQ5NjgyODEgMTcuOTQzNjI1IDQuMDQ4ODI4MSAxMy44OTA2MjUgTCAzLjk1MTE3MTkgMTMgTCAzIDEzIEwgMyAxMSBMIDUgMTEgTCA1IDEwIEMgNSA2LjE0IDguMTQgMyAxMiAzIHogTSA1IDExIEwgNSAxMyBMIDcgMTMgTCA3IDE3IEwgMTAgMTcgTCAxMCAxNCBMIDE0IDE0IEwgMTQgMTcgTCAxNyAxNyBMIDE3IDEzIEwgMTkgMTMgTCAxOSAxMSBMIDE2IDExIEwgMTYgMTMgTCAxNCAxMyBMIDE0IDExIEwgMTAgMTEgTCAxMCAxMyBMIDggMTMgTCA4IDExIEwgNSAxMSB6IE0gNyA4IEMgNyA5LjEwNSA3Ljg5NSAxMCA5IDEwIEMgMTAuMTA1IDEwIDExIDkuMTA1IDExIDggTCA3IDggeiBNIDEzIDggQyAxMyA5LjEwNSAxMy44OTUgMTAgMTUgMTAgQyAxNi4xMDUgMTAgMTcgOS4xMDUgMTcgOCBMIDEzIDggeiI+PC9wYXRoPjwvc3ZnPg==') 50% 50% no-repeat;
  background-size: 100%;
}

アイコン表示

メモ

SVG ファイルをDownload して使うのが良さそう。
CDN のサーバーに配置された画像ファイルを表示すると、Icon8 サービスがなくなった場合に画像が表示されなくなってしまう。
上記 PNG: Base64, SVG: inline, SVG: img tag, SVG: Background でもよいが、記述が煩雑でHTML自体の可読性が落ちる。