SWELLアイコン一覧｜100クラス名・80種類の文字コードとHTML・CSSの使い方

SWELLはWebアイコンのFont Awesomeを使っていません。

高速化を考えて、独自に抽出したアイコン（IcoMoon）を使用しています。

• ショートコードで使用できる
• CSSでも使用できる

本記事では、そんなSWELLで埋め込まれているアイコンの一覧表をまとめました。

2026年9月30日、当サイトが読み込んでいるSWELLのアイコンCSSと一覧を照合しました。掲載する100個のクラス名と80種類の文字コードは全件一致しています。名前が違っても同じ文字コードを使うアイコンがあります。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLアイコンの使い方と一覧

まずSWELLアイコンはどこに格納されているのかを解説します。

SWELLアイコンの格納場所

場所は親テーマの下記に格納されています。

SWELL: swell-icons.css (build/css/swell-icons.css)

SWELLアイコンの表示方法

SWELLアイコンはショートコードやCSSで使えます。

ショートコードで使う場合

「ショートコード」ブロックを追加し、次のコードを貼り付けるとAmazonのアイコンが表示されます。コード中のicon-amazonを一覧の別の名前に置き換えると、表示するアイコンを変更できます。

[icon class="icon-amazon"]

カスタムHTMLにアイコンを表示する

SWELLを使用しているページで「カスタムHTML」ブロックを追加し、次のコードを貼り付けます。家のアイコンと「ホーム」という文字が表示されます。この見本はリンクではありません。

ホーム

<p><span class="icon-home" aria-hidden="true"></span> ホーム</p>

アイコンの意味を隣の文字で伝えるため、アイコン側にはaria-hidden=”true”を指定しています。アイコンだけのリンクやボタンに変更する場合は、リンク先や操作が分かる名前を別途付けてください。

CSSの疑似要素でアイコンを表示する

次のHTMLを「カスタムHTML」ブロックに貼り付けます。続くCSSは「外観 → カスタマイズ → 追加CSS」に追加します。waza-icon-exampleという専用クラスだけに適用する例です。

<p><span class="waza-icon-example" aria-hidden="true"></span> 詳しい手順を見る</p>

.waza-icon-example::before {
  font-family: icomoon !important;
  content: "\e921";
  font-style: normal;
  font-weight: normal;
  margin-right: 0.5em;
}

2つを適用すると、次のように文字の前に右向きのアイコンが表示されます。

詳しい手順を見る

一覧のCSS欄にある文字コードをcontentの値へ入れると、アイコンを変更できます。たとえば家のアイコンは\e922です。親テーマのCSSファイルを直接編集する必要はありません。

表示されないときの確認と削除方法

公開画面のプレビューで確認してください。アイコン名のつづり、CSSのクラス名、contentの先頭のバックスラッシュを確認します。SWELL以外のテーマでは、同じアイコンフォントが読み込まれるとは限りません。

元に戻すときは、追加したカスタムHTMLブロックと、追加CSSの.waza-icon-example::beforeの指定を削除します。ほかのCSSは残してください。

SWELLアイコン一覧（100クラス名）

100個のクラス名を掲載しています。同じ文字コードを使う別名をまとめると80種類です。

Font Awesomeを使わずにSWELLで内蔵されているアイコンを活用したい時に参考にしてください。

※名前違いで同じアイコンのものもあります。

SWELLの固定フッターにアイコンを表示したい場合。

メニューの説明のところにアイコン名を入れてあげましょう。

下記のような感じで表示することができます。

SWELLアイコンに関する公式ヘルプページ

まず公式のヘルプページを紹介します。

SWELLアイコンは下記にまとまっています。

SWELL

SWELLで使えるアイコンの一覧 | WordPressテーマ SWELL ここでは、SWELLでフォントファイルとして読み込んでいるアイコンを一覧で紹介しています。 SWELLで標準で使用できるアイコンフォントは、IcoMoonで作成しています。 Font …

SWELLアイコンの読み込み方はこちらから

SWELL

アイコンを簡単に呼び出せるショートコードの使い方 | WordPressテーマ SWELL SWELLでは、数種類のアイコンをフォントとして読み込んでいます。（例： / / ） このページでは、これらのアイコンを文中で簡単に呼び出すためのショートコードの使い方を…

おまけです。SWELLでFont Awesomeのアイコンを使う方法

SWELL

SWELLで「Font Awesome」のアイコンを使う方法 | WordPressテーマ SWELL このページでは、WordPressテーマ SWELLで「Font Awesome」のアイコンを使う方法について解説していきます。 ① Font Awesomeファイルを読み込ませよう まずは、Font Awesom…

SNSアイコンを横並びのリンクにする

InstagramやYouTubeなどのリンクを横一列に並べる場合は、ボックスメニューで作るSNSアイコンの見本とコードを使えます。本文にアイコンを添える方法と異なり、リンク先・読み上げ用の名前・操作領域まで設定する手順です。

まとめ

本記事ではCSSでも使える！SWELLアイコン一覧まとめについて書きました。

Font Awesomeを使わずに、装飾したい場合はSWELLアイコンを活用しましょう。

ほかのカスタマイズはSWELLカスタマイズまとめ｜目的別の一覧からご覧いただけます。

アイコンを記事へのリンクに使う

次は家のアイコンを付けたリンクです。装飾用のアイコンは読み上げ対象から外し、「SWELLカスタマイズ一覧へ」という文字で移動先を伝えます。アイコン名を変更しても、リンクの文字は残してください。

<a class="waza-icon-link" href="https://motoki-design.co.jp/wordpress/swell-customize-matome/"><span class="icon-home" aria-hidden="true"></span><span>SWELLカスタマイズ一覧へ</span></a>

HTMLは「カスタムHTML」ブロックへ、次のCSSは「追加CSS」へ貼り付けます。専用クラスを付けたリンクだけに余白とキーボードの選択枠を追加します。hrefは自分のリンク先へ、文字はそのページの内容に合わせて変更してください。

.waza-icon-link { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1em; border: 1px solid currentColor; }
.waza-icon-link:focus-visible { outline: 3px solid #1261a0; outline-offset: 3px; }

Tabキーで選択するとリンクの周りに枠が表示され、Enterで一覧へ移動します。アイコンフォントが読み込めない場合も、文字から移動先が分かります。戻すには、このカスタムHTMLブロックと2つのCSS指定を取り除きます。SNS専用の横並びはSNSアイコンの作成方法で扱っています。

公開画面の確認記録