【Notion】 サクッと簡単!ページのアイコンをオシャレにする方法

皆さんこんにちは。Webデザイナーのしゅん(@shun_webdesign)です。

カスタマイズするのが楽しくて毎日Notionを開かない日がないぐらいどっぷり利用しています。

ところでNotionのページにアイコンを付けれることは皆さんご存知でしょうか?

アイコンを付けることで見たいページを探しやすくなったり、よりオリジナルティ溢れたページをカスタマイズできるようになります。
今回はNotionのページアイコンを変更する方法を紹介します!

Notion関連記事

アイコンを変更することでページが見つけやすくなる

https://i.gyazo.com/2bc0e568aec5a086553a94ef06a576c8.png

アイコンを変更することで一目でページを見つけやすくなります。上の画像で例えると本の感想について書いてるページがあれば本のアイコンを付けるとなんのページがわかりやすくなりますよね。

このようにそのページ全体を表すアイコンにすれば区別がつきやすくなります。使用するアイコンも統一させることでページ一貫性を持たせることができます。

Notionにオススメのアイコン

Notion Icons

ミニマルでシンプルなアイコン。Notionに使われることを前提としてるのでダークモードにも対応しています。コピペでアイコンを変更できるので使いやすいです。

Notion Icons

Ikonate

種類豊富なミニマルアイコンを取り扱ってるサイト。

Ikonate – fully customisable & accessible vector icons

icooon-mono

6000種類以上のフリーアイコンサイト。種類が多く、色の変更ができます。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

DEVICON

プログラミング言語、設計および開発ツールを表すアイコンのセットです。フォントとして使用することも、svgコードをプロジェクトに直接コピーして貼り付けることもできます。

DEVICON

アイコンの変更方法

既存の絵文字からアイコンを選択する場合の手順は以下になります。

アイコン変更手順
  1. Notionページに移動。
  2. ページ上の「Add icon」を選択。
  3. ランダムでアイコンが設定されるのでアイコンをもう一度選択。
  4. 絵文字が一覧で表示されます。
  5. 絵文字からアイコンを選択完了。

リンクからアイコンを変更

今回は「Notion Icons」を使ってアイコンを変更します。あらかじめNotionを開いた状態にしておきます。

アイコンサイトへ移動

まずはNotion Iconsへ移動します。リンクからサイトへ移動してください。

Notion Icons

使いたいアイコン選択する

Notion Icons では「LIGHT MODE」もしくは「DARK MODE」からアイコンを選ぶことができます。

画面上のトグルを押すことで表示を切り替えれます。

Notionをダークモードにしたいときは…??
  1. 「Settings & Members」を選択。
  2. 「Appearance」を選択。
  3. Appearanceページ内から「Light」と書かれたボタンをクリック。
  4. 「Dark」を選んで完了

アイコンのリンクをコピー

アイコンの下「COPY」をクリックするとアイコンのURLがコピーされます。コピーしたものは「Copied!」の表示が一瞬出ます。

Notion Icons以外のアイコンを使用したい場合は画像単一のリンクをコピーしましょう。

ページ上の「Add icon」を選択。

Notionのページへ移動し、ページ上の「Add icon」をクリック。ランダムにアイコンが表示されるのでもう一度クリックしてください。

リンクを入力

https://i.gyazo.com/e159e19e7f341bba51ecf07d0c8cac26.png

ポップアップから「Link」を選択。URLの記入欄があるのでコピーしたURLをペースト。
その後「Submit」を押します。

完了

https://i.gyazo.com/fca7b663d54a134f5eba6bb9438c11fd.png

アイコンが表示されたら完了です。

画像をアップロードして変更する

Notionのページ上から「Add icon」をクリック。

Notionのページ上から「Add icon」を選択。

「Upload an image」を選択

https://i.gyazo.com/a39c7ffd46b7a3acf1b5c6e05bf2a2f5.png

ポップアップから「Upload an image」を選択し、「Choose an image」を押すとフォルダが開くのでアップしたい画像を選択。

アイコンの推奨サイズは280×280pxです。

完了

アイコンが表示されれば完了です。

上記画像のアイコンは「icooon mono」のSVGを使用しました。

まとめ:変更方法手順

リンクまたは画像をアップロードしてアイコンを変更する手順は以下です。
リンクからアイコンを変更
  1. アイコンのリンク(画像のみ)をコピー。
  2. ページ上の「Add icon」を選択。
  3. ポップアップから「Link」を選択。
  4. リンクをペースト。
  5. 「Submit」を押す。
画像をアップしてアイコンを変更
  1. サイトからアイコンをダウンロード。(必要であれば)
  2. ページ上の「Add icon」を選択。
  3. ポップアップから「Upload an image」を選択。
  4. 「Choose an image」をクリック。
  5. ダウンロードしたアイコンを選択。

最後まで見ていただきありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA