SWELLアイコン一覧。ショートコードとCSSコードも掲載！

2023年1月21日2023年2月2日

たくろー

WordPressテーマ「SWELL」で用意されているオリジナルアイコンを一覧でまとめました。

パッと使いたいなと思ったので、ショートコードとCSSのコードをコピペで使えるように整理したところ、なかなか便利なページになったので個人的にブックマークして使っています。

ほぼ自分用のメモですが、よろしければご活用ください。

カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。

「そもそもSWELLとは」については、下記の記事をご参考ください。

SWELLで使えるアイコンの種類と使い方

SWELLでは、オリジナルのものとFont Awesomeのもの、2種類のアイコンが使えるよう用意されています。

オリジナルアイコンの使い方（ショートコード）

SWELLでは、icomoonで作成されたオリジナルアイコンをショートコードで呼び出せるようになっています。

ショートコードで使う場合、下記いずれかのコードになります。

[icon アイコン名]
or
[アイコン アイコン名]

アイコンのショートコードについては、SWELL公式サイトに掲載されています。

オリジナルアイコンの使い方（アイコンピッカー）

2023年2月2日に実装されたSWELL ver 2.7.3から「アイコンピッカー」機能が追加され、ショートコードを調べずとも簡単にアイコンを入力できるようになりました。

基本的には、このアイコンピッカーで表示させるのがもっともお手軽です。

なお同じ項目に、SVGタグを入力することで好きなアイコンを表示させられる機能も実装されています。

オリジナルアイコンの使い方（CSS）

あるいはCSSで表示させる場合は、下記の記述になります。

セレクタ{
font-family: icomoon;
content: "\e921";
}

特定のアイコンのCSS用コードを知りたい場合は、下記のようにデベロッパーツールをつかって調べます。

今回はこの手間を省くために、コピペで使えるよう一覧で整理しました。

Font Awesomeの使い方

SWELLでは、Font Awesome（フォントオーサム）のアイコンも使えるようになっています。

まずは「SWELL設定→Font Awesome」と進み、読み込み方を「CSS」か「Javascript」から選んで選択します。

CSS = CSS+Webフォントで読み込む
Javascript = Javascript+SVGで読み込む

基本的には、WebフォントよりSVGの方が表示が軽くて良いのではないかと考えますので、Javascript版をおすすめします。ただJavascriptが動作しないブラウザでは表示されない懸念はありますので、諸々の状況を考慮してご判断ください。

アイコンは下記のショートコードで呼び出します。

[icon class="アイコンクラス名"]

Font Awesomeのアイコン検索ページから、好きなアイコンを探して使用してください。

SWELLオリジナルアイコン一覧

ほぼ自分用メモですが、SWELLオリジナルアイコンの一覧を用意しました。

下記のとおり、独自基準でジャンル分けをして整理しています。宜しければお役立てください。

Webサービス系アイコン
矢印・数式系アイコン
ファイル系アイコン
インフォメーション系アイコン
装飾系アイコン

Webサービス系アイコン

ECサイト
Amazonのアイコン

[icon icon-amazon]

font-family: icomoon;
content:"\e91e";
color:#f90;

Webサービス
CodePenのアイコン

[icon icon-codepen]

font-family: icomoon;
content:“\e900”;

SNS
フェイスブックのアイコン

[icon icon-facebook]

font-family: icomoon;
content:“\e901”;

ブックマーク
feedlyのアイコン

[icon icon-feedly]

font-family: icomoon;
content:“\e902”;
color:#2bb24c;

Webサービス
githubのアイコン

[icon icon-github]

font-family: icomoon;
content:“\e903”	;

Webサービス
Google+のアイコン（※サ終）

[icon icon-googleplus]

font-family: icomoon;
content:“\e904”;
color:#dc4e41;

ブックマーク
はてなブックマークのアイコン

[icon icon-hatebu]

font-family: icomoon;
content:“\e905”;

SNS
インスタグラムのアイコン

