【SWELLテーマ】icon一覧と使い方｜アイコン活用10のコツ

SWELLを使っていて「ここに小さなアイコンを入れたいのに、やり方が分からない…」とモヤモヤしたことはありませんか。

結論から言うと、SWELL iconはショートコードとアイコン挿入の基本パターンさえ押さえれば、一気に使いこなせるようになります。

少しずつで大丈夫なので、一緒にSWELL iconを使いこなして、サイトの見た目と分かりやすさを底上げしていきましょう。

SWELL iconとは？SWELLのアイコン機能をざっくり整理

SWELL iconでできること一覧

SWELLでは、フォントアイコンとして読み込まれた独自アイコンをいろいろな場所で呼び出せます。ざっくり「どこで何ができるか」を表にまとめると、こんなイメージです。

使い方の場面	できること	具体例
テキスト内	文章の一部に小さなアイコンを入れて読みやすくする	文頭にチェックマーク、注意文の前にビックリマークを置く
ボタン	CTAボタンにアイコンを足してクリックを誘導する	「資料請求」ボタンに矢印アイコンを追加する
グローバルメニュー	メニューの左にアイコンを置き、直感的に分かるナビにする	「ホーム」に家のアイコン、「ブログ」にペンのアイコンを付ける
スマホ固定フッター	画面下のメニューをアイコン付きで並べる	Home、検索、お問い合わせ、メニューなどをアイコンで表示
吹き出し・ボックス	装飾ブロックの見た目を少しリッチにする	注意ボックスの左に！アイコン、補足ボックスにiアイコンを置く
SNSリンク	フッターやサイドバーにSNSアイコンを並べる	X、Instagram、YouTubeなどの公式アカウントへのリンク

SWELLが標準で読み込んでいるアイコンフォントは、IcoMoonで作成されたものです。そのおかげで、わざわざ重い外部ライブラリを読み込まなくても、軽量なアイコン表示ができます。

SWELLアイコンの種類とSWELL iconの全体像

SWELL icon周りで覚えておきたいアイコンの種類は、ざっくり次の3パターンです。

• SWELL標準の独自アイコン（icon-home / icon-mail など）
• Font Awesomeのアイコン（fa-solid fa-house など）
• 自作のSVGアイコン（ロゴなどをSVG化したもの）

SWELL標準アイコンは、ショートコードや専用のアイコン挿入機能から呼び出します。Font Awesomeは、SWELL設定で読み込みを有効にしてから、クラス名をショートコードに渡して使うイメージです。SVGアイコンは少し上級者向けですが、別途設定することで、インラインアイコン機能などから呼び出すカスタマイズ例も紹介されています。

SWELL iconの基本的な使い方【ショートコードとインライン】

ショートコード「」で呼び出す基本パターン

SWELL iconの基本は、ショートコードの「」と「[アイコン]」です。公式でも紹介されている使い方で、慣れるとこれが一番手軽だと感じます。代表的なパターンを表にまとめました。

やりたいこと	入力するショートコードの例	補足
SWELL標準アイコンを1つ表示したい		「icon-home」の部分を他のクラス名に変えて使う
クラス名を属性として書きたい		class属性にまとめて書いても動作する
日本語ショートコードを使いたい	[アイコン icon-phone]	「[アイコン]」でも同じようにアイコンを呼び出せる
Font Awesomeを使いたい		SWELL設定でFont Awesomeの読み込みを有効にしておく
本文の途中にアイコンを挿入したい	文章の中にそのままと書く	ショートコードブロックでなく、テキスト部分に書いても表示される

私も最初は「ショートコードブロックを使うのかな？」と悩んでいたのですが、実は普通の段落にそのまま書いてOKです。「テキストを入力できる場所なら基本どこでも使える」と覚えておくと、かなり気が楽になります。

ブロックエディターのインラインアイコン機能を使う

「クラス名を考えるのがちょっと面倒…」というときは、Gutenbergの編集画面から直接アイコンを選べるインラインアイコン機能が便利です。流れは次のようなイメージです。

• アイコンを入れたいテキストブロックをクリックする
• ブロックツールバーの「アイコン」やショートコードボタンからアイコン挿入を選ぶ
• 一覧から使いたいアイコンをクリックする

これだけで、その位置に小さなアイコンが挿入されます。クラス名を覚えていなくても、一覧から感覚的に選べるので、「どのアイコンを使おうかな」と迷っているときにちょうどいい機能です。

