![]() ![]() When an icon element is placed on top of another element, a cutout (of the bottom element) is used to provide space between the two elements, mainly for readability purposes. Depending on what size you are producing the icon should use the following line weights. Monoline is a style dominated by line and outlined shapes. The following images show the recommended padding to use for each of the icon sizes. The base element stays within the padding, but the modifier should butt up to the edge of the canvas, extending outside of the padding to the edge of the icon border. For example, if the base element would be unrecognizable with the modifier in the bottom right corner, then consider placing it in the upper left corner.Įach size icon has a specified amount of padding around the icon. In some rare cases, modifiers are placed in a different corner. Modifiers are almost always placed in the bottom right corner of the icon canvas. In the following example, the icon is erring to the left. ![]() In the following example, the icon is perfectly centered. If it can't be placed perfectly centered, then the base should err to the top right. It modifies the base element by acting as an addition, alteration, or a descriptor.īase elements are placed in the center of the icon within the padding. Modifier Any element that overlays the base that is, a modifier that typically represents an action or a status. This is usually the only visual needed for the icon, but sometimes the main concept can be enhanced with a secondary element, a modifier. The following is an example of icon layout with a modifier.īase: The main concept that the icon represents. The absolutely required sizes are 16 px, 20 px, and 32 px, as those are the 100% sizes.ġ6 px, 20 px, 24 px, 32 px, 40 px, 48 px, 64 px, 80 px, 96 pxįor an image that is your add-in's representative icon, see Create effective listings in AppSource and within Office for size and other requirements. We recommend that you produce each icon in all these sizes to support high DPI devices. Everything uses flat color, which means there are no gradients, textures, or light sources. Certain elements that require perspective and/or rotation, such as a cube, are allowed, but exceptions should be kept to a minimum. Monoline icons are forward-facing by default. Sizes, arrangement, and color of icons should be consistent. Limit the number of elements in an icon to two, regardless of icon size.Reduce the icon to its core meaning, using only elements that are essential to the metaphor.Use a core metaphor during concept development. ![]() For example, mail is always represented by an envelope, not a stamp. Use the same element to represent the same concept.Use descriptive elements such as a page to represent a document or an envelope to represent mail.The following guidelines are for 3rd party developers who want to create icons for features that will be consistent with the icons already present Office products. The goal of the Monoline style to have consistent, clear, and accessible iconography to communicate action and features with simple visuals, ensure the icons are accessible to all users, and have a style that is consistent with those used elsewhere in Windows. If you'd prefer that your icons match the Fresh style of perpetual Office 2013+, see Fresh style icon guidelines for Office Add-ins. Monoline style iconography are used in Office apps. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |