Icon Library App

broken image


Updated on August 9, 2019

To run the app, tap the shortcut icon you just created. If you'd like to hide the original app icon (and you're running iOS 14 or later), enter Jiggle mode by pressing and holding a blank area of your home screen and then move the icon to your App Library. Get the free CCPL Mobile app. Get our app to s tream and download books, movies, TV shows, magazines, audiobooks and comic books. Take the library with you anywhere you go. CCPL Mobile is available for FREE download from the App Store, Google Play and Microsoft. Search our catalog for books, magazines, movies, music and more. ⬇️ Get free icons for graphic design, UI, social media, and mobile. Search for static and animated icons with consistent quality. PNG, SVG, GIF, AE formats. Accessing cloudLibrary digital library collection has never been easier, find your library, choose your apps, access digital content - learn how it works on mobile, desktop, amazon, windows, android ios, mac, chrome.

Icons are some of the most-used graphics in web and application design. They're so commonplace, in fact, that most non-designers take them for granted. For designers, though, icons are more than just graphical afterthoughts. They're guideposts that lead web visitors and app users through a complex set of interactions with their favorite sites and tools. Such icons might be flat in design terms, but they're certainly not lifeless. They're a crucial component of user experience, and designers must pick them with care.

Enter icon collections and libraries, where designers at all levels can find the best in icons for their website and app projects. These incredible online collections offer everything from basic icons that viewers are accustomed to seeing in everyday life to specialty sets that speak to a tailored audience. There are thousands of icon collections out there, but these 18 represent the best in terms of diversity, usability and value.

1. The Noun Project

One of the largest icon collections out there, The Noun Project has an icon for almost anything you can imagine. Sourced from a variety of designers, the site offers plenty of icon diversity so that web and app designers can choose unique graphics that users haven't already seen a hundred times. This is a comprehensive icon library that's easy to search.

Key features

Icon Library App Icon

  • Free and paid download options
  • Icon sets
  • A Mac app
  • New icons uploaded on a near-daily basis

2. iconmonstr

iconmonstr is a comprehensive icon library offering over 4,300 icons sorted into 304 different collections. Every icon set offers both outline and filled versions of the graphics to ensure that they can be used for a variety of design applications. The site offers robust search functions and allows users to add icons to their favorites. Every icon is designed using a 24 pixel grid for hassle-free use in a variety of designs.

Key features

  • Free use of all icons
  • Convenient icon sets
  • Four format download options
  • Downsized icons optimized for web use

3. Good Stuff No Nonsense

The funky, hand-drawn icons at Good Stuff No Nonsense are sorted into more than two dozen categories for ease of use. These quirky icons are perfect for designers who want the hand-drawn look but don't have the time or skill to create and upload their own icons. All of the icons on this site are created by one artist, so they offer design consistency and can help bring a branded look to any site or app. Many of the icons are also vectorized for flexible design use.

Key features

  • Low-cost and free icon sets available
  • Custom icon creation services are available
  • Ability to buy icon sets or single icons
  • Icons are available in a variety of formats

4. Orion Icon Library

Orion is a relative newcomer to the icon library world. It is a project created by Pixeden and sets out to provide highly flexible web icons which can be modified directly from their web app. The web app allows you to perform a variety of modifications including corner and cap style, stroke width, and primary/secondary color selection. You can also search through their icon packs or directly from the search bar if you know exactly what you're looking for.

Key features

  • Thousands of icons available for free, even more if you purchase their pro plan
  • Pro plan provides a 'No attribution required license'
  • Easy to use and intuitive web app to modify your icons

5. IcoMoon

Used by large and small companies alike, IcoMoon is an icons collection that sets itself apart by offering both icon fonts and icon packs that support basic glyph editing. Available as both a website and an app, IcoMoon offers more than 4,000 free icons and offline storage of icons. Each icon pack features detailed licensing so that designers and developers know exactly how icons can be used. Users can also make their own custom icon fonts.

Key features

  • Free and paid download options
  • A wide variety of download formats
  • Comprehensive icon management tools
  • Free and easy updates via Cloud synching

