You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/design/designing-a-web-part-icon.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -12,19 +12,19 @@ Web Part icons are designed to be simple, representative, and symbolic. Every ic
12
12
13
13
## Grid keyline shapes
14
14
15
-
Web parts cons are displayed at 32 x 32 px. Create icons at 100% to ensure pixels are accurate.
15
+
Web parts icons are displayed at 32x32 px. Create icons at 100% to ensure pixels are accurate.
16
16
17
17

18
18
19
19
## Layout
20
20
21
-
Icons should be designed inside of the 64 x 64 pixel container area, to insure that the icons renders correctly.
21
+
Icons should be designed inside of the 64 x 64 pixel container area, to insure that the icons renders correctly.
22
22
23
23

24
24
25
25
## Shapes
26
26
27
-
Not all icons or logos are designed in a perfect square. Use this guide of basic shapes to understand how to unify different icon shapes within the grid and appear at a proportional size.
27
+
Not all icons or logos are designed in a perfect square. Use this guide of basic shapes to understand how to unify different icon shapes within the grid and appear at a proportional size. Make sure that the icon fills either the full width or height of the grid depending on its shape.
28
28
29
29

30
30
@@ -39,13 +39,13 @@ Try to avoid any icon distortion by snapping your edges to the X and Y coordinat
39
39
40
40
The icon is the visual expression of your web part and its function. They can help communicate the core idea of your web part simply and boldly.
41
41
42
-
Web part icons can contain one color or full color. Most icons work best when using extremely simplified shapes, thin two-pixel lines similar to the Office UI Fabric icons. In some cases there may be a need to use a company brand icon or logo mark in full color. If there is a one color version of the icon available consider using this version first.
42
+
Web part icons can contain one color or be full color. Most icons work best when using extremely simplified shapes, thin two-pixel lines similar to the Office UI Fabric icons. In some cases there may be a need to use a company brand icon or logo mark in full color. If there is a one color version of the icon available consider using this version first.
43
43
44
44

45
45
46
46
## Exporting your icons
47
47
48
-
Icons should be exported as SVGs at 64x64 px and should all have transparent backgrounds.
48
+
Icons should be exported as SVGs at 64x64 px and should have transparent backgrounds.
49
49
50
50
You can find the icon grid in the [SharePoint Design toolkit](https://developer.microsoft.com/en-us/fabric#/resources).
0 commit comments