Create a duotone icon effect in Photoshop

Duotone icons use two carefully selected colours to create a strong visual identity with very little visual noise. The effect is especially useful for website navigation, mobile apps, presentation slides and marketing graphics where an ordinary single-colour symbol needs more personality.

Photoshop makes the process straightforward through shape layers, masks and layer styles. With a clean PSD icon or transparent PNG, you can build a reusable colour treatment, adjust its contrast and export a consistent set for digital projects.

Choose a suitable icon source

Start with an icon that has a clear silhouette and enough internal detail to show two tones. Business, finance, travel and technology symbols usually work well because their shapes remain recognisable at small sizes. A cluttered illustration may lose its meaning once colour areas are simplified.

A vector PSD is the most flexible starting point because its paths can be resized without softening the edges. A transparent PNG is also suitable when the icon will stay at a fixed size. Before editing, check its dimensions and read this guide to pixel-perfect icon sizing so the finished asset remains sharp in a browser or app interface.

Set up the Photoshop document

Open the icon in Photoshop and duplicate the original layer. Keep the untouched version hidden at the bottom of the layer stack. This gives you a reliable backup and makes it easy to compare the duotone treatment with the original artwork.

For a new composition, use RGB colour mode for screens and choose a suitable working size, such as 1024 by 1024 pixels. If the icon is intended for a website, create a transparent background unless the design specifically requires a coloured panel. Name layers clearly, for example “Original”, “Duotone base” and “Gradient overlay”.

Build the base colour

If you are working with a PNG, lock the transparent pixels on the icon layer or use the layer’s transparency to create a solid silhouette. A quick method is to select the icon, add a new layer beneath it, and fill the shape with a dark neutral colour. This base will provide definition beneath the brighter gradient.

For a PSD vector, select the relevant shape layer and choose a solid fill in the Properties panel. Avoid pure black unless the design calls for a dramatic appearance; deep navy, charcoal or dark plum often produce a softer result. The base colour should be dark enough to separate the icon from the lightest part of the gradient.

Add the gradient overlay

Double-click the icon layer to open Layer Style, then enable Gradient Overlay. Set the blend mode to Normal or Colour, depending on how much of the original shading you want to retain. Normal produces a stronger, cleaner duotone effect, while Colour preserves some underlying luminance.

Click the gradient preview to edit its stops. Use a dark colour on one end and a brighter accent on the other. Set the style to Linear for a directional transition, or Radial when you want the highlight to radiate from a focal area. An angle of 90 degrees creates a vertical shift, while 0 degrees moves the colour horizontally.

Select colours with purpose

A reliable duotone palette usually combines a deep shade with a vivid highlight. For a technology interface, navy and electric cyan can feel modern. A travel brand might use deep teal with warm coral, while a finance dashboard may benefit from charcoal and a controlled green. Keep the colours related to the wider brand palette rather than choosing two unrelated bright tones.

Test the effect against both light and dark backgrounds. This matters for Australian users moving between outdoor sunlight, office screens and low-light mobile settings. If the lighter stop disappears on white, increase its saturation or darken the surrounding interface. For accessibility, check that essential meaning is not communicated through colour alone, particularly under the Disability Discrimination Act 1992 and common digital accessibility expectations.

Refine edges and visual balance

Zoom in to 100% and inspect corners, thin strokes and small gaps. A gradient can make one side of an icon appear heavier than the other, especially when a bright colour draws attention to a large shape. Adjust the gradient angle, scale and position until the visual weight feels even.

Use a layer mask if one part of the icon needs a controlled adjustment. You can also add a subtle inner shadow or restrained stroke, but avoid effects that make a simple symbol look glossy or dated. Preview the asset at the actual display size used in the interface, such as 16, 24, 32 or 48 pixels.

Create a consistent icon set

When several icons belong to the same interface, apply the same gradient stops, angle and scale wherever possible. Consistency is more important than giving every symbol a different colour treatment. Save the finished layer style as a preset so it can be applied to additional PSD icons with a single click.

A shared system is useful for Australian startups, agencies and ecommerce teams serving customers in Sydney, Melbourne, Brisbane and regional areas. Mobile-first browsing is common, and icons often appear beside short labels in compact layouts. Consistent contrast and spacing help users scan menus quickly on phones, tablets and desktop screens.

Export the finished artwork

Hide the background and export a transparent PNG when the icon will be placed over changing interface colours. Use Export As, select PNG, and keep transparency enabled. For crisp UI assets, export at the required size and at larger scale versions such as 2x or 3x where the development team needs them.

Keep the layered PSD as the master file so the gradient stops, masks and colour values remain editable. If the icon will be printed in a presentation or brochure, create a separate CMYK version and check how the vivid tones convert. For web delivery, remove unnecessary metadata and use clear filenames such as travel-location-duotone-48px.png.

Downloadable PSD and PNG collections from PSD Icons can speed up this workflow when you need a coordinated starting point rather than drawing every symbol from scratch. Free packs are useful for experiments, while premium sets can provide broader coverage for a complete product interface.

Apply the technique to a small test set first, review the icons on real devices, then save the approved gradient style as part of your design library. Browse the PSD Icons collection, choose a suitable icon pack and turn the finished assets into a consistent visual system for your next digital project.