6. Pictonic

Pictonic offers an array of icon fonts sorted according to theme. All of the icons are designed using a precise pixel scale so that they can be resized without loss to quality or integrity. Because they are offered as font sets, the icons in this collection can also be stylized using CSS elements instead of outside image editors. The Pictonic site also features a robust blog that details new icon releases and provides use tips for both new and experienced designers.

Key features

  • Ability to buy icon sets or single icons
  • Icons are totally scalable
  • All icons can be styled with CSS
  • Icons are available in a variety of file formats

7. Icons8

With over 85,000 icons and daily updates, the Icons8 collection is hard to beat when it comes to selection and diversity. Users can search icons by tags or can browse more than 50 different thematic collections to find graphics that meet their needs. Icons8 focuses on flat icons that can be used across a variety of platforms and operating systems. Users can send in suggestions if they don't find icons that fit their needs too.

Key features

  • Both free and paid subscription options
  • Access to vector icons that can be modified
  • The ability to easily edit icon color
  • Easy drag and drop to Photoshop, Xcode, Sketch and more

8. Freepik

Like its name suggests, Freepik offers a huge database of free graphics, vectors and icons for use by web and app designers. The icon library section of the site offers more than 100,000 graphics that users can search or browse by theme. The icons range from simple to complex, and an array of line, filled and colored icons are available. Each icon has its own licensing restrictions.

Key features

  • Free for personal and commercial use
  • Icons can be downloaded in PNG, EPS and SVG formats
  • Other vectors and images available on the site can easily be edited for use as icons
  • New icons are added on a regular basis

9. Glyphish

Glypish represents an icons collection with more than 2,200 items in both line and filled-in styles. The icons are available in a large paid bundle or in individual bundles. This site features icons for iOS, Android and the Apple Watch. Designers and developers who are interested in trying out Glyphish can download 50 free icons licensed through Creative Commons. All icons are sized according to Apple specifications but can also be edited by designers.

Key features

  • Icons for both iOS and Android platforms
  • A set of 50 free icons
  • Easy drag and drop into Xcode
  • Icons specially sized for Apple Retina displays

10. Iconfinder

Iconfinder is currently one of the largest icon libraries with over 3 million free and premium icons. Additionally, they also offer 25,000+ icon sets. Iconfinder provides users with a variety of search options including icon format, price, size, background, etc. They offer a wide selection of free icons but if those just aren't doing the job for you, you can also upgrade to premium icons for $9/month for 25 downloads or $29/month for unlimited downloads.

Key features

  • Both free and paid use options
  • Flexible search features
  • Icons available in a variety of formats

11. PixelLove

With more than 5,000 icons for iOS and Android platforms, PixelLove is a go-to icons collection for designers creating mobile sites and apps. All icons are available in a variety of pixel sizes. Layer and slice files ensure that icons can be edited in both Photoshop and Sketch. Both icons and icon fonts are included to meet a diverse array of design needs.

Key features

  • Free and paid icons with four subscription levels
  • A variety of license options
  • Icons specially designed for the Apple Watch
  • Editable vector and bitmap formats

12. Flaticon

This collection of more than 1 million vector icons represents another one of the 'big players' in the icon collections space. Flaticon users can download an unlimited number of icons and enjoy easy control over design features too. All icons can be adjusted to meet the color and size needs of individual designers. Users can also generate icon fonts for use on personal and commercial projects. Flaticon offers a Mac app for easy integration of icons via Sketch, Photoshop, Illustrator and more.

Key features

  • Both free and paid subscription options are available
  • New icon packs are added every month
  • A variety of file formats are available
  • Both raster and vector icons are available

13. Font Awesome

Available as a single font that features almost 1,500 icons, Font Awesome offers a flexible icon solution to designers. The icons can easily be modified using CSS attributes, and they're designed to work seamlessly on a variety of frameworks. Every icon is a vector graphic, which means that designers also have infinite control over icon size and scalability. These icons don't require JavaScript, which means that they're free of the compatibility issues that some icon sets face. Animated icons and icons designed for use in lists are also included.

