OpenMoji｜絵文字をSVGで選び、クレジット付きで使う

今回の仕上がり：絵と文字を組み合わせたリンク

下は保存したロケットSVGを56ピクセル角で表示した、本物のリンクです。絵だけで行き先を当てさせず、文字でも説明します。

Rocket：Kris Kowal様 / OpenMoji · CC BY-SA 4.0。SVGの図形・色は変更していません。HTMLとCSSの配置例はみっけメディア制作です。

公式Libraryの上にあるSearchへrocketと入力すると、検索候補にロケットが出ます。今回は候補のrocketを押して詳細ページへ進みました。検索欄へ入れるだけでは、一覧全体が絞られるとは限りません。

詳細の名前はrocket、Unicodeは1F680、AuthorはKris Kowal様でした。素材ごとの作者も確認してから使うと、誰が作った絵かを表記できます。下のSVGを押して保存します。PNGのリンクもありますが、今回はSVGだけを取得しました。

今回のリンクでは、文字が行き先を伝えるので画像のaltは空にしています。絵だけのボタンにするなら、ボタンの操作名を別途伝える必要があります。装飾を増やす前に、文字とボタンが読める大きさか確かめましょう。

<a href="/articles/game-dev-01">
  <img src="rocket.svg" width="56" height="56" alt="">
  ゲーム開発の講座を読む
</a>

公式プロジェクトは、HfG Schwäbisch Gmündの教員・学生と外部の貢献者による制作と案内しています。個人一人の制作と決めつけず、チームと各素材の作者を紹介します。

画像はCC BY-SA 4.0です。商用を含む共有・改変が認められますが、適切なクレジット、ライセンスへのリンク、変更した場合の表示が必要です。改変した素材を配布するときは、同じライセンスの条件にも従います。コードのライセンスと画像のライセンスを混同しないでください。

今回は公式SVGの色や形を変えず、表示サイズだけを指定しました。取得したライセンス原文と作者・出典の記録を素材と一緒に置いています。公式サイトのロゴなどを自分のブランドにするための紹介ではありません。

2026年10月3日、PCで検索候補、ロケットの詳細、SVGダウンロードを確認しました。保存したSVGを実表示し、文字付きリンクとクレジットを確認しています。掲載スクリーンショットは実画面です。

PNGの取得、全素材の権利・表示、絵文字フォント、Reactなどのライブラリ、実機スマホでの素材編集は未確認です。現在のXの反響も確認できていません。公式Xへのリンクは案内しますが、人気の根拠や特定の発表投稿としては扱いません。

細い線画がほしい場合はHeroiconsやTabler Iconsも比較できます。出典は公式詳細と公式READMEです。