Googleマテリアルアイコンも便利ですが、しっくりくるアイコンが見つからない場合に別の選択肢があると心強いです。
そこで今回ご紹介するのが、シンプルなアイコン素材が豊富に用意されている「Lineicons」。クセのないデザインで使いやすいと思います。
目次
Lineiconsとは
Lineiconsは、無料で商用利用可能なアイコン素材サイトです。有料版もありますが、登録不要の無料版でも1315種類のアイコンを利用できます。アイコンの色やサイズ・スタイルも簡単に変更可能です。SVGやPNGのほか、様々な形式でダウンロードできます。
無料版でできること
各アイコンごとに、次の項目を調整可能です。すべて直感的に操作できます。
- スタイル変更（2種類）
- タイプ変更（2種類）
- 色変更
- サイズ変更
- 回転
お好みに調整したアイコンを、以下の形式でダウンロードまたはコピーできます。
- SVG
- React
- HTML
- PNG
- Vue
- Svelte
- Base64
どんなカテゴリーがあるの？
上記ページの右側にカテゴリーが用意されています。ブラウザの翻訳機能を使えば、日本語で見やすいです。カテゴリーは非常に豊富で細かく分けてあるので、汎用度の高そうなカテゴリーをいくつかピックアップしました。参考にご覧ください。
- Communication（コミュニケーション）
- Design Tools（デザインツール）
- Devices（デバイス）
- E-Commerce（ネットショップ）
- Editting（編集）
- Files & Folders Icons（ファイルとフォルダ）
- User（ユーザー）
- Interface（インターフェース）
- Web Browser（ウェブ・ブラウザ）
ライセンス
商品プロジェクトに使用したり、改変、配布は問題ないです。そのままアイコンパックとして再販・配布することは禁じられています。
Lineicons Free Basic版はオープンソースであり、MITライセンスに基づきライセンスされています。個人または商用プロジェクトで使用、改変、配布することができます。ただし、他のソースから「アイコンパック」として再販または再配布することは禁止されています。
- 商用/個人使用:許可されています。
- プロジェクトへの埋め込みおよび再配布:許可されています。
- 帰属表示:歓迎しますが、必須ではありません。
- 他のソースまたはパブリック/プライベートドメインから、ファイルを「アイコンパック/アイコンフォント/アイコン」として再販または再配布することは禁止されています。
使い方
アイコンのカスタマイズ
お好みのアイコンが見つかったら上記箇所で、スタイル、タイプ、色、サイズ等を変更できます。回転させるカスタマイズがユニークですね。いずれも直感的で操作はかんたんです。
アイコンのダウンロード
下段にあるエリアからコードをコピーしたり、ダウンロードできます。SVG以外にもPNGやHTML、WEBPも用意されていますので、使い方に応じて形式を変更できるのが便利です。
コードを埋め込んでアイコンを表示する
記事やページにコード（HTMLやSVG）を埋め込んでアイコンを表示したい場合は、あらかじめサイトの<head>タグ内に、以下のコードを追加しておく必要があります。
<link href="https://cdn.lineicons.com/5.0/lineicons.css" rel="stylesheet">
Lineiconsのトップページにも記載があります。
TCDテーマの場合は、上記を テーマオプション > 基本設定 > カスタムCSS・スクリプト > ヘッダー用カスタムスクリプト にコピペしておくだけでOKです。
多くのTCDテーマには、カスタムスクリプト機能が実装されています。 テーマファイルを編集することなく、<head>タグ内に任意のスクリプトを出力可能です。当記事ではカスタムスクリプトの使い方をご紹介いたします。 テーマファイルを触らずにCSSを追加できるカスタムCSS機能につ...
TCDテーマにセットしてみる
TCDテーマには、アイコンをセットする前程のデザインのものがいくつかあります。
以下はデモサイトですが、こういった箇所にPNGやSVGのアイコン素材をセットできる仕組みです。
当記事でご紹介したLineiconsのほか、Googleマテリアルアイコンから、運営サイトにあった素材を見つけてみてください。
※なおWordPressサイトにSVG画像をアップするには次のプラグインが必要になります。
サイトのロゴ画像などに最適なSVG形式の画像。拡大しても画質が落ちないメリットがありますが、 WordPressには、SVG形式の画像をアップすることはできません。次のようにエラーが発生します。 そこで今回は、SVG画像をアップ可能にするプラグイン「SVG Support」と、Wor...
まとめ
シンプルなアイコン素材が豊富に用意されている「Lineicons」をご紹介しました。
- プレーンでクセのないデザインが中心
- 無料でも1300種類以上
- 直感的な操作でカスタマイズできる
- 対応ファイル形式が豊富
このような点が、Lineiconsの特徴といえます。
サイト運営者やWeb開発者の方は、Googleマテリアルアイコンなどと併用することで、きっと最適なアイコン素材が見つかるはずです。
WordPressテーマ集
コメント