PR アイコン

【AFFINGER6】よく使うWebアイコンをまとめました

ブログでよく使うWebアイコンをまとめました。

使用するWebアイコンは、

  1. AFFINGERオリジナルアイコン
  2. Font Awesome
  3. REMIX ICON

この3つです。

※REMIX ICONを使用する方法は以下の記事を参考にしてください。

参考記事

それぞれアイコンの形や大きさなどが微妙に違うんですが、ここではWebアイコンの特性は解説しません。

背景色 AFFINGER専用ブロック ショートコード使用
白 ◎ ○
薄青 ○ ○

表の説明

上の表は、何に使用できるかを表したものです。

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

スポーツ系アイコンをもっと見る　

アイコンをもっと増やそう！

文章中にアイコンを入れよう！

-アイコン
-