[icon icon-instagram]

font-family: icomoon;
content:“\e906”;
color:#e4405f;

SNS
LINEのアイコン

[icon icon-line]

font-family: icomoon;
content:“\e907”;
color:#00c300;

ブログサービス
Mediumのアイコン

[icon icon-medium]

font-family: icomoon;
content:“\e908”;

SNS
ピンタレストのアイコン

[icon icon-pinterest]

font-family: icomoon;
content:“\e909”;
color:#bd081c;

ブックマーク
Pocketのアイコン

[icon icon-pocket]

font-family: icomoon;
content:“\e90a”;
color:#ef3f56;

RSS
RSSのアイコン

[icon icon-rss]

font-family: icomoon;
content:“\e90b”;
color:orange;

ブログサービス
Tumblrのアイコン

[icon icon-tumblr]

font-family: icomoon;
content:“\e90c”;

SNS
Twitterのアイコン

[icon icon-twitter]

font-family: icomoon;
content:“\e90d”;
color:#1da1f2;

ブログサービス
WordPressのアイコン

[icon icon-wordpress]

font-family: icomoon;
content:“\e90e”;

動画サービス
Youtubeのアイコン

[icon icon-youtube]

font-family: icomoon;
content:“\e90a”;
color:#ef3f56;

WPテーマ
SWELLのアイコン

[icon icon-swell]

font-family: icomoon;
content:“\e936”;

矢印・数式系アイコン

矢印
MOREアイコン

[icon icon-more_arrow]

font-family: icomoon;
content:"\e930";

矢印
ドロップダウンアイコン

[icon icon-arrow_drop_down]

font-family: icomoon;
content:"\e5c5";

矢印
ドロップアップアイコン

[icon icon-arrow_drop_up]

font-family: icomoon;
content:"\e5c7";

矢印
下矢印アイコン

[icon icon-chevron-small-down]

font-family: icomoon;
content:"\e910";

矢印
左矢印アイコン

[icon icon-chevron-small-left]

font-family: icomoon;
content:"\e911";

矢印
右矢印アイコン

[icon icon-chevron-small-right]

font-family: icomoon;
content:"\e921";

矢印
上矢印アイコン

[icon icon-chevron-small-up]

font-family: icomoon;
content:"\e912";

数式
マイナスアイコン

[icon icon-minus]

font-family: icomoon;
content:"\e919";

数式
プラスアイコン

[icon icon-plus]

font-family: icomoon;
content:"\e91c";

ファイル系アイコン

ダウンロードアイコン

[icon icon-download]

font-family: icomoon;
content:"\e914";

空のファイルアイコン

[icon icon-file-empty]

font-family: icomoon;
content:"\e924";

テキストファイルアイコン

[icon icon-file-text2]

font-family: icomoon;
content:"\e926";

写真ファイルアイコン

[icon icon-file-picture]

font-family: icomoon;
content:"\e927";

音楽ファイルアイコン

[icon icon-file-music]

font-family: icomoon;
content:"\e928";

動画ファイルアイコン

[icon icon-file-video]

font-family: icomoon;
content:"\e92a";

ZIPファイルアイコン

[icon icon-file-zip]

font-family: icomoon;
content:"\e92b";

フォルダアイコン

[icon icon-folder]

font-family: icomoon;
content:"\e92f";

インフォメーション系アイコン

アナウンスアイコン

[icon icon-megaphone]

font-family: icomoon;
content:"\e913";

TELアイコン

[icon icon-phone]

font-family: icomoon;
content:"\e942";

インフォメーションアイコン

[icon icon-info]

font-family: icomoon;
content:"\e91d";

ひらめきアイコン

[icon icon-light-bulb]

font-family: icomoon;
content:"\e915";

カートアイコン

[icon icon-cart]

font-family: icomoon;
content:"\e939";

バッドアイコン

[icon icon-thumb_down]

font-family: icomoon;
content:"\e8db";

グッドアイコン

