GESP GUIDE

Student Developer Pack Guide

Octicons - GitHub Icon Library

GitHub’s official icon library with scalable vector icons designed for clarity and consistency across web and mobile interfaces.

Student guide based on official documentation. Not affiliated with Octicons or GitHub.

Quick Overview

📊 Key Details

  • Value: Free icon library
  • Difficulty: Beginner
  • Category: Design Resources
  • Duration: Unlimited

✅ Eligibility

Free for everyone

🏷️ Tags

iconsgithubdesignui

What are Octicons?

Octicons are GitHub’s icon library - a scalable set of icons handcrafted with <3 by GitHub. They’re designed to be legible and beautiful at small sizes.

Key Features

  • Scalable vector icons in SVG format
  • Consistent design across all icons
  • Multiple formats (SVG, font, React components)
  • Open source and free to use
  • Regular updates with new icons
  • Accessibility focused design

Student Benefits

  • Free high-quality icons for projects
  • Professional design resources
  • Multiple implementation options
  • GitHub-style aesthetic
  • Open source learning resource
  • Commercial use allowed

How to Use Octicons

Direct Download

  1. Visit Octicons website at primer.style/octicons
  2. Browse icon collection by category
  3. Click desired icon to view details
  4. Download SVG or copy code
  5. Use in your project as needed

Package Installation

npm Package

npm install @primer/octicons

React Components

npm install @primer/octicons-react

Ruby Gem

gem install octicons

Implementation Methods

SVG Usage

<!-- Direct SVG usage -->
<svg class="octicon octicon-mark-github" 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"/>
</svg>

CSS Classes

<!-- Using CSS classes with font -->
<span class="octicon octicon-repo"></span>
<span class="octicon octicon-git-branch"></span>
<span class="octicon octicon-issue-opened"></span>

React Components

import {MarkGithubIcon, RepoIcon, GitBranchIcon} from '@primer/octicons-react'

function MyComponent() {
  return (
    <div>
      <MarkGithubIcon size={24} />
      <RepoIcon size="medium" />
      <GitBranchIcon fill="blue" />
    </div>
  )
}

JavaScript Usage

import {alert} from '@primer/octicons'

const alertIcon = alert.toSVG()
document.body.innerHTML = alertIcon

// With custom attributes
const customIcon = alert.toSVG({
  "width": 24,
  "height": 24,
  "class": "custom-icon",
  "aria-label": "Alert"
})

Development Icons

  • octicon-repo - Repository
  • octicon-git-branch - Git branch
  • octicon-git-commit - Git commit
  • octicon-code - Code
  • octicon-terminal - Terminal
  • octicon-file-code - Code file

UI Icons

  • octicon-search - Search
  • octicon-bell - Notifications
  • octicon-gear - Settings
  • octicon-person - User
  • octicon-home - Home
  • octicon-mail - Email

Action Icons

  • octicon-plus - Add/Create
  • octicon-pencil - Edit
  • octicon-trash - Delete
  • octicon-download - Download
  • octicon-upload - Upload
  • octicon-check - Success

Status Icons

  • octicon-alert - Warning
  • octicon-x - Error/Close
  • octicon-info - Information
  • octicon-question - Help
  • octicon-clock - Time
  • octicon-location - Location

Best Uses for Students

Web Development Projects

  • Navigation icons for menus
  • Button icons for actions
  • Status indicators for forms
  • Social media links
  • File type indicators

Mobile App Development

  • Tab bar icons for navigation
  • Toolbar buttons for actions
  • List item indicators
  • Status bar elements
  • Loading states icons

Design Projects

  • Wireframe elements for mockups
  • Prototype icons for testing
  • Presentation graphics for slides
  • Documentation illustrations

GitHub Projects

  • README graphics enhancement
  • Issue templates decoration
  • Pull request indicators
  • Documentation visual aids

Customization Options

Size Control

.octicon {
  width: 16px;
  height: 16px;
}

/* Responsive sizing */
.octicon-large {
  width: 24px;
  height: 24px;
}

.octicon-small {
  width: 12px;
  height: 12px;
}

Color Customization

.octicon {
  fill: currentColor; /* Inherits text color */
}

.octicon-primary {
  fill: #0366d6; /* GitHub blue */
}

.octicon-success {
  fill: #28a745; /* Green */
}

.octicon-danger {
  fill: #d73a49; /* Red */
}

Animation Effects

.octicon {
  transition: transform 0.2s ease;
}

.octicon:hover {
  transform: scale(1.1);
}

.octicon-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Accessibility Best Practices

Semantic Usage

<!-- With proper ARIA labels -->
<button aria-label="Delete item">
  <svg class="octicon octicon-trash" aria-hidden="true">
    <!-- icon path -->
  </svg>
</button>

<!-- Decorative icons -->
<svg class="octicon octicon-repo" aria-hidden="true">
  <!-- icon path -->
</svg>
<span>Repository Name</span>

Screen Reader Support

  • Use aria-hidden="true" for decorative icons
  • Provide aria-label for interactive icons
  • Include text alternatives when necessary
  • Test with screen readers for accessibility

Performance Optimization

SVG Optimization

  • Minimize file size by removing unnecessary attributes
  • Use sprites for multiple icons
  • Implement lazy loading for large icon sets
  • Cache icons appropriately

Font vs SVG

FormatProsCons
SVGBetter quality, individual stylingLarger HTML
FontSmaller payload, CSS stylingRendering issues

Integration Examples

HTML/CSS Project

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://primer.style/octicons/build/build.css" />
</head>
<body>
  <nav>
    <a href="#"><span class="octicon octicon-home"></span> Home</a>
    <a href="#"><span class="octicon octicon-person"></span> Profile</a>
    <a href="#"><span class="octicon octicon-gear"></span> Settings</a>
  </nav>
</body>
</html>

React Project

import {HomeIcon, PersonIcon, GearIcon} from '@primer/octicons-react'

function Navigation() {
  return (
    <nav>
      <a href="#"><HomeIcon size={16} /> Home</a>
      <a href="#"><PersonIcon size={16} /> Profile</a>
      <a href="#"><GearIcon size={16} /> Settings</a>
    </nav>
  )
}

Vue.js Project

<template>
  <nav>
    <a href="#" v-html="homeIcon"></a>
    <a href="#" v-html="personIcon"></a>
    <a href="#" v-html="gearIcon"></a>
  </nav>
</template>

<script>
import {home, person, gear} from '@primer/octicons'

export default {
  computed: {
    homeIcon() { return home.toSVG({width: 16, height: 16}) },
    personIcon() { return person.toSVG({width: 16, height: 16}) },
    gearIcon() { return gear.toSVG({width: 16, height: 16}) }
  }
}
</script>

License and Usage Rights

MIT License

  • Free for any use including commercial
  • Modification allowed for custom needs
  • Attribution not required but appreciated
  • No warranty provided

Best Practices

  • Credit GitHub when appropriate
  • Follow brand guidelines for GitHub-related projects
  • Respect trademark restrictions
  • Check updates regularly for new icons

Support

If you need help with Octicons: