Phosphor Iconsを使う（2026/05/15）
- Phosphor Icons 公式サイトにアクセスします。
- 少しスクロールするとアイコンが見えてきます。
- 左上のプルダウンから線幅を選びます。ご利用のテンプレによって使える太さが変わるので、テンプレ内の解説も読んでおいて下さい。
- Search欄に「pc」と入力してみます。
- 気に入ったアイコンをクリック。「Web」というタブをクリックするとi要素のコードが出てくるので、それをコピーしてテンプレに貼り付けて下さい。
- 以下です。
フォントと同じ扱いなので、font-sizeやcolorで調整ができます。
線の太さを変更したい場合
style.cssまたはtheme.cssの冒頭に、
/*Phosphor Thinの読み込み
---------------------------------------------------------------------------*/
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css');
などの指定があると思います。ここのlightが線の太さに関連する箇所です。
- Thin … /thin/（htmlクラスはph-thin）
- Light … /light/（htmlクラスはph-light）
- Regular … /regular/（htmlクラスはph）
- Bold … /bold/（htmlクラスはph-bold）
- Fill … /fill/（htmlクラスはph-fill）
- Duotone … /duotone/（htmlクラスはph-duotone）
cssの擬似要素で使いたい場合
公式サイトのモーダル上では擬似要素用のコードが見つけにくいようで、AIに確認したところ、以下の方法で擬似要素も使えるという結論でした。
- font-family："Phosphor-Light"（Lightの場合。Thinなら"Phosphor-Thin"、Regularなら"Phosphor-Regular"）
- content（Unicode）：各アイコン固有のコード（例：\e3eb）
Unicodeの探し方
公式サイトのモーダルには載っていないことが多いので、Phosphor自身のCSSファイルを直接見るのが早いです。
ブラウザのアドレスバーに以下を入力：
https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css
開いたページで Ctrl+F（Mac は Cmd+F）で magnifying-glass のようにアイコン名を検索すると、
.ph-magnifying-glass:before {
content: "\e3eb"; ← この値が欲しいUnicode
}
…という行が見つかります。\e3eb の部分をコピー。
擬似要素での使い方（コピペ用）
.your-class::before {
font-family: "Phosphor-Light"; /* ウェイトに合わせる */
content: "\e3eb"; /* 検索アイコンのUnicode */
display: inline-block;
font-style: normal;
font-weight: normal;
line-height: 1;
margin-right: 0.4em; /* テキストとの間隔（必要に応じて）*/
}
UnicodeはAIの手元の記憶ベースなので、念のため公式CSS（上記URL）で確認してから使ってください。
ウェイト別 font-family まとめ
- Thin … "Phosphor-Thin"
- Light … "Phosphor-Light"
- Regular … "Phosphor" ※Regularだけ末尾なし
- Bold … "Phosphor-Bold"
- Fill … "Phosphor-Fill"
- Duotone … "Phosphor-Duotone"