Key features

  • A completely free icon library
  • Built with accessibility in mind
  • Features easy upgrading across websites
  • Offers a desktop cheat sheet for the entire icon library

14. Graphic Burger

Graphic Burger offers an array of free and paid graphic elements of use to web, application and graphic designers. Among these is a robust selection of icons that includes graphics fitting an array of subjects and themes. Users can browse through the latest icons added to the site or can search for icons meeting their specific needs. Many icon sets offer line, filled and colored versions of icons for design flexibility. An array of file formats are available with some icon sets offering both free and paid download options.

Key features

  • Both free and paid icons are available
  • Most icon sets offer flexible design options
  • Icons are arranged in sets according to theme and style
  • New icons are added on a regular basis

15. Behance

Less a traditional library and more a place for designers to showcase their talent, Behance can be used to find thousands of free icons and graphics for use on both apps and websites. A variety of icon sets can be found by using basic search terms, but designers must have patience to get the best out of this site. Design flexibility of individual icon sets varies widely depending on configurations set by original designers and uploaders. Users can search icons from this page to cut down on the difficulty of navigating the Behance interface.

Key features

  • Thousands of free icons are available
  • Designers can filter search results by tools used, color and more
  • New icons are added on a weekly basis
  • The site offers a variety of specialty icons and graphics

16. Nova

Nova is a collection of 4000 icons built to follow Google's Material Design guidelines. That makes them perfect to use for any Android applications, websites, and desktop apps. Nova's icons also come with 2 different styles so regardless of if you choose the free pack, essential pack, or ultimate pack, you'll actually receive twice the number of icons. Nova icons are provided in all essential files used by developers and designers. This includes Sketch, Illustrator, SVG, and PDF.

Key features

Icon
  • Each icon comes in Line + Solid style, for a total of around 8,000 icons
  • Designed with Google Material Design guidelines
  • Offers a wide range of icons in multiple different categories
  • Free and paid options available

17. Smashicons

Smashicons offers an extremely comprehensive collection of icons with over 175,000+ icons currently in their library. However, unlike some of the other icon libraries metioned, not all of these icons follow the same style. Therefore, if you want to keep a consistent look and feel on your website, app, etc. you'll need to ensure that all of the icons you required are within a particular icon set. Smashicons also works a bit differently than most other icon libraries in that their pricing is based on a monthly plan of $5/month. This means that for $5/month you get access to their entire collection of existing icons as well as any future icons they release.

Key features

  • Very large collection of icons although they don't all follow the same style
  • All icons are multi-platform compatible
  • Easy to use web app to search and find the icons you need

18. Roundicons

Another icon bundle service is Roundicons. This icon provider offers 37,000 icons separated into various icon bundles for a one time price of $99. Furthermore, they also offer a variety of free icons as well as custom icon creation. So if you're building a brand that needs a consistent look and feel, then getting custom icons made could be a great solutions.

Key features

  • Multiple icon bundles for a one-time price
  • Free updates when new icons are pushed out
  • Offers a service for custom icon creation

Summary

From the list above, we've chosen a few of the most recognized names in icon library resources and stacked them up against one another in Google trends.

Based on the time of when this article was written, Freepik has recently been overtaking Font Awesome in terms of popularity according to Google trends. However, choosing the right icon library resource for your project should not be based on what is considered most popular but rather what best suits the needs of your project. Hopefully, this post has helped shed some light in regards to which icon libraries are currently available as well as each one's key features.

Whatever the design project, icon libraries offer a solution for the most basic branding and user experience needs. As they search icon collections, designers should remember that style consistency is key. It's best to use a single library or icon set for an individual project, but it's also important to diversify icon library usage across projects. Doing so will help differentiate websites and apps from one another, and there is no excuse not to shake things up when so many awesome icon resources are readily available today.

-->

Every app has an icon/logo that represents it, and that icon appears in multiple locations in the Windows shell:

  • The app list in the start menu
  • The taskbar and task manager
  • Your app's tiles
  • Your app's splash screen
  • In the Microsoft Store

