apple-dev-mcp/content/universal/icons.md

Complete Apple development guidance: Human Interface Guidelines (design) + Technical Documentation for iOS, macOS, watchOS, tvOS, and visionOS

---
title: Icons
platform: universal
category: layout
url: https://developer.apple.com/design/human-interface-guidelines/icons
quality_score: 0.49
content_length: 11560
last_updated: 2025-07-20T03:43:06.589Z
keywords: ["icons","universal","layout","visual","interface","color","design","system","buttons","images","accessibility","navigation","selection"]
has_code_examples: false
has_images: false
is_fallback: false
---

June 9, 2025 Added a table of SF Symbols that represent common actions. Icons An effective icon is a graphic asset that expresses a single concept in ways people instantly understand. Apps and games use a variety of simple icons to help people understand the items, actions, and modes they can choose. Unlike app icons, which can use rich visual details like shading, texturing, and highlighting to evoke the app’s personality, an interface icon typically uses streamlined shapes and touches of color to communicate a straightforward idea. You can design interface icons — also called glyphs — or you can choose symbols from the SF Symbols app, using them as-is or customizing them to suit your needs. Both interface icons and symbols use black and clear colors to define their shapes; the system can apply other colors to the black areas in each image. For guidance, see SF Symbols. Best practices Create a recognizable, highly simplified design. Too many details can make an interface icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly. In general, icons work best when they use familiar visual metaphors that are directly related to the actions they initiate or content they represent. Maintain visual consistency across all interface icons in your app. Whether you use only custom icons or mix custom and system-provided ones, all interface icons in your app need to use a consistent size, level of detail, stroke thickness (or weight), and perspective. Depending on the visual weight of an icon, you may need to adjust its dimensions to ensure that it appears visually consistent with other icons. To help achieve visual consistency, adjust individual icon sizes as necessary……and use the same stroke weight in every icon. In general, match the weights of interface icons and adjacent text. Unless you want to emphasize either the icons or the text, using the same weight for both gives your content a consistent appearance and level of emphasis. If necessary, add padding to a custom interface icon to achieve optical alignment. Some icons — especially asymmetric ones — can look unbalanced when you center them geometrically instead of optically. For example, the download icon shown below has more visual weight on the bottom than on the top, which can make it look too low if it’s geometrically centered. An asymmetric icon can look off center even though it’s not. In such cases, you can slightly adjust the position of the icon until it’s optically centered. When you create an asset that includes your adjustments as padding around an interface icon (as shown below on the right), you can optically center the icon by geometrically centering the asset. Moving the icon a few pixels higher optically centers it; including the pixels in padding simplifies centering. Adjustments for optical centering are typically very small, but they can have a big impact on your app’s appearance. Before optical centering (left) and after optical centering (right).Provide a selected-state version of an interface icon only if necessary. You don’t need to provide selected and unselected appearances for an icon that’s used in standard system components such as toolbars, tab bars, and buttons. The system updates the visual appearance of the selected state automatically. In a toolbar, a selected icon receives the app’s accent color. Use inclusive images. Consider how your icons can be understandable and welcoming to everyone. Prefer depicting gender-neutral human figures and avoid images that might be hard to recognize across different cultures or languages. For guidance, see Inclusion. Include text in your design only when it’s essential for conveying meaning. For example, using a character in an interface icon that represents text formatting can be the most direct way to communicate the concept. If you need to display individual characters in your icon, be sure to localize them. If you need to suggest a passage of text, design an abstract representation of it, and include a flipped version of the icon to use when the context is right-to-left. For guidance, see Right to left. Create localized versions of an icon that displays individual characters. Create a flipped version of an icon that suggests reading direction. If you create a custom interface icon, use a vector format like PDF or SVG. The system automatically scales a vector-based interface icon for high-resolution displays, so you don’t need to provide high-resolution versions of it. In contrast, PNG — used for app icons and other images that include effects like shading, textures, and highlighting — doesn’t support scaling, so you have to supply multiple versions for each PNG-based interface icon. Alternatively, you can create a custom SF Symbol and specify a scale that ensures the symbol’s emphasis matches adjacent text. For guidance, see SF Symbols. Provide alternative text labels for custom interface icons. Alternative text labels — or accessibility descriptions — aren’t visible, but they let Voice Over audibly describe what’s onscreen, simplifying navigation for people with visual disabilities. For guidance, see Voice Over. Avoid using replicas of Apple hardware products. Hardware designs tend to change frequently and can make your interface icons and other content appear dated. If you must display Apple hardware, use only the images available in Apple Design Resources or the SF Symbols that represent various Apple products. Standard icons For icons to represent common actions in menus, toolbars, buttons, and other places in interfaces across Apple platforms, you can use these SF Symbols. Editing Action Icon Symbol name Cutscissors Copydocument.on.document Pastedocument.on.clipboard Donecheckmark Save Cancelxmark Close Deletetrash Undoarrow.uturn.backward Redoarrow.uturn.forward Composesquare.and.pencil Duplicateplus.square.on.square Renamepencil Move tofolder Folder Attachpaperclip Addplus Moreellipsis Selection Action Icon Symbol name Selectcheckmark.circle Deselectxmark Close Deletetrash Text formatting Action Icon Symbol name Superscripttextformat.superscript Subscripttextformat.subscript Boldbold Italicitalic Underlineunderline​​Align Lefttext.alignleft Centertext.aligncenter Justifiedtext.justify Align Righttext.alignright Search Action Icon Symbol name Searchmagnifyingglass Findtext.page.badge.magnifyingglass Find and Replace Find Next Find Previous Use Selection for Find Filterline.3.horizontal.decrease Sharing and exporting Action Icon Symbol name Sharesquare.and.arrow.up Export Printprinter Users and accounts Action Icon Symbol name Accountperson.crop.circle User Profile Ratings Action Icon Symbol name Dislikehand.thumbsdown Likehand.thumbsup Layer ordering Action Icon Symbol name Bring to Frontsquare.3.layers.3 d.top.filled Send to Backsquare.3.layers.3 d.bottom.filled Bring Forwardsquare.2.layers.3 d.top.filled Send Backwardsquare.2.layers.3 d.bottom.filled Other Action Icon Symbol name Alarmalarm Archivearchivebox Calendarcalendarmac OSDocument icons If your mac OS app can use a custom document type, you can create a document icon to represent it. Traditionally, a document icon looks like a piece of paper with its top-right corner folded down. This distinctive appearance helps people distinguish documents from apps and other content, even when icon sizes are small. If you don’t supply a document icon for a file type you support, mac OS creates one for you by compositing your app icon and the file’s extension onto the canvas. For example, Preview uses a system-generated document icon to represent JPG files. In some cases, it can make sense to create a set of document icons to represent a range of file types your app handles. For example, Xcode uses custom document icons to help people distinguish projects, AR objects, and Swift code files. To create a custom document icon, you can supply any combination of background fill, center image, and text. The system layers, positions, and masks these elements as needed and composites them onto the familiar folded-corner icon shape. Background fill Center image Textmac OS composites the elements you supply to produce your custom document icon. Apple Design Resources provides a template you can use to create a custom background fill and center image for a document icon. As you use this template, follow the guidelines below. Design simple images that clearly communicate the document type. Whether you use a background fill, a center image, or both, prefer uncomplicated shapes and a reduced palette of distinct colors. Your document icon can display as small as 16 x 16 px, so you want to create designs that remain recognizable at every size. Designing a single, expressive image for the background fill can be a great way to help people understand and recognize a document type. For example, Xcode and Text Edit both use rich background images that don’t include a center image. Consider reducing complexity in the small versions of your document icon. Icon details that are clear in large versions can look blurry and be hard to recognize in small versions. For example, to ensure that the grid lines in the custom heart document icon remain clear in intermediate sizes, you might use fewer lines and thicken them by aligning them to the reduced pixel grid. In the 16 x 16 px size, you might remove the lines altogether. The 32 x 32 px icon has fewer grid lines and a thicker EKG line. The 16 x 16 px @2 x icon retains the EKG line but has no grid lines. The 16 x 16 px @1 x icon has no EKG line and no grid lines. Avoid placing important content in the top-right corner of your background fill. The system automatically masks your image to fit the document icon shape and draws the white folded corner on top of the fill. Create a set of background images in the sizes listed below.512 x 512 px @1 x, 1024 x 1024 px @2 x 256 x 256 px @1 x, 512 x 512 px @2 x 128 x 128 px @1 x, 256 x 256 px @2 x 32 x 32 px @1 x, 64 x 64 px @2 x 16 x 16 px @1 x, 32 x 32 px @2 x If a familiar object can convey a document’s type or its connection with your app, consider creating a center image that depicts it. Design a simple, unambiguous image that’s clear and recognizable at every size. The center image measures half the size of the overall document icon canvas. For example, to create a center image for a 32 x 32 px document icon, use an image canvas that measures 16 x 16 px. You can provide center images in the following sizes:256 x 256 px @1 x, 512 x 512 px @2 x 128 x 128 px @1 x, 256 x 256 px @2 x 32 x 32 px @1 x, 64 x 64 px @2 x 16 x 16 px @1 x, 32 x 32 px @2 x Define a margin that measures about 10% of the image canvas and keep most of the image within it. Although parts of the image can extend into this margin for optical alignment, it’s best when the image occupies about 80% of the image canvas. For example, most of the center image in a 256 x 256 px canvas would fit in an area that measures 205 x 205 px. Specify a succinct term if it helps people understand your document type. By default, the system displays a document’s extension at the bottom edge of the document icon, but if the extension is unfamiliar you can supply a more descriptive term. For example, the document icon for a Scene Kit scene file uses the term scene instead of the file extension scn. The system automatically scales the extension text to fit in the document icon, so be sure to use a term that’s short enough to be legible at small sizes. By default, the system capitalizes every letter in the text.