24 Icons in PSD Format for Photoshop

What Is Inside: 24 Round PSD Icons

The archive is only 491.66 KB and the source file resolution is 800×600 px. Every icon sits inside a round container, giving the whole set a consistent modern minimal style. The preview has a dark background, but the actual PSD file has no background layer — you get clean vector shapes ready to blend into any interface.

+

\u{201c}

Design is not just what it looks like and feels like. Design is how it works. Icons in an interface are not decoration — they are navigation tools.

Icon List

The set covers the essential symbols that handle 80% of typical interface needs. Here is every icon with a practical use case:

• Home — main page navigation. One of the most recognized icons worldwide, no label required;
• Trash — delete action or e‑commerce cart removal;
• Search — magnifier for search fields. Industry standard, no alternatives needed;
• Gear — settings and configuration panel;
• Envelope — contact, mail, newsletter subscription;
• Shopping cart — online store, checkout flow;
• Pencil — edit mode for profiles, comments, posts;
• Star — favorites, ratings, content evaluation;
• Heart — likes, saved items, social interaction;
• Clock — history, recent activity, timestamps;
• User — profile, login, account area;
• Bell — notifications, alerts, system messages;
• Arrow left/right — sliders, step navigation, back/forward;
• Plus/minus — add or remove items, expand lists;
• Checkmark — confirm, success state, option selection;
• Cross — close modals, cancel action, remove tags;
• Cloud — cloud storage, sync, file upload;
• Camera — capture photo, upload image, change avatar;
• Video camera — video, recording, video call;
• Music note — audio, player, podcasts;
• Phone — contacts, callback, support hotline;
• Flag — marker, language selector, gamification achievement;
• Info — help, information, tooltip trigger;
• Question — support, FAQ, help desk.

I recommend renaming the layer groups to match your project naming conventions right after downloading. In large projects this saves hours of searching. The file also preserves original effects: drop shadow, stroke, and gradient. If you need flat Material Design icons, simply uncheck the shadow effect on each layer.

Format Compatibility and Export

The PSD file is your master source. From it you can generate any derivative format. Here is a compatibility breakdown:

The set works perfectly in Photoshop CS6, CC, 2024, 2025, 2026. You can also open it in GIMP or Photopea — the free alternatives that support PSD. However GIMP does not always read Photoshop layer effects correctly. If accuracy of every shadow and stroke matters, stick with the original Photoshop.

For web use I recommend exporting to WebP or SVG. WebP gives smaller file sizes at the same quality compared to PNG. SVG is vector — it stays sharp on retina and high-DPI displays without any extra effort. If your project uses CSS sprites, combine the icons into a single PNG sprite sheet using any sprite generator tool.

PSD Icon Set vs Popular Alternatives

I often see designers struggling to choose between a ready PSD set and hunting for individual icons online. Here is a comparison table to clear things up.

Personally I prefer PSD sets for draft work: throw together a layout, tweak colors, show the client. When the layout is approved I convert the needed icons to SVG and hand them to the developer. One file instead of 24 individual downloads — that is real convenience.

How to Use PSD Icons in Web Design

1. Interfaces and Navigation Buttons

Round icons look great in navigation buttons and toolbars. Their uniform shape creates visual rhythm — the user's eye glides along the row and instantly finds the needed function. Export the icon you need as PNG-24 or convert to SVG.

1. Open PSD → select icon layer 2. Hide background layers 3. File → Export → Export As → PNG-24 or SVG 4. Set size 5. Save

Tip: do not export all 24 icons at once. Take only the ones actually used in your layout. Extra files clutter the assets folder and confuse the developer who takes over your project.

2. Mobile Applications

For mobile interfaces use 48×48 dp — the Google Material Design recommended minimum for touch targets. The base 800×600 px resolution allows scaling down to 150×150 px without losing sharpness. For anything smaller export as SVG instead.

Ctrl + Shift + S — save a copy of the selected icon as PNG in Photoshop. Use this shortcut to avoid overwriting the original PSD file.

3. Favicon and Browser Icons

Turn any round icon into a favicon. Export a square 256×256 px version and convert to ICO at favicon.io or ConvertICO. Keep in mind that browsers handle favicons differently: Chrome uses 192×192 for tabs, Safari uses 16×16 for bookmarks. It is best to prepare multiple sizes.

4. Presentations and Social Media

Insert the icon into Canva, PowerPoint, or Keynote as a transparent PNG. The consistent round style gives your presentation a professional polished look. I use these icons in client pitch decks — they look much cleaner than default Microsoft clipart.

5. Printed Materials

If you are preparing a brochure or business card, convert the PSD to CMYK before printing. Go to Edit → Convert to Profile and choose Coated FOGRA39. Without this step the printed colors will differ noticeably from what you see on your monitor.

Icon Design Principles for UI Work

Alignment and Spacing

Always align icons to the pixel grid. In Photoshop enable View → Snap to Grid and set the grid line spacing to 1 px. Round icons appear visually smaller than square ones, so give them slightly more padding — 6–10 px instead of the standard 4 px. On mobile devices the minimum touch target padding should be 8 px to prevent misclicks.

Color and Contrast

Stick to 2–3 colors across all icons in your interface: an accent color (usually your brand color), a neutral gray for passive elements, and a status color (green for success, red for errors). Avoid making every icon multicolored — that creates visual noise. Users should recognize an icon by its shape, not by its color.

\u{201c}

The best interface is the one the user does not notice. Icons should help, not distract. If an icon needs a label to be understood, it is not working.

Size and Weight Guidelines

Choose size based on context. Here is a proven size grid I use across projects:

• 16×16 px — small elements, tags, status badges;
• 24×24 px — toolbars, table action icons;
• 32×32 px — navigation buttons, social links;
• 48×48 px — mobile home screen icons;
• 64×64 px — large CTAs, promo blocks, feature lists.

Never scale an icon up more than 2 times its original size — pixels will get blurry. Export at the target resolution instead.

Style Consistency

This set is already uniform: all icons are round, with the same stroke weight, corner radius, and similar styling. If you add custom icons, match the same parameters. Copy the Layer Style from an existing icon via right-click → Copy Layer Style, then paste onto your new layer. This preserves visual unity across the entire set.

Download and Installation

↓Download 24 PSD Icons491 KB

What is Color Overlay?Color Overlay is a Photoshop layer effect that replaces the original fill color with your chosen color while preserving textures, shadows, and gradients

If you work in Figma: import the PSD using the PSD Importer plugin. Figma does not natively open PSD files, but the plugin handles simple files. Note that layer effects may reset — you will need to reapply colors. For large projects I recommend keeping the PSD master in Photoshop and loading only ready PNG or SVG files into Figma.

Frequently Asked Questions