Caffeine Icons Custom OSX Menubar Icons

Icons to match the system menubar icon style

Caffeine is a brilliant little Mac app that prevents the display from going to sleep, which can be really useful in many situations. The app is controlled from its icon in the menubar; this means it's easy to activate or deactivate the app quickly and it doesn't take up any room in the Dock. However, the default icons don't match the system style so I decided to create my own that were more in keeping with the rest of my menubar icons.

Designing at such a small scale (only 22px wide by 20px high) can prove challenging, so I began by creating a document with grid set up to the correct size and 'snap to grid' turned on. This gave me an easy way of moving the individual pixels around until I was happy with the design. I then saved the files using the corresponding file names of the original files. I used the .png file format to match the original icons file type - using the .png format also keeps the transparency of the background.

To change the icons

  1. Download the Caffeine app (available on the Mac App Store) and the replacement custom icons (available here)

  2. Please quit Caffeine if it is currently running

  3. Right click on the Caffeine app and select 'Show Package Contents' from the menu

  4. Navigate into the 'Contents' folder and then into the 'Resources' folder

  5. If you'd like to make a backup of the original menubar icon .png files copy them to a safe place

  6. Unzip the custom icon zip file and drag the new icons into the 'Resources' folder, replacing the original icons

  7. Close the folders and launch the Caffeine app. The icons should have changed

These icons are provided as-is, please use at your own risk.


I have a keen and wide ranging passion for design, from traditional elements such as page layout and typography to newer aspects of design, such as Graphical User Interfaces, which often overlap with my interest in technology. The little details fascinate me;
a trait which has helped shape my precise approach to design. Whilst primarily a designer, my enjoyment of creating things extends to other creative outlets such as photography and drawing.

Chris studied Graphic Communication at Loughborough University, graduating in 2012.



Phone: 07940 733833

All Content © Chris McLean