Icons

FoundationsFoundations

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/icons. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Icons

Best practices

Create a recognizable, highly simplified design.

Maintain visual consistency across all interface icons in your app.

In general, match the weights of interface icons and adjacent text.

If necessary, add padding to a custom interface icon to achieve optical alignment.

Provide a selected-state version of an interface icon only if necessary.

Use inclusive images.

Include text in your design only when it’s essential for conveying meaning.

If you create a custom interface icon, use a vector format like PDF or SVG.

Provide alternative text labels for custom interface icons.

Avoid using replicas of Apple hardware products.

Standard icons

Editing

Selection

Text formatting

Sharing and exporting

Users and accounts

Ratings

Layer ordering

Other

Platform considerations

macOS

Document icons

Design simple images that clearly communicate the document type.

Designing a single, expressive image for the background fill can be a great way to help people understand and recognize a document type.

Consider reducing complexity in the small versions of your document icon.

Avoid placing important content in the top-right corner of your background fill.

  • 512x512 px @1x, 1024x1024 px @2x

  • 256x256 px @1x, 512x512 px @2x

  • 128x128 px @1x, 256x256 px @2x

  • 32x32 px @1x, 64x64 px @2x

  • 16x16 px @1x, 32x32 px @2x

If a familiar object can convey a document’s type or its connection with your app, consider creating a center image that depicts it.

  • 256x256 px @1x, 512x512 px @2x

  • 128x128 px @1x, 256x256 px @2x

  • 32x32 px @1x, 64x64 px @2x

  • 16x16 px @1x, 32x32 px @2x

Define a margin that measures about 10% of the image canvas and keep most of the image within it.

Specify a succinct term if it helps people understand your document type.

Resources

Videos

Change log


For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/icons

Get HIG guidance in your AI

Install Apple HIG Skills and get expert design guidance directly in Claude Code.

npx skills add raintree-technology/apple-hig-skills
Email updates aren't configured on this deployment yet. Follow the GitHub repo (opens in new tab) for updates.