[icon icon-thumb_up]

font-family: icomoon;
content:"\e8dc";

プロフィールアイコン

[icon icon-person]

font-family: icomoon;
content:"\e7fd";

メールアイコン

[icon icon-mail]

font-family: icomoon;
content:"\e92c";

バツアイコン

[icon icon-batsu]

font-family: icomoon;
content:"\e91f";

チェックアイコン

[icon icon-check]

font-family: icomoon;
content:"\e923";

公開時間アイコン

[icon icon-posted]

font-family: icomoon;
content:"\e931";

更新時間アイコン

[icon icon-modified]

font-family: icomoon;
content:"\e92d";

検索アイコン

[icon icon-search]

font-family: icomoon;
content:"\e92e";

クローズアイコン

[icon icon-close-thin]

font-family: icomoon;
content:"\e920";

メニューアイコン

[icon icon-menu-thin]

font-family: icomoon;
content:"\e91b";

アラートアイコン

[icon icon-alert]

font-family: icomoon;
content:"\e916";

はてなアイコン

[icon icon-hatena]

font-family: icomoon;
content:"\e917";

目次アイコン

[icon icon-index]

font-family: icomoon;
content:"\e918";

フラッグアイコン

[icon icon-flag]

font-family: icomoon;
content:"\e153";

設定アイコン

[icon icon-settings]

font-family: icomoon;
content:"\e8b8";

ロックアイコン

[icon icon-lock-closed]

font-family: icomoon;
content:"\e932";

オープンアイコン

[icon icon-lock-open]

font-family: icomoon;
content:"\e933";

ホームアイコン

[icon icon-home]

font-family: icomoon;
content:"\e922";

リンクアイコン

[icon icon-link]

font-family: icomoon;
content:"\e9c5";

引用アイコン（左）

[icon icon-quotes-left]

font-family: icomoon;
content:"\e977";

引用アイコン（右）

[icon icon-quotes-right]

font-family: icomoon;
content:"\e978";

値札アイコン

[icon icon-price-tag]

font-family: icomoon;
content:"\e935";

禁止アイコン

[icon icon-blocked]

font-family: icomoon;
content:"\ea0e";

シェアアイコン

[icon icon-share]

font-family: icomoon;
content:"\ea82";

装飾系アイコン

ペンのアイコン

[icon icon-pen]

font-family: icomoon;
content:"\e934";

本のアイコン

[icon icon-book]

font-family: icomoon;
content:"\e91a";

羽ペンのアイコン

[icon icon-quill]

font-family: icomoon;
content:"\e929";

複数の本のアイコン

[icon icon-books]

font-family: icomoon;
content:"\e925";

ふきだしアイコン

[icon icon-bubble]

font-family: icomoon;
content:"\e96b";

会話アイコン

[icon icon-bubbles]

font-family: icomoon;
content:"\e970";

クリップアイコン

[icon icon-attachment]

font-family: icomoon;
content:"\e9cd";

目のアイコン

[icon icon-eye]

font-family: icomoon;
content:"\e9ce";

ブックマークアイコン

[icon icon-bookmarks]

font-family: icomoon;
content:"\e9d3";

スターアイコン（白/空白）

[icon icon-star-empty]

font-family: icomoon;
content:"\e9d7";

ハーフスターアイコン

[icon icon-star-half]

font-family: icomoon;
content:"\e9d8";

スターアイコン（黒/フル）

[icon icon-star-full]

font-family: icomoon;
content:"\e9d9";

ハートアイコン

[icon icon-heart]

font-family: icomoon;
content:"\e9da";

SWELLアイコンまとめ

自分がよく使うのでまとめましたが、ご活用いただけると幸いです。

今回かなり一気に作業しましたので、もし間違いがあれば教えていただけると嬉しいです。お問い合わせフォームやSNSなどからご連絡いただけますと、気づいたときに修正させていただきます。

＼当サイト最推しテーマ／

SWELL公式サイトを見る