Controllercons

Free video game controller icons for use in web, print and, well, anywhere you want!

Download

30 video game controller icons from the last 40 years of gaming.

3 icon styles for each controller — solid, outline and duotone.

woff/woff2, ttf, otf, svg, and Sass support make Controllercons easy to use for any application.

Quick start for web

Do you want a video game controller icon on your website in the quickest, most effortless way?

Download the latest version of Controllercons
Extract the .zip file and copy the controllercons folder to your root directory

Add the following snippet to the <head> of your document:

<link rel="stylesheet" href="/controllercons/css/controllercons.css">

Using the grid above, copy an HTML snippet for your favourite controller
Paste the snippet into the <body> of your document
Profit.

Using HTML

Assuming you've linked the Controllercons stylesheet as outlined above, adding a Controllercon to your site is as easy as copying and pasting the following code:

<span class="ccs cc-atari-2600"></span>

Each icon requires two classes; one for the style and the other for the controller.

Use one of these three classes to choose a style:

<!-- Solid -->
<span class="ccs ..."></span>
	
<!-- Outline -->
<span class="cco ..."></span>
	
<!-- Duotone -->
<span class="ccd ..."></span>

Accompany the style class with a controller class. You can find controller classes using the grid above.

Customisation

If you want to use just one style of Controllercon on your site, link one of the individual stylesheets from within the controllercons folder.

<!-- Solid -->
<link rel="stylesheet" href="/controllercons/css/controllercons-solid.css">

<!-- Outline -->
<link rel="stylesheet" href="/controllercons/css/controllercons-outline.css">

<!-- Duotone -->
<link rel="stylesheet" href="/controllercons/css/controllercons-duotone.css">

To change the colour and opacity of Controllercons, you can use one of the following CSS variables:

:root {
   --cc-primary-color: inherit;
   --cc-primary-opacity: 1;
}

Alternatively, you can add your styles directly to the ::before pseudo-elements in your stylesheet.

.ccd::before {
   color: #BADA55;
   opacity: 0.69;
}

Duotone Controllercons have two additional CSS variables:

:root {
   --cc-secondary-color: inherit;
   --cc-secondary-opacity: 0.5;
}

The duotone icons use the ::after pseudo-element for their secondary glyph.

Using Sass

Sass gives you the best flexibility with Controllercons.

Copy the controllercons/scss/controllercons folder into your Sass src folder and link it to your main scss file:

@import "controllercons/controllercons"

Copy the controllercons/font folder into your assets directory.

Open the controllercons/_config.scss file.

All the variables in the config file have comments explaining their purpose, so they should (hopefully) make sense.

By default, Controllercon Sass assumes your compiled stylesheet resides in its own directory and looks for a separate font directory outside of that.

dist
├── css
│   └── style.css
└── font
    ├── controllercons-duotone.woff
    ├── controllercons-duotone.woff2
    ├── controllercons-outline.woff
    ├── controllercons-outline.woff2
    ├── controllercons-solid.woff
    └── controllercons-solid.woff2

If you want to place your font folder in the same directory as your compiled stylesheet, you can adjust the $font-path variable accordingly:

$font-path: './font';

You can remove, or comment out, the styles or controllers you don't wish to use.

For example, if you're running a retro gaming site, and only want to use solid icons, your config file would look something like this:

// Remove styles that are not needed
$styles: 'solid'; //, 'outline', 'duotone';
	
// Other variables excluded for ease of reading
	
// Comment out the controllers you don't need
$controllers: (
   'atari-2600': '00',
   'atari-jaguar': '01',
   'dreamcast': '02',
   // 'gamecube': '03',
   // 'joy-con-l': '04',
   // 'joy-con-r': '05',
   // 'joy-cons': '06',
   'master-system': '07',
   'mega-drive': '08',
   'n64': '09',
   'nes': '10',
   'ps1': '11',
   // 'ps2': '12',
   // 'ps3': '13',
   // 'ps4': '14',
   // 'ps5': '15',
   'sega-saturn': '16',
   'snes': '17',
   // 'stadia': '18',
   // 'switch-pro': '19',
   // 'virtual-boy': '20',
   // 'wii-classic': '21',
   // 'wii-u-pro': '22',
   // 'wii-u': '23',
   // 'wii': '24',
   // 'xbox-360': '25',
   // 'xbox-s': '26',
   // 'xbox-one': '27',
   // 'xbox-series-x': '28',
   // 'xbox': '29',
);