This article covers the basics of creating app icons, how to use Visual Studio to manage them, and how manage them manually, should you need to.

(This article is specifically for icons that represent the app itself; for general icon guidance, see the Icons article.)

Icon types, locations, and scale factors

By default, Visual Studio stores your icon assets in an assets subdirectory. Here's a list of the different types of icons, where they appear, and what they're called.

Icon nameAppears inAsset file name
Small tileStart menuSmallTile.png
Medium tileStart menu, Microsoft Store listing*Square150x150Logo.png
Wide tileStart menuWide310x150Logo.png
Large tileStart menu, Microsoft Store listing*LargeTile.png
App iconApp list in start menu, task bar, task managerSquare44x44Logo.png
Splash screenThe app's splash screenSplashScreen.png
Badge logoYour app's tilesBadgeLogo.png
Package logo/Store logoApp installer, Partner Center, the 'Report an app' option in the Store, the 'Write a review' option in the StoreStoreLogo.png

* Used unless you choose to display only uploaded images in the Store.

To ensure these icons look sharp on every screen, you can create multiple versions of the same icon for different display scale factors.

The scale factor determines the size of UI elements, such as text. Scale factors range from 100% to 400%. Larger values create larger UI elements, making them easier to see on high-DPI displays.

Windows automatically sets the scale factor for each display based on its DPI (dots-per-inch) and the viewing distance of the device.(Users can override the default value by going to the Settings > Display > Scale and layout page.)

Because app icon assets are bitmaps and bitmaps don't scale well, we recommend providing a version each icon asset for each scale factor: 100%, 125%, 150%, 200%, and 400%. That's a lot of icons! Fortunately, Visual Studio provides a tool that makes it easy to generate and update these icons.

Microsoft Store listing image

'How do I specify images for my app's listing in the Microsoft Store?'

By default, we use some of the images from your packages in the Store, as described in the table at the top of this page (along with other images that you provide during the submission process). However, you have the option to prevent the Store from using the logo images in your app's packages when displaying your listing to customers on Windows 10 (including Xbox), and instead have the Store use only images that you upload. This gives you more control over your app's appearance in various displays throughout the Store. (Note that if your product supports earlier OS versions, those customers may still see images from your packages, even if you use this option.) You can do this in the Store logos section of the Store listing step of the submission process.

When you check this box, a new section called Store display images appears. Here, you can upload 3 image sizes that the Store will use in place of logo images from your app's packages: 300 x 300, 150 x 150, and 71 x 71 pixels. Only the 300 x 300 size is required, although we recommend providing all 3 sizes.

For more info, see Display only uploaded logo images in the Store.

Managing app icons with the Visual Studio Manifest Designer

Visual Studio provides a very useful tool for managing your app icons called the Manifest Designer.

If you don't already have Visual Studio 2019, there are several versions available, including a free version, (Visual Studio 2019 Community Edition), and the other versions offer free trials. You can download them here: https://developer.microsoft.com/windows/downloads

To launch the Manifest Designer:

  1. Use Visual Studio to open a UWP project.
  1. In the Solution Explorer, double-click the Package.appmxanifest file.

Visual Studio displays the Manifest Designer.

  1. Click the Visual Assets tab.

Generating all assets at once

The first menu item in the Visual Assets tab, All Visual Assets, does exactly what its name suggests: generates every visual asset your app needs with the press of a button.

All you need to do is supply a single image, and Visual Studio will generate the small tile, medium tile, large tile, wide tile, large tile, app icon, splash screen, and package logo assets for every scale factor.

To generate all assets at once:

  1. Click the .. next to the Source field and select the image you want to use. If you're using a bitmap image, make sure it's at least 400 by 400 pixels so that you get sharp results. Vector-based images work best; Visual Studio lets you use AI (Adobe Illustrator) and PDF files.

  2. (Optional.) In the Display Settings section, configure these options:

    a. Short name: Specify a short name for your app.

    b. Show name: Indicate whether you want to display the short name on medium, wide, or large tiles.

    c. Tile background: Specify the hex value or a color name for the tile background color. For example, #464646. The default value is transparent.

    d. Spash screen background: Specify the hex value or color name for the spash screen background.

  3. Click Generate.

