46
edits
Changes
Jump to navigation
Jump to search
Line 48:
Line 48: − + − + − + − + − + Line 76:
Line 76: − +
Human Interface Guidelines/The Sugar Interface/Icons (view source)
Revision as of 17:28, 10 January 2008
, 17:28, 10 January 2008In consultation with Eben, change 'pt' units to 'px' for stroke widths.
|XS
|XS
|0.5
|0.5
|2.25pt
|2.25px
|-style="background: #e9e9e9;"
|-style="background: #e9e9e9;"
|S
|S
|1.0
|1.0
|3.5pt
|3.5px
|-
|-
|M
|M
|1.5
|1.5
|4.0pt
|4.0px
|-
|-
|L
|L
|2.0
|2.0
|4.5pt
|4.5px
|-
|-
|XL
|XL
|2.75
|2.75
|6.0pt
|6.0px
|}
|}
All icons render in two colors: stroke and fill. The actual stroke and fill colors that an icon renders in are determined by the children, since they correspond to the colors they have chosen for their XOs. As such, the colors in which you choose to save your icon are arbitrary. However, note that any fills that have the same color as your strokes will dynamically take on their color when rendered.
All icons render in two colors: stroke and fill. The actual stroke and fill colors that an icon renders in are determined by the children, since they correspond to the colors they have chosen for their XOs. As such, the colors in which you choose to save your icon are arbitrary. However, note that any fills that have the same color as your strokes will dynamically take on their color when rendered.
All strokes within an "S" activity icon must have a line weight of 3.5pt. All icons should have a primary fill which represents its overall shape. In addition, any number of supplemental strokes and fills may be used; not all strokes within an icon must have fills, and not all fills must have strokes.
All strokes within an "S" activity icon must have a line weight of 3.5px. All icons should have a primary fill which represents its overall shape. In addition, any number of supplemental strokes and fills may be used; not all strokes within an icon must have fills, and not all fills must have strokes.
More detailed instructions for making icons can be found [[Making SVG Icons for Sugar|here]].
More detailed instructions for making icons can be found [[Making SVG Icons for Sugar|here]].
{{hig-subnav-intra|p_page=Layout Guidelines|c_section=The Sugar Interface|c_page=Icons|n_page=Colors}}
{{hig-subnav-intra|p_page=Layout Guidelines|c_section=The Sugar Interface|c_page=Icons|n_page=Colors}}