Your compiled CSS will only include the chosen styles, fonts, and controllers, meaning it's as lean as possible!

Using SVGs

Download the latest version of Controllercons to access all SVGs, or you can download a specific SVG from the grid above.

Copy and paste the SVG code into the <body> of your document, and you're good to go!

The SVGs include the following classes for styling:

/* For the main SVG element */
.ccsvg {
   /* Styles here */
}

/**
* For the primary path in the SVG.
* Solid and outline icons only have one path
*/
.ccsvg__primary {
   /* Styles here */
}

/**
* For the secondary path in the SVG.
* This is only used for duotone icons
*/
.ccsvg__secondary {
   /* Styles here */
}

Each SVG has its own controller and style class too:

.ccsvg--snes {
   /* Styles here */
}

.ccsvg--solid {
   /* Styles here */
}

By default, duotone SVGs have an inline opacity style of 0.5. If you don't like this, you can override it with your own style or remove the inline style from the secondary path.

/* Find/replace opacity=".5" */

.svg__secondary {
   /* Can be anything to distinguish the two paths */
   opacity: 0.2 !important;
}

Desktop SVGs

Using SVGs in your desktop designs is the quickest and easiest option.

Download the latest version of Controllers to access all SVGs, or download a specific SVG from the grid above.

They're standard SVGs, so they'll work in Adobe XD, Illustrator, Photoshop, and Figma. Whatever software supports SVGs, supports Controllercons.

Duotone SVGs are split into two compound paths, making them easier to customise.

Installing Fonts

While SVGs are the most versatile when working on a desktop, you can also install the Controllercon font.

Controllercons includes both .otf and .ttf font files.

Install either using the following instructions: macOS | Windows, and Controllercons will be visible in your font selection dropdown.

There are no key bindings for Controllercons, so you need to copy/paste the glyphs from the grid above.

Upgrading from 1.x to 2.x

Download the latest version of Controllercons and add the new stylesheet to the <head> of your document.

<link rel="stylesheet" href="/controllercons/css/controllercons.css">

The class names have changed significantly in 2.x, so you must update these in your HTML markup. See below for a list of replaced or redundant classes:

<!-- Before -->
<span class="cc-atari2600"></span>
<!-- After -->
<span class="ccs cc-atari-2600"></span>

<!-- Before -->
<span class="cc-atari2600-o"></span>
<!-- After -->
<span class="cco cc-atari-2600"></span>

<!-- Before -->
<span class="cc-psx"></span>
<!-- After -->
<span class="ccs cc-ps1"></span>

<!-- Before -->
<span class="cc-psx-o"></span>
<!-- After -->
<span class="cco cc-ps1"></span>

<!-- Before -->
<span class="cc-wiiu"></span>
<!-- After -->
<span class="ccs cc-wii-u"></span>

<!-- Before -->
<span class="cc-wiiu-o"></span>
<!-- After -->
<span class="cco cc-wii-u"></span>

<!-- Before -->
<span class="cc-xboxs"></span>
<!-- After -->
<span class="ccs cc-xbox-s"></span>

<!-- Before -->
<span class="cc-xboxs-o"></span>
<!-- After -->
<span class="cco cc-xbox-s"></span>

<!-- Before -->
<span class="cc-switch"></span>
<!-- Alternatives -->
<span class="ccs cc-switch-pro"></span>
<span class="ccs cc-joy-cons"></span>
<span class="ccs cc-joy-con-l"></span>
<span class="ccs cc-joy-con-r"></span>

<!-- Before -->
<span class="cc-switch-o"></span>
<!-- Alternatives -->
<span class="cco cc-switch-pro"></span>
<span class="cco cc-joy-cons"></span>
<span class="cco cc-joy-con-l"></span>
<span class="cco cc-joy-con-r"></span>

<!-- Before -->
<span class="cc-xboxone"></span>
<!-- After -->
<span class="ccs cc-xbox-one"></span>

<!-- Before -->
<span class="cc-xboxone-o"></span>
<!-- After -->
<span class="cco cc-xbox-one"></span>