Open icon library
  • Each icon comes in Line + Solid style, for a total of around 8,000 icons
  • Designed with Google Material Design guidelines
  • Offers a wide range of icons in multiple different categories
  • Free and paid options available

17. Smashicons

Smashicons offers an extremely comprehensive collection of icons with over 175,000+ icons currently in their library. However, unlike some of the other icon libraries metioned, not all of these icons follow the same style. Therefore, if you want to keep a consistent look and feel on your website, app, etc. you'll need to ensure that all of the icons you required are within a particular icon set. Smashicons also works a bit differently than most other icon libraries in that their pricing is based on a monthly plan of $5/month. This means that for $5/month you get access to their entire collection of existing icons as well as any future icons they release.

Key features

  • Very large collection of icons although they don't all follow the same style
  • All icons are multi-platform compatible
  • Easy to use web app to search and find the icons you need

18. Roundicons

Another icon bundle service is Roundicons. This icon provider offers 37,000 icons separated into various icon bundles for a one time price of $99. Furthermore, they also offer a variety of free icons as well as custom icon creation. So if you're building a brand that needs a consistent look and feel, then getting custom icons made could be a great solutions.

Key features

  • Multiple icon bundles for a one-time price
  • Free updates when new icons are pushed out
  • Offers a service for custom icon creation

Summary

From the list above, we've chosen a few of the most recognized names in icon library resources and stacked them up against one another in Google trends.

Based on the time of when this article was written, Freepik has recently been overtaking Font Awesome in terms of popularity according to Google trends. However, choosing the right icon library resource for your project should not be based on what is considered most popular but rather what best suits the needs of your project. Hopefully, this post has helped shed some light in regards to which icon libraries are currently available as well as each one's key features.

Whatever the design project, icon libraries offer a solution for the most basic branding and user experience needs. As they search icon collections, designers should remember that style consistency is key. It's best to use a single library or icon set for an individual project, but it's also important to diversify icon library usage across projects. Doing so will help differentiate websites and apps from one another, and there is no excuse not to shake things up when so many awesome icon resources are readily available today.

-->

Every app has an icon/logo that represents it, and that icon appears in multiple locations in the Windows shell:

  • The app list in the start menu
  • The taskbar and task manager
  • Your app's tiles
  • Your app's splash screen
  • In the Microsoft Store

This article covers the basics of creating app icons, how to use Visual Studio to manage them, and how manage them manually, should you need to.

(This article is specifically for icons that represent the app itself; for general icon guidance, see the Icons article.)

Icon types, locations, and scale factors

By default, Visual Studio stores your icon assets in an assets subdirectory. Here's a list of the different types of icons, where they appear, and what they're called.

Icon nameAppears inAsset file name
Small tileStart menuSmallTile.png
Medium tileStart menu, Microsoft Store listing*Square150x150Logo.png
Wide tileStart menuWide310x150Logo.png
Large tileStart menu, Microsoft Store listing*LargeTile.png
App iconApp list in start menu, task bar, task managerSquare44x44Logo.png
Splash screenThe app's splash screenSplashScreen.png
Badge logoYour app's tilesBadgeLogo.png
Package logo/Store logoApp installer, Partner Center, the 'Report an app' option in the Store, the 'Write a review' option in the StoreStoreLogo.png

* Used unless you choose to display only uploaded images in the Store.

To ensure these icons look sharp on every screen, you can create multiple versions of the same icon for different display scale factors.

The scale factor determines the size of UI elements, such as text. Scale factors range from 100% to 400%. Larger values create larger UI elements, making them easier to see on high-DPI displays.

Windows automatically sets the scale factor for each display based on its DPI (dots-per-inch) and the viewing distance of the device.(Users can override the default value by going to the Settings > Display > Scale and layout page.)

