受講料が最大70%OFF 受講料が最大70%OFF

ブログやホームページ作成など、GitHubのiconを利用したい場面は意外と多くあります。

本記事では、GitHub公式から提供されているiconの取得方法と使い方についてご紹介していきます。

GitHubのiconを取得


まずはGitHubの公式サイトにアクセスしてアイコンのダウンロード画面を表示しましょう。

GitHub公式からは「logo」「mark」「Octocat」の3種類がダウンロード出来ます。

ポテパンダの一言メモ

OctocatはGitHubの公式キャラクターです。
名前の通り、「たこ」と「ねこ」をイメージさせるようなキャラクターです。

logo

logoは左側の「Download logo」からダウンロードしていきます。

ダウンロードすると「GitHub-Logos.zip」の圧縮ファイルで取得出来るため、解凍して利用します。

logoファイル一覧
  • GitHub_Logo_White.psd
  • GitHub_Logo_White.png
  • GitHub_Logo.psd
  • GitHub_Logo.png
  • GitHub_Logo.eps
  • GitHub_Logo.ai

様々な環境で利用出来るように複数の拡張子でファイルが提供されています。

mark

markは画面中央の「Download mark」をクリックしてダウンロードしていきます。

markファイル一覧
  • GitHub-Mark.eps
  • GitHub-Mark.ai
  • GitHub-Mark-Light-64px.png
  • GitHub-Mark-Light-32px.png
  • GitHub-Mark-Light-120px-plus.png
  • GitHub-Mark-64px.png
  • GitHub-Mark-32px.png
  • GitHub-Mark-120px-plus.png

Octocat

Octocatは画面右側の「Download Octocat」をクリックしてダウンロードしましょう。

Octocatファイル一覧
  • Octocat.png
  • Octocat.jpg

GitHub公式iconを利用する上でのルール


GitHub公式から提供されているiconは無料で利用可能ですが、いくつかのルールを守った上で使用する必要があります。

OKルール

GitHubでは、iconの利用に関して下記のような利用ルールが記載されています。

OKルール
  • OctocatやGitHubのロゴをGitHubへのリンクに利用
  • Markを使って利用者のGitHubプロフィールやプロジェクトへのソーシャルリンクボタンに利用
  • OctocatやGitHubのロゴを使って製品にGitHubの機能が組み込まれていることを宣伝
  • GitHubに関するブログ投稿やニュース記事にOctocatやGitHubのロゴを利用

NGルール

GitHubのiconを利用する上で、下記の禁止事項には気をつけて利用するようにしてください。

NGルール
  • 制作したアプリのアイコンとしてOctocatやGitHubのロゴを利用
  • OctocatやGitHubロゴの改変バージョンを作成
  • 自身で作成したロゴにOctocatやGitHubのロゴを組み合わせる
  • 許可なくGitHub artworkを使用
  • 許可なくGitHub artworkを販売
  • 色や大きさの変更や文字・画像の追加

GitHubで利用されるiconフォントが使えるOcticons


GitHubのサイト内で利用されるiconフォント「Octicons」は、GitHubユーザーの我々も利用することが可能です。

まずOctionsの一覧ページにアクセスしましょう。

HTMLに埋め込む


Octiconsの一覧ページにアクセスすると利用可能なアイコンが表示されているので、利用したいアイコンをクリックします。


アイコン画像の下にある「Copy SVG」ボタンをクリックします。

クリップボードに下記のSVGタグがコピーされます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>

あとは任意のHTMLファイルにタグを埋め込めば画面にアイコン画像を表示出来るようになります。

HTMLサンプル

サンプルではシンプルに見出しとアイコン画像のみを表示します。

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>HTMLサンプル</title>
  </head>
  <body>
    <h3>GitHubアイコン</h3>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
  </body>
</html>

実際にブラウザで表示したのが下記の画像です。

さいごに: GitHubのiconはルールを守って利用しよう


本記事では、GitHub公式より提供されているiconの情報と実際の使い方をサンプルでご紹介してきました。

公式ページにも記載されている通り、ルールを守った上で利用することが大切です。

無料で利用出来るため、GitHub関連のアイコンを利用したい場合は公式サイトより取得してルールを守った上で活用してください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。