<!-- Before -->
<span class="cc-xbox360"></span>
<!-- After -->
<span class="ccs cc-xbox-360"></span>

<!-- Before -->
<span class="cc-xbox360-o"></span>
<!-- After -->
<span class="cco cc-xbox-360"></span>

<!-- Before -->
<span class="cc-wiiupro"></span>
<!-- After -->
<span class="ccs cc-wii-u-pro"></span>

<!-- Before -->
<span class="cc-wiiupro-o"></span>
<!-- After -->
<span class="cco cc-wii-u-pro"></span>

<!-- Before -->
<span class="cc-switchpro"></span>
<!-- After -->
<span class="ccs cc-switch-pro"></span>

<!-- Before -->
<span class="cc-switchpro-o"></span>
<!-- After -->
<span class="cco cc-switch-pro"></span>

<!-- Before -->
<span class="cc-megadrive"></span>
<!-- After -->
<span class="ccs cc-mega-drive"></span>

<!-- Before -->
<span class="cc-megadrive-o"></span>
<!-- After -->
<span class="cco cc-mega-drive"></span>

<!-- Before -->
<span class="cc-wii-remote"></span>
<!-- After -->
<span class="ccs cc-wii"></span>

<!-- Before -->
<span class="cc-wii-remote-o"></span>
<!-- After -->
<span class="cco cc-wii"></span>

<!-- Before -->
<span class="cc-wiiclassic"></span>
<!-- After -->
<span class="ccs cc-wii-classic"></span>

<!-- Before -->
<span class="cc-wiiclassic-o"></span>
<!-- After -->
<span class="cco cc-wii-classic"></span>

<!-- Before -->
<span class="cc-virtualboy"></span>
<!-- After -->
<span class="ccs cc-virtual-boy"></span>

<!-- Before -->
<span class="cc-virtualboy-o"></span>
<!-- After -->
<span class="cco cc-virtual-boy"></span>

<!-- Before -->
<span class="cc-mastersystem"></span>
<!-- After -->
<span class="ccs cc-master-system"></span>

<!-- Before -->
<span class="cc-mastersystem-o"></span>
<!-- After -->
<span class="cco cc-master-system"></span>

<!-- Before -->
<span class="cc-switch-joy-con-l"></span>
<!-- After -->
<span class="ccs cc-joy-con-l"></span>

<!-- Before -->
<span class="cc-switch-joy-con-l-o"></span>
<!-- After -->
<span class="cco cc-joy-con-l"></span>

<!-- Before -->
<span class="cc-switch-joy-con-r"></span>
<!-- After -->
<span class="ccs cc-joy-con-r"></span>

<!-- Before -->
<span class="cc-switch-joy-con-r-o"></span>
<!-- After -->
<span class="cco cc-joy-con-r"></span>

If you can't change your markup, use the controllercons-legacy.css stylesheet instead to ensure your old classes work.

<link rel="stylesheet" href="/controllercons/css/controllercons-legacy.css">

Please note: this legacy stylesheet doesn't include any controllers introduced in 2.x, only the changes to the new outline icons and the tidied-up solid icons.

Release notes

2.1

New-look website
Better documentation
Sass support
Better SVGs

2.0

6 new icons:
- Atari Jaguar
- Sega Saturn
- Joy-Cons (Grip)
- Google Stadia
- Xbox Series X
- PS5 DualSense
New duotone style
SVG support
Redesigned solid and outline icons
Greater flexibility with web fonts

1.1

8 new icons:
- Atari 2600
- Sega Master System
- Virtual Boy
- Sega Dreamcast
- Switch Pro Controller
- Wii Classic
- Wii U Pro Controller
- Xbox Controller S
Redesigned outline icons
Cleaner solid icons
Removed the Nintendo Switch icon because it didn't work well on smaller screens

1.0

17 icons, each with two variants
Webfont download for web use
Typekit download for desktop use
WordPress Plugin

Legacy downloads

If want to download one of the older versions of Controllercons, you can do so here. These versions are no longer supported, and may not work as intended.

License and usage

Controllercons are licensed under the SIL Open Font License (1.1).

That means you can use them in commercial and personal projects, modify and share them. You cannot, however, redistribute them or sell them for profit.

Controllercons are an unofficial set of video controller icons.
They are not affiliated with any console or controller manufacturers.