Because app icon assets are bitmaps and bitmaps don't scale well, we recommend providing a version each icon asset for each scale factor: 100%, 125%, 150%, 200%, and 400%. That's a lot of icons! Fortunately, Visual Studio provides a tool that makes it easy to generate and update these icons.

Microsoft Store listing image

'How do I specify images for my app's listing in the Microsoft Store?'

By default, we use some of the images from your packages in the Store, as described in the table at the top of this page (along with other images that you provide during the submission process). However, you have the option to prevent the Store from using the logo images in your app's packages when displaying your listing to customers on Windows 10 (including Xbox), and instead have the Store use only images that you upload. This gives you more control over your app's appearance in various displays throughout the Store. (Note that if your product supports earlier OS versions, those customers may still see images from your packages, even if you use this option.) You can do this in the Store logos section of the Store listing step of the submission process.

When you check this box, a new section called Store display images appears. Here, you can upload 3 image sizes that the Store will use in place of logo images from your app's packages: 300 x 300, 150 x 150, and 71 x 71 pixels. Only the 300 x 300 size is required, although we recommend providing all 3 sizes.

For more info, see Display only uploaded logo images in the Store.

Managing app icons with the Visual Studio Manifest Designer

Visual Studio provides a very useful tool for managing your app icons called the Manifest Designer.

If you don't already have Visual Studio 2019, there are several versions available, including a free version, (Visual Studio 2019 Community Edition), and the other versions offer free trials. You can download them here: https://developer.microsoft.com/windows/downloads

To launch the Manifest Designer:

  1. Use Visual Studio to open a UWP project.
  1. In the Solution Explorer, double-click the Package.appmxanifest file.

Visual Studio displays the Manifest Designer.

  1. Click the Visual Assets tab.

Generating all assets at once

The first menu item in the Visual Assets tab, All Visual Assets, does exactly what its name suggests: generates every visual asset your app needs with the press of a button.

All you need to do is supply a single image, and Visual Studio will generate the small tile, medium tile, large tile, wide tile, large tile, app icon, splash screen, and package logo assets for every scale factor.

To generate all assets at once:

  1. Click the .. next to the Source field and select the image you want to use. If you're using a bitmap image, make sure it's at least 400 by 400 pixels so that you get sharp results. Vector-based images work best; Visual Studio lets you use AI (Adobe Illustrator) and PDF files.

  2. (Optional.) In the Display Settings section, configure these options:

    a. Short name: Specify a short name for your app.

    b. Show name: Indicate whether you want to display the short name on medium, wide, or large tiles.

    c. Tile background: Specify the hex value or a color name for the tile background color. For example, #464646. The default value is transparent.

    d. Spash screen background: Specify the hex value or color name for the spash screen background.

  3. Click Generate.

Visual Studio generates your image files and adds them to project. If you want to change your assets, simply repeat the process.

Scaled icon assets follow this file naming convention:

filename-scale-scale factor.png

For example,

Square150x150Logo-scale-100.png, Square150x150Logo-scale-200.png, Square150x150Logo-scale-400.png

Notice that Visual Studio doesn't generate a badge logo by default. That's because your badge logo is unique and probably shouldn't match your other app icons. For more info, see the Badge notifications for Windows apps article.

More about app icon assets

Visual Studio will generate all the app icon assets required by your project, but if you'd like to customize them, it helps to understand how they're different from other app assets.

The app icon asset appears in a lot of places: the Windows taskbar, the task view, ALT+TAB, and the lower-right corner of Start tiles. Because the app icon asset appears in so many places, it has some additional sizing and plating options the other assets don't have: 'target-size' assets and 'unplated' assets.

Target-size app icon assets

In addition to the standard scale factor sizes ('Square44x44Logo.scale-400.png'), we also recommend creating 'target-size' assets. We call these assets target-size because they target specific sizes, such as 16 pixels, rather than specific scale factors, such as 400. Target-size assets are for surfaces that don't use the scaling plateau system:

  • Start jump list (desktop)
  • Start lower corner of tile (desktop)
  • Shortcuts (desktop)
  • Control Panel (desktop)

Here's the list of target-size assets:

