ブログでよく使うWebアイコンをまとめました。
使用するWebアイコンは、
- AFFINGERオリジナルアイコン
- Font Awesome
- REMIX ICON
この3つです。
※REMIX ICONを使用する方法は以下の記事を参考にしてください。
参考記事
それぞれアイコンの形や大きさなどが微妙に違うんですが、ここではWebアイコンの特性は解説しません。
表の説明
上の表は、何に使用できるかを表したものです。
AFFINGER専用ブロックで使用するときに、
- 「白｣はエディタ上でもアイコンが表示される
- 「薄青｣ はエディタ上では表示されない（プレビューでは表示される）
このような違いがあります。
エディタ上とは、投稿の編集画面のことです。
AFFINGER専用ブロックとは、マイボックスや見出し付きフリーボックスなどのテーマ専用ブロックのことです。
※文章中にWebアイコンを表示させる方法については以下の記事に詳しく書いています。
参考
AFFINGERオリジナルWebアイコン一覧
AFFINGER6のブロックメニューのアイコンリスト＋AFFINGERオリジナルアイコンをまとめています。
| 名称 |
アイコン |
クラス名 |
| ペン |
|
st-svg-pencil |
| 万年筆 |
|
fas fa-pen-fancy |
| メモ |
|
st-svg-file-text-o |
| メモ（反転） |
|
st-svg-file-text |
| ペンとメモ |
|
st-svg-pencil-square-o |
| チェック |
|
st-svg-check |
| チェック（V） |
|
fas fa-check-circle |
| 注意 |
|
st-svg-exclamation-circle |
| 警告 |
|
fas fa-exclamation-triangle |
| リンク |
|
st-svg-link |
| はてな |
|
st-svg-question-circle |
| 虫めがね |
|
st-svg-search |
| 虫めがね（＋） |
|
st-svg-search-plus |
| 虫めがね（－） |
|
st-svg-search-minus |
| 矢印「右」① |
|
st-svg-angle-double-right |
| 矢印「右」② |
|
st-svg-angle-right |
| 矢印「右」③ |
|
st-svg-caret-right |
| 矢印「右」④ |
|
st-svg-arrow-circle-o-right |
| 矢印「右」⑤ |
|
st-svg-arrow-circle-right |
| 矢印「右」⑥ |
|
st-svg-arrow-right |
| 矢印「下」① |
|
st-svg-angle-double-down |
| 矢印「下」② |
|
st-svg-angle-down |
| 矢印「下」③ |
|
st-svg-arrow |
| 矢印「上」① |
|
st-svg-double-up |
| 矢印「上」② |
|
st-svg-angle-up |
| 目 |
|
st-svg-eye |
| 目隠し |
|
st-svg-eye-slash |
| カメラ |
|
st-svg-camera |
| カメラ（レトロ） |
|
st-svg-camera-retro |
| ギフト |
|
st-svg-gift |
| ハート |
|
st-svg-heart |
| ユーザー |
|
st-svg-user |
| コメント |
|
st-svg-comment |
| 電球 |
|
st-svg-lightbulb-o |
| 電球（黒） |
|
st-svg-lightbulb |
| お知らせ |
|
st-svg-bullhorn |
| メール |
|
st-svg-envelope-o |
| メール（反転） |
|
st-svg-envelope |
| 紙飛行機 |
|
st-svg-paper-plane |
| コード |
|
st-svg-code |
| ショートコード |
|
st-svg-shortcode |
| ダイヤモンド |
|
st-svg-diamond |
| ダウンロード① |
|
st-svg-download |
| ダウンロード② |
|
st-svg-cloud-download |
| Twitter |
|
st-svg-twitter |
| YouTube |
|
st-svg-youtube-play |
| Amazon |
|
st-svg-amazon |
| 王冠 |
|
st-svg-oukan |
| トロフィー |
|
st-svg-trophy |
| 賞 |
|
fas fa-award |
| 初心者 |
|
st-svg-bigginer_l |
| インフォ |
|
st-svg-info-circle |
| マル |
|
st-svg-circle-o |
| バツ① |
|
st-svg-times |
| バツ② |
|
fas fa-times-circle |
| 二重マル |
|
st-svg-circle-w |
| 三角 |
|
st-svg-triangle |
| Like |
|
st-svg-thumbs-o-up |
| Like（反転） |
|
st-svg-thumbs-up |
| Bad |
|
st-svg-thumbs-o-down |
| Bad（反転） |
|
st-svg-thumbs-down |
| 指さし |
|
st-svg-hand-o-right |
| 指さし（反転） |
|
st-svg-hand-right |
| 表情（嬉） |
|
st-svg-emotion-smile |
| 表情（普） |
|
st-svg-emotion-meh |
| 表情（悲） |
|
st-svg-emotion-frown |
ブランド系 Webアイコン
SNS系アイコン
| Twitter |
|
st-svg-twitter |
| Facebook① |
|
st-svg-facebook |
| Facebook② |
|
st-svg-facebook-square |
| YouTube |
|
st-svg-youtube-play |
| instagram |
|
st-svg-instagram |
| TikTok |
|
fab fa-tiktok |
チャット系アイコン
| LINE |
|
st-svg-line |
| SMS |
|
fas fa-sms |
| Facebook Messenger |
|
fab fa-facebook-messenger |
その他ブランドアイコン
| WordPress |
|
st-svg-wordpress |
| pinterest |
|
st-svg-pinterest-p |
| Evernote |
|
fab fa-evernote |
| ウィキペディア |
|
fab fa-wikipedia-w |
グーグル系
| google |
|
st-svg-google |
| chrome |
|
fab fa-chrome |
| chromecast |
|
fab fa-chromecast |
| アンドロイド |
|
fab fa-android |
| Google Play |
|
fab fa-google-play |
| Googleドライブ |
|
fab fa-google-drive |
| Google Pay |
|
fab fa-google-pay |
アマゾン系
| Amazon |
|
st-svg-amazon |
| Audible |
|
fab fa-audible |
| Amazon Pay |
|
fab fa-cc-amazon-pay |
アップル系アイコン
| Apple |
|
fab fa-apple |
| iTune |
|
fab fa-itunes |
| Safari |
|
fab fa-safari |
| Apple Pay |
|
fab fa-apple-pay |
マイクロソフト系
| Microsoft |
|
fab fa-microsoft |
| Windows |
|
fab fa-windows |
| Excelファイル |
|
far fa-file-excel |
| Wordファイル |
|
far fa-file-file-word |
| パワーポイント |
|
far fa-file-powerpoint |
| PDFファイル |
|
far fa-file-pdf |
| edge |
|
fa-brands fa-edge-legacy |
| Skype |
|
fab fa-skype |
支払い系アイコン
| visa |
|
fab fa-cc-visa |
| JCB |
|
fab fa-cc-jcb |
| mastercard |
|
fab fa-cc-mastercard |
| American Express |
|
fab fa-cc-amex |
| PayPal① |
|
fab fa-cc-paypal |
| PayPal② |
|
fa-brands fa-paypal |
その他、よく使うWebアイコン一覧
| 歯車 |
|
fa-solid fa-gear |
| ファン |
|
fa-solid fa-fan |
| プラス |
|
st-svg-plus-thin |
| マイナス |
|
st-svg-minus-thin |
| 質問 |
|
fa-brands fa-quora |
| 答え |
|
fa-solid fa-a |
| 時計 |
|
st-svg-clock-o |
| 家（HOME） |
|
st-svg-home |
| フォルダー |
|
st-svg-folder |
| フォルダー（open） |
|
st-svg-folder-open-o |
| ピン |
|
st-svg-thumb-tack |
| ペン |
|
st-svg-pencil-square-o |
| コピー① |
|
st-svg-copy |
| コピー② |
|
far fa-copy |
| クレジット |
|
st-svg-credit-card-alt |
| お金 |
|
st-svg-money |
| カート |
|
st-svg-shopping-cart |
| 外部リンク |
|
st-svg-external-link |
| マップ |
|
st-svg-map-marker |
| P |
|
st-svg-product-hunt |
| サインイン |
|
st-svg-sign-in |
| サインアウト |
|
st-svg-sign-out |
| 目次 |
|
st-svg-toc |
| クリップ |
|
st-svg-paperclip |
| ロック |
|
st-svg-lock |
| ロック（空き） |
|
st-svg-unlock-alt |
| 鍵 |
|
fas fa-key |
| PC |
|
st-svg-desktop |
| タブレット |
|
st-svg-tablet |
| スマホ |
|
st-svg-mobile |
| プリント |
|
st-svg-print |
| SDカード |
|
fas fa-sd-card |
| USB |
|
fab fa-usb |
| チャート |
|
st-svg-line-chart |
| 写真 |
|
st-svg-picture-o |
| PDF |
|
st-svg-pdf-o |
| ZIP |
|
st-svg-file-zip-o |
| 新聞 |
|
st-svg-newspaper-o |
| スター |
|
st-svg-star |
| スター（half） |
|
st-svg-star-half-o |
| スター（反転） |
|
st-svg-star-o |
| プラグ |
|
st-svg-plug |
| 本 |
|
st-svg-book |
| ブックマーク |
|
st-svg-bookmark |
| タグ |
|
st-svg-tag |
| フラッグ |
|
st-svg-flag |
| ベル |
|
st-svg-bell |
| 魔法 |
|
st-svg-magic |
| カレンダー |
|
st-svg-calendar |
| 箱 |
|
st-svg-inbox |
| パレット |
|
st-svg-palette |
| 爆弾 |
|
fas fa-bomb |
| バーコード |
|
fas fa-barcode |
| バースデーケーキ |
|
fas fa-birthday-cake |
| 王冠 |
|
fas fa-crown |
| データベース |
|
fas fa-database |
| サーバー |
|
fas fa-server |
| リスト |
|
fas fa-list |
| 番号リスト |
|
fas fa-list-ol |
| タスク |
|
fas fa-tasks |
| 電話 |
|
fas fa-phone |
| うんこ |
|
fas fa-poo |
| ロボット |
|
fas fa-robot |
| サイトマップ |
|
fas fa-sitemap |
| オンに切り替え |
|
fas fa-toggle-on |
| オフに切り替え |
|
fas fa-toggle-off |
回転系アイコン
| 歯車 |
|
fa-solid fa-gear |
| スピナー |
|
fa-solid fa-spinner |
| ファン |
|
fa-solid fa-fan |
コンピューター系アイコン
| MacBook（REMIX ICON） |
|
ri-macbook-line |
| キーボード |
|
fas fa-keyboard |
| マウス |
|
fas fa-mouse |
| ダウンロード |
|
fas fa-download |
| Wi-Fi |
|
fas fa-wifi |
コンピューター系アイコンをもっと見る
デザイン系アイコン
| パレット |
|
fas fa-palette |
| ペイントブラシ |
|
fas fa-paint-brush |
| 定規 |
|
fas fa-ruler-combined |
| 編集 |
|
fas fa-edit |
| レイヤー |
|
fas fa-layer-group |
デザイン系アイコンをもっと見る
乗り物系アイコン
| 乗用車 |
|
fas fa-car |
| 乗用車（横） |
|
fas fa-car-side |
| 電車 |
|
fas fa-subway |
| バス |
|
fas fa-bus |
| ガソリンスタンド |
|
fas fa-gas-pump |
乗り物系アイコンをもっと見る
スポーツ系アイコン
| 野球 |
|
fas fa-baseball-ball |
| ラグビー |
|
fas fa-football-ball |
| サッカー |
|
fas fa-futbol |
| 卓球 |
|
fas fa-table-tennis |
| スキー |
|
fas fa-skiing |
スポーツ系アイコンをもっと見る
アイコンをもっと増やそう！
文章中にアイコンを入れよう！
