MacOS Dock Setup Guide

Creating icons

The icons in this demo all use real icns files converted to png. These have padding included to account for the shadows.

To create your own in a consistent style, start with a 512px outer frame with 50px padding. The inner frame will be your app and should have 92px radius, with 60% smoothing (you'll need Figma for this).

Find the template below.

Finding icns files on your Mac

Find the app inside the Applications folder, right-click and select "Show Package Contents".

You'll find all the icns files in
Contents/Resources. These will need to be converted to png via the free tool below.

Create a free website with Framer, the website builder loved by startups, designers and agencies.