{
    "componentChunkName": "component---src-pages-iconography-app-icons-usage-mdx",
    "path": "/iconography/app-icons/usage/",
    "result": {"pageContext":{"frontmatter":{"title":"App icons","description":"App icons represent products or services within web platforms and marketplaces. Find out how usage and color choices differ by native OS. See our gallery.","tabs":["Library","Design","Usage","Contribute"]},"relativePagePath":"/iconography/app-icons/usage.mdx","titleType":"append","MdxNode":{"id":"045a92ff-ba97-5580-91ad-076f2d787b1c","children":[],"parent":"4e9f0efc-0e8d-5a14-b393-3e944162ae45","internal":{"content":"---\ntitle: App icons\ndescription:\n  App icons represent products or services within web platforms and\n  marketplaces. Find out how usage and color choices differ by native OS. See\n  our gallery.\ntabs: [Library, Design, Usage, Contribute]\n---\n\nimport { customTabBotton } from './Icons.module.scss'\nimport * as styles from './custom-table.module.scss'\n\n<PageDescription>\n\nWhile app icons follow the same usage conventions as IBM UI icons when used in product and web platforms, there are differences when they’re used in native OS applications and app store environments. Check the gallery of existing app icons before designing a new one to avoid confusion with similar icons already in use.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Sizing</AnchorLink>\n  <AnchorLink>Alignment</AnchorLink>\n  <AnchorLink>Containers</AnchorLink>\n  <AnchorLink>Clearance</AnchorLink>\n  <AnchorLink>Color</AnchorLink>\n  <AnchorLink>Icon versus logo usage</AnchorLink>\n  <AnchorLink>App icons in action</AnchorLink>\n</AnchorLinks>\n\n## Sizing\n\nFor effective use in product interfaces, app icons are optimized for four core sizes: 16px, 20px, 24px and 32px. \nThese sizes ensure clarity and consistency in functional contexts. For more expressive applications, such as marketing, icons may be used at 48px and above. \nTo maintain visual integrity, always use icons at their original sizes or scale them using approved size increments as described below.\n\n<Tabs>\n<Tab label=\"Icon sizes\">\n\n<ArtDirection>\n\n![Sizing for app icons](images/v2/01-idl-iconography-app-icons-usage.png)\n![Sizing for app icons](images/v2/01-idl-iconography-app-icons-usage.png)\n\n</ArtDirection>\n\n<Row>\n<Column colMd={8} colLg={12} noGutterSm>\n  \n<div className={styles.tableContainer}>\n    <table className=\"page-table\">\n      <thead>\n        <tr>\n          <th className={styles.tableHeader}>Icon sizing</th>\n          <th className={styles.tableHeader}></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>For productive use in product, app icons work best in four sizes: 16px, 20px, 24px and 32px. For expressive use, 48px and above may be used.</td>\n          <td/>\n        </tr>\n      </tbody>\n    </table>\n</div>\n\n</Column>\n</Row>\n\n</Tab>\n<Tab label=\"Sizing specifications\">\n\n<div className={styles.upperTable}>\n\n| Icon size | Stroke width | Padding | Live area | Corner radius |\n| --------- | ------------ | ------- | --------- | ------------- |\n| 16px      | 1px          | 1px     | 14px      | 1px           |\n| 20px      | 1.25px       | 1.25px  | 17.5px    | 1.25px        |\n| 24px      | 1.5px        | 1.5px   | 21px      | 1.5px         |\n| 32px      | 2px          | 2px     | 28px      | 2px           |\n| 48px      | 3px          | 3px     | 42px      | 3px           |\n| 64px      | 4px          | 4px     | 56px      | 4px           |\n| 80px      | 5px          | 5px     | 70px      | 5px           |\n| 96px      | 6px          | 6px     | 84px      | 6px           |\n\n</div>\n\n<Row>\n<Column colMd={8} colLg={12} noGutterSm>\n  \n<div className={styles.tableContainer}>\n    <table className=\"page-table\">\n      <thead>\n        <tr>\n          <th className={styles.secondHeader}>Sizing specifications</th>\n          <th className={styles.secondHeader}></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>Use icons at their original sizes or scale at accepted increments. Refer to the table for recommended adjustments to icon stroke width, padding, live area, and corner radius.</td>\n          <td/>\n        </tr>\n      </tbody>\n    </table>\n</div>\n\n</Column>\n</Row>\n\n</Tab>\n</Tabs>\n\n## Alignment\n\nApp icons are optically aligned to the center of the icon grid within the boundary box. Centering ensures all icons will be aligned correctly when exported and used side by side.\n\n<ArtDirection>\n\n![Alignment example](images/2_2-1_Alignment_Mobile.svg)\n![Alignment example](images/2_2-1_Alignment.svg)\n\n</ArtDirection>\n\n## Containers\n\nApp icons can be represented in a circular or rectangular container calculated based on the padding size.\n\n<ArtDirection>\n\n![Padding example](images/2_3-1_Containers_Mobile_v2.svg)\n![Padding example](images/2_3-1_Containers_v2.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Keep icons at scale and centered within the container.\">\n\n![Correct padding for containers](images/2_3-3_Containers_Do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t resize icons outside of accepted proportions.\">\n\n![Incorrect padding for containers](images/2_3-4_Containers_Dont.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"Only use circle or square shapes for containers.\">\n\n![Icon in circle container](images/2_3-5_Containers_Do2.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t create new shapes for containers.\">\n\n![Icon in hexagon container](images/2_3-6_Containers_Dont2.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"Always center align icons in their containers.\">\n\n![Correctly sized and positioned icon in circle container](images/2_3-7_Containers_Do3.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t crop icons inside containers.\">\n\n![Cropped and enlarged icon in circle container](images/2_3-8_Containers_Dont3.svg)\n\n</DoDont>\n</DoDontRow>\n\n### Containers for native operating systems\n\nIcons for native operating systems appear in a variety of contexts, such as task bars, user-customized wallpapers, notifications, system preferences, favicons and more. In most systems, a background container shape is needed to provide proper contrast against the large variety of backgrounds. Check the requirements of the operating system your product will be published on to determine whether your icon should have a container shape. Design recommendations for favicons can be found within the guidance for [Carbon for IBM Products](https://pages.github.ibm.com/carbon/ibm-products/guidelines/content/browser-tabs/#favicons).\n\n<DoDontRow>\n<DoDont caption=\"In most cases, containers are needed for icons that appear in native operating systems.\" colLg=\"6\">\n\n![Circle containers used for MacOS](images/v2/10-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use containers within the product itself. The icon will be too small.\" colLg=\"6\">\n\n![Icon in circle container used in product](images/v2/11-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n#### Android adaptive icons\n\nAndroid app icons have user-customizable masks as container shapes and  make use of foreground and background layers to achieve parallax  effects. You can separate your icon’s elements into the two layers to  make use of this feature.\n\n<GifPlayer color='dark'>\n\n![Android Adaptive Icons](images/2_3-11_Containers_NativeOS_Adapticon.gif)\n\n</GifPlayer>\n\n## Clearance\n\nWhen designing with app icons, all artwork should include minimum padding based on 1/4 of the scaled icon grid size. The padding can be increased by increments of 1/4 grid units.\n\n<ArtDirection>\n\n![Clearance example](images/v2/13-idl-iconography-app-icons-usage.png)\n![Clearance example](images/v2/13-idl-iconography-app-icons-usage.png)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Follow the clearance rule to allow for legibility and an optimal touch experience.\">\n\n![Correct clearance](images/v2/14-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t collapse the icon clearance area.\">\n\n![Incorrect clearance](images/v2/15-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## Color\n\nApp icons are created in four themes: dark theme, light theme, monochromatic dark theme and monochromatic light theme. To ensure accessibility, use the color theme that corresponds with the icon’s background color.\n\n<ArtDirection>\n\n![App icon in 4 color themes](images/2_5-1_Color_Mobile.svg)\n![App icon in 4 color themes](images/2_5-1_Color.svg)\n\n</ArtDirection>\n\n| Background color value | Icon theme                        |\n| ---------------------- | --------------------------------- |\n| White, 10–20           | Light theme                       |\n| 30–50                  | Monochromatic light theme (Black) |\n| 50–80                  | Monochromatic dark theme (White)  |\n| Black, 90–100          | Dark theme                        |\n\n<DoDontRow>\n<DoDont caption=\"Use the correct icon theme for the background color.\">\n\n![Icon with correct color theme](images/2_5-2_Color_Do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use the incorrect icon theme.\">\n\n![Icon with incorrect color theme](images/2_5-3_Color_Dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n### Monochromatic icons\n\nIn some limited use cases, you may need a single-color app icon. Generally, these icons are used when the icon appears on a color background or in situations when the icon shouldn’t call attention to itself with color, such as disabled states.\n\n<DoDontRow>\n<DoDont caption=\"Use monochromatic theme icons on color fields.\">\n\n![Monochromatic icon on blue background](images/2_5-4_Color_Do2.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use dark or light theme icons on color fields.\">\n\n![Dark theme icon on purple background](images/2_5-5_Color_Dont2.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Icon versus logo usage\n\nApp icons are not logos. It should be clear that any communication featuring an app icon is coming from the master IBM brand, never the product itself. Avoid using app icons in ways that convey the product as a brand.\n\n<DoDontRow>\n<DoDont caption=\"Separate the icon and product name so they don’t appear as a single asset.\" colLg=\"6\">\n\n![Standing banner with appropriate separation of icon and product name](images/v2/21-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t create lockups with the icon and product name.\" colLg=\"6\">\n\n![App icon paired with product name](images/v2/22-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons and logos may be used in the same composition with clear separation and hierarchy.\" colLg=\"6\">\n\n![Product screen with separated app icon and IBM logo](images/v2/23-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t pair app icons with logos.\" colLg=\"6\">\n\n![App icon paired with IBM logo](images/2_6-4_Usage_Dont2.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used with type to identify a product or service in the context of a product or marketplace.\" colLg=\"6\">\n\n![Product screen with app icons and product names](images/2_6-5_Usage_Do3.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons in product headers.\" colLg=\"6\">\n\n![App icon with product name in product header](images/2_6-6_Usage_Dont3.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used as hero graphics in videos or presentation slides.\" colLg=\"6\">\n\n![App icon in a video](images/2_6-9_Usage_Do5.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons as intros or outros in videos or presentation slides.\" colLg=\"6\">\n\n![App icon as a video sign-off](images/2_6-10_Usage_Dont5.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used as hero graphics in marketing communications.\" colLg=\"6\">\n\n![Large app icon in a social tile](images/v2/29-idl-iconography-app-icons-usage-v2.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons as a replacement for logos or as a sign-off in communications.\" colLg=\"6\">\n\n![Small app icon in the corner of a social tile](images/v2/30-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used as hero graphics for merchandise.\" colLg=\"6\">\n\n![Large app icon on a T-shirt](images/v2/31-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons as a replacement for logos or as a sign-off on merchandise.\" colLg=\"6\">\n\n![Small app icon in the corner of a hand bag](images/v2/32-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## App icons in action\n\n<ImageGallery>\n<ImageGalleryImage alt=\"App icons in-product, IBM Security\" title=\"App icons in-product, IBM Security\" col={12}>\n\n![App icons in-product, IBM Security](images/v2/33-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Product catalog example\" title=\"Product catalog example\" col={8}>\n\n![Product catalog example](images/v2/34-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"Product catalog example\" title=\"Product catalog example\" col={4}>\n\n![Product catalog example](images/v2/34-idl-iconography-app-icons-usage1.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"App icons on iOS\" title=\"App icons on iOS\" col={12}>\n\n![App icons on iOS](images/v2/35-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"App icon in iOS container\" title=\"App icon in iOS container\" col={4}>\n\n![App icon in iOS container](images/v2/36-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Mobile app support page\" title=\"Mobile app support page\" col={8}>\n\n![Mobile app support page](images/v2/37-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n</ImageGallery>\n","type":"Mdx","contentDigest":"a24f7fddb54942f12f3638dd87efe343","owner":"gatsby-plugin-mdx","counter":1932},"frontmatter":{"title":"App icons","description":"App icons represent products or services within web platforms and marketplaces. Find out how usage and color choices differ by native OS. See our gallery.","tabs":["Library","Design","Usage","Contribute"]},"exports":{},"rawBody":"---\ntitle: App icons\ndescription:\n  App icons represent products or services within web platforms and\n  marketplaces. Find out how usage and color choices differ by native OS. See\n  our gallery.\ntabs: [Library, Design, Usage, Contribute]\n---\n\nimport { customTabBotton } from './Icons.module.scss'\nimport * as styles from './custom-table.module.scss'\n\n<PageDescription>\n\nWhile app icons follow the same usage conventions as IBM UI icons when used in product and web platforms, there are differences when they’re used in native OS applications and app store environments. Check the gallery of existing app icons before designing a new one to avoid confusion with similar icons already in use.\n\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Sizing</AnchorLink>\n  <AnchorLink>Alignment</AnchorLink>\n  <AnchorLink>Containers</AnchorLink>\n  <AnchorLink>Clearance</AnchorLink>\n  <AnchorLink>Color</AnchorLink>\n  <AnchorLink>Icon versus logo usage</AnchorLink>\n  <AnchorLink>App icons in action</AnchorLink>\n</AnchorLinks>\n\n## Sizing\n\nFor effective use in product interfaces, app icons are optimized for four core sizes: 16px, 20px, 24px and 32px. \nThese sizes ensure clarity and consistency in functional contexts. For more expressive applications, such as marketing, icons may be used at 48px and above. \nTo maintain visual integrity, always use icons at their original sizes or scale them using approved size increments as described below.\n\n<Tabs>\n<Tab label=\"Icon sizes\">\n\n<ArtDirection>\n\n![Sizing for app icons](images/v2/01-idl-iconography-app-icons-usage.png)\n![Sizing for app icons](images/v2/01-idl-iconography-app-icons-usage.png)\n\n</ArtDirection>\n\n<Row>\n<Column colMd={8} colLg={12} noGutterSm>\n  \n<div className={styles.tableContainer}>\n    <table className=\"page-table\">\n      <thead>\n        <tr>\n          <th className={styles.tableHeader}>Icon sizing</th>\n          <th className={styles.tableHeader}></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>For productive use in product, app icons work best in four sizes: 16px, 20px, 24px and 32px. For expressive use, 48px and above may be used.</td>\n          <td/>\n        </tr>\n      </tbody>\n    </table>\n</div>\n\n</Column>\n</Row>\n\n</Tab>\n<Tab label=\"Sizing specifications\">\n\n<div className={styles.upperTable}>\n\n| Icon size | Stroke width | Padding | Live area | Corner radius |\n| --------- | ------------ | ------- | --------- | ------------- |\n| 16px      | 1px          | 1px     | 14px      | 1px           |\n| 20px      | 1.25px       | 1.25px  | 17.5px    | 1.25px        |\n| 24px      | 1.5px        | 1.5px   | 21px      | 1.5px         |\n| 32px      | 2px          | 2px     | 28px      | 2px           |\n| 48px      | 3px          | 3px     | 42px      | 3px           |\n| 64px      | 4px          | 4px     | 56px      | 4px           |\n| 80px      | 5px          | 5px     | 70px      | 5px           |\n| 96px      | 6px          | 6px     | 84px      | 6px           |\n\n</div>\n\n<Row>\n<Column colMd={8} colLg={12} noGutterSm>\n  \n<div className={styles.tableContainer}>\n    <table className=\"page-table\">\n      <thead>\n        <tr>\n          <th className={styles.secondHeader}>Sizing specifications</th>\n          <th className={styles.secondHeader}></th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr>\n          <td>Use icons at their original sizes or scale at accepted increments. Refer to the table for recommended adjustments to icon stroke width, padding, live area, and corner radius.</td>\n          <td/>\n        </tr>\n      </tbody>\n    </table>\n</div>\n\n</Column>\n</Row>\n\n</Tab>\n</Tabs>\n\n## Alignment\n\nApp icons are optically aligned to the center of the icon grid within the boundary box. Centering ensures all icons will be aligned correctly when exported and used side by side.\n\n<ArtDirection>\n\n![Alignment example](images/2_2-1_Alignment_Mobile.svg)\n![Alignment example](images/2_2-1_Alignment.svg)\n\n</ArtDirection>\n\n## Containers\n\nApp icons can be represented in a circular or rectangular container calculated based on the padding size.\n\n<ArtDirection>\n\n![Padding example](images/2_3-1_Containers_Mobile_v2.svg)\n![Padding example](images/2_3-1_Containers_v2.svg)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Keep icons at scale and centered within the container.\">\n\n![Correct padding for containers](images/2_3-3_Containers_Do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t resize icons outside of accepted proportions.\">\n\n![Incorrect padding for containers](images/2_3-4_Containers_Dont.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"Only use circle or square shapes for containers.\">\n\n![Icon in circle container](images/2_3-5_Containers_Do2.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t create new shapes for containers.\">\n\n![Icon in hexagon container](images/2_3-6_Containers_Dont2.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"Always center align icons in their containers.\">\n\n![Correctly sized and positioned icon in circle container](images/2_3-7_Containers_Do3.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t crop icons inside containers.\">\n\n![Cropped and enlarged icon in circle container](images/2_3-8_Containers_Dont3.svg)\n\n</DoDont>\n</DoDontRow>\n\n### Containers for native operating systems\n\nIcons for native operating systems appear in a variety of contexts, such as task bars, user-customized wallpapers, notifications, system preferences, favicons and more. In most systems, a background container shape is needed to provide proper contrast against the large variety of backgrounds. Check the requirements of the operating system your product will be published on to determine whether your icon should have a container shape. Design recommendations for favicons can be found within the guidance for [Carbon for IBM Products](https://pages.github.ibm.com/carbon/ibm-products/guidelines/content/browser-tabs/#favicons).\n\n<DoDontRow>\n<DoDont caption=\"In most cases, containers are needed for icons that appear in native operating systems.\" colLg=\"6\">\n\n![Circle containers used for MacOS](images/v2/10-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use containers within the product itself. The icon will be too small.\" colLg=\"6\">\n\n![Icon in circle container used in product](images/v2/11-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n#### Android adaptive icons\n\nAndroid app icons have user-customizable masks as container shapes and  make use of foreground and background layers to achieve parallax  effects. You can separate your icon’s elements into the two layers to  make use of this feature.\n\n<GifPlayer color='dark'>\n\n![Android Adaptive Icons](images/2_3-11_Containers_NativeOS_Adapticon.gif)\n\n</GifPlayer>\n\n## Clearance\n\nWhen designing with app icons, all artwork should include minimum padding based on 1/4 of the scaled icon grid size. The padding can be increased by increments of 1/4 grid units.\n\n<ArtDirection>\n\n![Clearance example](images/v2/13-idl-iconography-app-icons-usage.png)\n![Clearance example](images/v2/13-idl-iconography-app-icons-usage.png)\n\n</ArtDirection>\n\n<DoDontRow>\n<DoDont caption=\"Follow the clearance rule to allow for legibility and an optimal touch experience.\">\n\n![Correct clearance](images/v2/14-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t collapse the icon clearance area.\">\n\n![Incorrect clearance](images/v2/15-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## Color\n\nApp icons are created in four themes: dark theme, light theme, monochromatic dark theme and monochromatic light theme. To ensure accessibility, use the color theme that corresponds with the icon’s background color.\n\n<ArtDirection>\n\n![App icon in 4 color themes](images/2_5-1_Color_Mobile.svg)\n![App icon in 4 color themes](images/2_5-1_Color.svg)\n\n</ArtDirection>\n\n| Background color value | Icon theme                        |\n| ---------------------- | --------------------------------- |\n| White, 10–20           | Light theme                       |\n| 30–50                  | Monochromatic light theme (Black) |\n| 50–80                  | Monochromatic dark theme (White)  |\n| Black, 90–100          | Dark theme                        |\n\n<DoDontRow>\n<DoDont caption=\"Use the correct icon theme for the background color.\">\n\n![Icon with correct color theme](images/2_5-2_Color_Do.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use the incorrect icon theme.\">\n\n![Icon with incorrect color theme](images/2_5-3_Color_Dont.svg)\n\n</DoDont>\n</DoDontRow>\n\n### Monochromatic icons\n\nIn some limited use cases, you may need a single-color app icon. Generally, these icons are used when the icon appears on a color background or in situations when the icon shouldn’t call attention to itself with color, such as disabled states.\n\n<DoDontRow>\n<DoDont caption=\"Use monochromatic theme icons on color fields.\">\n\n![Monochromatic icon on blue background](images/2_5-4_Color_Do2.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use dark or light theme icons on color fields.\">\n\n![Dark theme icon on purple background](images/2_5-5_Color_Dont2.svg)\n\n</DoDont>\n</DoDontRow>\n\n## Icon versus logo usage\n\nApp icons are not logos. It should be clear that any communication featuring an app icon is coming from the master IBM brand, never the product itself. Avoid using app icons in ways that convey the product as a brand.\n\n<DoDontRow>\n<DoDont caption=\"Separate the icon and product name so they don’t appear as a single asset.\" colLg=\"6\">\n\n![Standing banner with appropriate separation of icon and product name](images/v2/21-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t create lockups with the icon and product name.\" colLg=\"6\">\n\n![App icon paired with product name](images/v2/22-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons and logos may be used in the same composition with clear separation and hierarchy.\" colLg=\"6\">\n\n![Product screen with separated app icon and IBM logo](images/v2/23-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t pair app icons with logos.\" colLg=\"6\">\n\n![App icon paired with IBM logo](images/2_6-4_Usage_Dont2.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used with type to identify a product or service in the context of a product or marketplace.\" colLg=\"6\">\n\n![Product screen with app icons and product names](images/2_6-5_Usage_Do3.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons in product headers.\" colLg=\"6\">\n\n![App icon with product name in product header](images/2_6-6_Usage_Dont3.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used as hero graphics in videos or presentation slides.\" colLg=\"6\">\n\n![App icon in a video](images/2_6-9_Usage_Do5.svg)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons as intros or outros in videos or presentation slides.\" colLg=\"6\">\n\n![App icon as a video sign-off](images/2_6-10_Usage_Dont5.svg)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used as hero graphics in marketing communications.\" colLg=\"6\">\n\n![Large app icon in a social tile](images/v2/29-idl-iconography-app-icons-usage-v2.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons as a replacement for logos or as a sign-off in communications.\" colLg=\"6\">\n\n![Small app icon in the corner of a social tile](images/v2/30-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n<DoDontRow>\n<DoDont caption=\"App icons may be used as hero graphics for merchandise.\" colLg=\"6\">\n\n![Large app icon on a T-shirt](images/v2/31-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n<DoDont type=\"dont\" caption=\"Don’t use app icons as a replacement for logos or as a sign-off on merchandise.\" colLg=\"6\">\n\n![Small app icon in the corner of a hand bag](images/v2/32-idl-iconography-app-icons-usage.png)\n\n</DoDont>\n</DoDontRow>\n\n## App icons in action\n\n<ImageGallery>\n<ImageGalleryImage alt=\"App icons in-product, IBM Security\" title=\"App icons in-product, IBM Security\" col={12}>\n\n![App icons in-product, IBM Security](images/v2/33-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Product catalog example\" title=\"Product catalog example\" col={8}>\n\n![Product catalog example](images/v2/34-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n\n<ImageGalleryImage alt=\"Product catalog example\" title=\"Product catalog example\" col={4}>\n\n![Product catalog example](images/v2/34-idl-iconography-app-icons-usage1.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"App icons on iOS\" title=\"App icons on iOS\" col={12}>\n\n![App icons on iOS](images/v2/35-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"App icon in iOS container\" title=\"App icon in iOS container\" col={4}>\n\n![App icon in iOS container](images/v2/36-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Mobile app support page\" title=\"Mobile app support page\" col={8}>\n\n![Mobile app support page](images/v2/37-idl-iconography-app-icons-usage.png)\n\n</ImageGalleryImage>\n</ImageGallery>\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/iconography/app-icons/usage.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}