SWELL icon一覧とクラス名の探し方

よく使うSWELL標準アイコンの例

SWELLにはかなり多くの標準アイコンが用意されていますが、特によく使うものを抜き出して一覧にしました。

用途	見た目のイメージ	クラス名の例
ホーム	家のマーク	icon-home
メール	封筒マーク	icon-mail
電話	受話器マーク	icon-phone
検索	虫眼鏡	icon-search
カート	買い物カゴ	icon-cart
情報	iアイコン	icon-info / icon-info-fill
注意	三角に!のマーク	icon-alert など
チェック	チェックマーク	icon-check
人型	人物シルエット	icon-person
YouTubeなど	SNSアイコン	icon-youtube など

実際にはこのほかにも矢印系や装飾系、吹き出し系など、かなりたくさんのアイコンが用意されています。標準アイコンだけでも、ホーム・メニュー・ボタン・吹き出し・SNSリンクなど、サイトの主要な場所はほぼカバーできる印象です。

SWELL iconのクラス名一覧を調べる場所

「クラス名をまとめて確認したい」というときは、次のような場所をチェックするのがおすすめです。

私は、自分のサイトでよく使うクラス名だけ小さなメモにしておき、足りないときだけ他サイトの一覧記事で追加を探すようにしています。そのくらいのゆるさで運用しても、SWELL iconは十分活躍してくれます。

SWELL iconをメニューやボタンで使うデザインパターン

グローバルメニュー・スマホ固定フッターでの配置例

ナビゲーションメニューにSWELL iconを組み合わせると、「どのメニューがどのページか」がパッと見で分かるようになります。代表的な組み合わせ例を表にしてみました。

メニュー名	アイコンの例	入力例（ナビゲーションラベル）
ホーム	家マーク	ホーム
ブログ	ペンマーク	ブログ
プロフィール	人マーク	プロフィール
お問い合わせ	メール	お問い合わせ
ショップ	カート	ショップ
アクセス	位置情報アイコン	アクセス

大事なのは、「文字だけにしないこと」ではなく「文字とアイコンをセットで使うこと」です。特にスマホの固定フッターメニューは画面が小さいので、アイコンがあるだけでメニューの意味が直感的に伝わります。

CTAボタン・バナーでSWELL iconを使う

お問い合わせや資料請求などのCTAボタンにSWELL iconを添えると、視線の引き寄せ効果がぐっと高まります。具体的には次のようなパターンがおすすめです。

• 右側に矢印アイコンを入れて「次に進む」イメージを出す
• 左側にチェックアイコンを入れて「今すぐできる感」を演出する
• ダウンロード系ボタンには下向き矢印アイコンを合わせる

例えば、ボタンラベルを次のようにすると、クリックしたくなる雰囲気が出てきます。

• 無料で相談する
• 資料をダウンロードする

実際にサイトを運営していると、テキストだけのボタンよりも、SWELL icon付きのボタンのほうが目に留まりやすいと感じる場面が多いです。デザインを大きく変えなくてもできる工夫なので、真っ先に試してほしいポイントです。

Font AwesomeとSVGをSWELL iconで併用する方法

Font AwesomeをSWELL iconで使う手順

SWELLでFont Awesomeを使う手順は、大きく分けて次の3ステップです。

ステップ	やること	ポイント
1	SWELL設定の「Font Awesome」で読み込みを有効化	管理画面の「SWELL設定」からFont Awesomeを選び、「CSSで読み込む」に設定する
2	Font Awesome公式サイトでアイコンを検索	使いたいアイコンの詳細ページからクラス名（fa-solid fa-star など）を確認する
3	クラス名をショートコードに貼り付ける	のようにクラス名をそのまま指定する

私がFont Awesomeを使うのは、標準のSWELL iconにはないブランドロゴや、少し凝った装飾アイコンが欲しいときです。ただし、Font Awesomeを多用しすぎると読み込むファイルが増えるので、「どうしてもほしいアイコンだけ」に絞って使うのが負荷的にも安心だと思います。

SVGロゴやオリジナルアイコンを表示するポイント

ロゴや特別なアイコンをきれいに表示したいときは、SVG形式のアイコンを使う方法もあります。これは少し中級者向けですが、ざっくりとした流れは次のようなイメージです。

• 自分のロゴやイラストをSVGとして用意する
• 子テーマなどにアップロードし、必要なコードを追加する
• インラインアイコン機能などから呼び出せるように設定する

