Managing Icons

Contents

• Icon selection policy
  • Format
  • Style
  • Size
  • View-Box

Icon selection policy

Format

To have scalable, yet lightweight icons, we are limiting graphic type to SVG. Besides it is preferred to attach it as an inline HTML code to avoid unnecessary HTTP requests. <SVG> elements should come as clean as possible, without extra attributes or unnecessary child tags.

Here is an example from Material design icons resource

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="24" viewBox="0 0 24 24" width="24">
    <g>
        <rect fill="none" height="24" width="24"/>
    </g>
    <g>
        <path d="..."/>
    </g>
</svg>

and what it should become

<svg viewBox="0 0 24 24" width="24">
    <path d="..." />
</svg>

You can also remove width attribute if you define it somewhere else like in style.css.

Style

Our preferred choice is Material Design icons in Filled (baseline) style. This inflexibility is to maintain integration.

Size

The following are the sizes can be used for an icon's height and width:

• Small: 18px
• Normal: 24px
• Large: 36px
• Extra-large: 48px

View-Box

An icon should originally come with viewBox="0 0 24 24" or multiplication of it (for instance 0 0 48 48).