Asset sizeFile name example
16x16*Square44x44Logo.targetsize-16.png
24x24*Square44x44Logo.targetsize-24.png
32x32*Square44x44Logo.targetsize-32.png
48x48*Square44x44Logo.targetsize-48.png
256x256*Square44x44Logo.targetsize-256.png
20x20Square44x44Logo.targetsize-20.png
30x30Square44x44Logo.targetsize-30.png
36x36Square44x44Logo.targetsize-36.png
40x40Square44x44Logo.targetsize-40.png
60x60Square44x44Logo.targetsize-60.png
64x64Square44x44Logo.targetsize-64.png
72x72Square44x44Logo.targetsize-72.png
80x80Square44x44Logo.targetsize-80.png
96x96Square44x44Logo.targetsize-96.png

* At a minimum, we recommend providing these sizes.

You don't have to add padding to these assets; Windows adds padding if needed. These assets should account for a minimum footprint of 16 pixels.

Here's an example of these assets as they appear in icons on the Windows taskbar:

Unplated assets

By default, Windows uses a target-based asset on top of a colored backplate by default. If you want, you can provide a target-based unplated asset. 'Unplated' means the asset will be displayed on a transparent background. Keep in mind that these assets will appear over a variety of background colors.

Here are the surfaces that use unplated app icon assets:

  • Taskbar and taskbar thumbnail (desktop)
  • Taskbar jumplist
  • Task view
  • ALT+TAB

Unplated assets and themes

Icon Library Icon

The user's selected theme determines the color of the taskbar. If the unplated asset isn't specifically qualified for the current theme, the system checks the asset for contrast. If it has enough contrast with taskbar, the system uses it. Otherwise, the system looks for a high-contrast version of the asset. If it can't find one, the system draws the plated form of the asset instead.

Target and unplated sizing

Here are the size recommendations for target-based assets, at 100% scale:

More about splash screen assets

For more info about splash screens, see Windows app splash screens. Xline 2 0 2.

More about badge logo assets

When you use the asset generator to generate all the assets you need, there's a reason why it doesn't generate badge logos by default: they're very different from other app assets. The badge logo is a status image that appears in notifications and on the app's tiles.

For more information, see Badge notifications for Windows apps.

Customizing asset padding

By default, Visual Studio asset generator applies recommended padding to whatever image. If your images already contain padding or you want full bleed images that extend to the end of the tile, you can turn this feature off by unchecking the Apply recommended padding check box.

Tile padding recommendations

If you want to provide your own padding, here are our recommendations for tiles.

There are 4 tile sizes: small (71 x 71), medium (150 x 150), wide (310 x 150), and large (310 x 310).

Each tile asset is the same size as the tile on which it is placed.

If you don't want your icon to extend to the edge of the tile, you can use transparent pixels in your asset to create padding.

For small tiles, limit the icon width and height to 66% of the tile size:

For medium tiles, limit the icon width to 66% and height to 50% of tile size. This prevents overlapping of elements in the branding bar:

Icon Library File

For wide tiles, limit the icon width to 66% and height to 50% of tile size. This prevents overlapping of elements in the branding bar:

For large tiles, limit the icon width to 66% and height to 50% of tile size:

Some icons are designed to be horizontally or vertically oriented, while others have more complex shapes that prevent them from fitting squarely within the target dimensions. Icons that appear to be centered can be weighted to one side. In this case, parts of an icon may hang outside the recommended footprint, provided it occupies the same visual weight as a squarely fitted icon:

With full-bleed assets, take into account elements that interact within the margins and edges of the tiles. Maintain margins of at least 16% of the height or width of the tile. This percentage represents double the width of the margins at the smallest tile sizes:

Icon Library App Download

In this example, margins are too tight:

Optimizing for specific themes, languages, and other conditions

This article described how to create assets for specific scale factors, but you can also create assets for a wide variety of conditions and combinations of conditions. For example, you can can create icons for high contrast displays or for the light themes and dark themes. You can even create assets for specific languages.

For instructions, see Tailor your resources for language, scale, high contrast, and other qualifiers.





broken image