SVGは拡大してもぼやけないので、ヘッダーロゴやブランド用のアイコンに向いています。一方で、SVGファイルの中に余計なスクリプトや複雑なスタイルが残っているとエラーの原因になることもあるので、できるだけシンプルなコードにしておくと安心です。

SWELL iconをCSSでカスタマイズするコツ

色とサイズを変えるときの考え方

SWELL iconはフォントアイコンなので、基本的には「文字にスタイルを当てる感覚」で調整します。よくあるカスタマイズを表にまとめました。

調整したいこと	どこを触るか	ポイント
色を変えたい	アイコンのクラス（.icon-check など）やアイコンを含む要素	colorプロパティで文字色として指定する
サイズを大きくしたい	同じくアイコンのクラス	font-sizeを大きめにするとアイコンも一緒に大きくなる
行の高さを揃えたい	アイコンを囲む要素やテキストの行	line-heightを合わせると上下のズレが目立ちにくくなる
ホバー時だけ色を変えたい	a:hover .icon-xxx など	カーソルを乗せたときだけ別の色にしてクリック感を出す

「SWELL icon＝特別な画像」ではなく「文字の一種」と考えると、CSSのイメージがつかみやすくなります。普段、文字色や文字サイズを変えている感覚の延長線上で、アイコンの見た目も整えてあげればOKです。

やりがちな失敗と注意点

SWELL iconをカスタマイズしていると、次のようなところでつまずきやすいです。

特にfont-familyの上書きは、原因に気づきにくいポイントです。「なんだかアイコンだけ変な文字になっているな」と感じたら、最近追加したCSSでfont-familyを触っていないかをチェックしてみてください。

よくある質問（SWELL icon編）

Q1. SWELL iconが表示されないときはどうすればいいですか？

A. まずは次のポイントを順番にチェックしてみてください。

• や[アイコン]のスペルミスがないか
• クラス名（icon-homeなど）がアイコン一覧と一致しているか
• Font Awesomeのクラスを使っている場合、SWELL設定でFont Awesomeの読み込みを有効にしているか
• キャッシュプラグインやブラウザキャッシュを削除して再読み込みしたか

ここまで試してもSWELL iconが表示されない場合は、一時的にプラグインを停止したり、別テーマに切り替えてみたりして、どこで不具合が起きているのか切り分けていくと原因に近づきやすくなります。

Q2. SWELL iconとFont Awesomeはどちらを優先して使うべきですか？

A. 基本的には「SWELL icon（SWELL標準アイコン）を優先し、足りない部分だけFont Awesomeで補う」という方針がおすすめです。

• 標準のSWELL iconはテーマに最適化されていて軽い
• サイト全体のデザインと馴染みやすく、色やサイズも調整しやすい
• Font Awesomeは種類が非常に多いが、そのぶん読み込みの負荷が増えやすい

私自身は、まずSWELL iconで作ってみて、それでも欲しいアイコンが見つからなかったときにだけFont Awesomeを使うようにしています。そのくらいのバランス感覚でいくと、デザインと表示速度の両方をいい感じに保ちやすいです。

Q3. SWELL iconの一覧を自分のサイトにコピペしても大丈夫ですか？

A. アイコンのクラス名自体はSWELLユーザー向けに公開されている情報なので、自分の言葉で整理し直してSWELL iconの使い方記事を書くことはよく行われています。ただし、他サイトの表やレイアウトをそのまま丸ごとコピーするのは避けたほうがいいです。

• よく使うアイコンだけ抜き出して、自分のサイト用にまとめる
• 「どこでどう使っているか」の一言コメントを添える
• メニュー用、ボタン用、SNS用など用途ごとに分ける

こうしておくと、自分にとっても「実用的なメモ帳」になりますし、読者にとっても価値のあるSWELL iconまとめとして役立つはずです。

まとめ：SWELL iconを使いこなしてサイトを一段階アップさせよう

この記事のポイントを整理します

今日からできる最初の一歩としては、まず自分のサイトのグローバルメニューかスマホ固定フッターのどちらかに、SWELL iconを一つだけ追加してみてください。家のアイコンでも、メールのアイコンでも構いません。

一度「アイコン付きメニュー」の便利さを実感すると、「あ、ここにもアイコンを足したいな」と思う場所が自然と見えてきます。そこから少しずつ、SWELL iconの出番を増やしていけばOKです。