Best Practice
Icon System
Do
Dont's
<span data-metadata=""><span data-buffer="">Use icons with text labels that have meaning.
<span data-metadata=""><span data-buffer="">Icons without labels can be confusing.
Do
Dont's
<span data-metadata=""><span data-buffer="">Use only one icon to represent a concept.
<span data-metadata=""><span data-buffer="">Avoid using multiple icon variations for the same concept.
Do
Dont's
<span data-metadata=""><span data-buffer="">Center-align icons when they are next to text.
<span data-metadata=""><span data-buffer="">Do not baseline-align icons with text.
Do
Dont's
<span data-metadata=""><span data-buffer="">Use matching colors for both the text and icon when pairing them.
<span data-metadata=""><span data-buffer="">Do not use different colors for text and icon.
Icon Illustration
Do
Dont's
<span data-metadata=""><span data-buffer="">Royal Navy, Deep Lemon is the primary color for illustration. Use the secondary color if necessary
<span data-metadata=""><span data-buffer="">Don’t use to many secondary color
Do
Dont's
<span data-metadata=""><span data-buffer="">Ensure that the object size is not too big and maintain a balance between the object, decoration, and white space.
<span data-metadata=""><span data-buffer="">The objects are too big and there is less than 20% white space.
Do
Dont's
<span data-metadata=""><span data-buffer="">The decoration is necessary, but use only 2-3 elements to decorate the illustration. Keep it simple and clean.
<span data-metadata=""><span data-buffer="">Avoid making it too busy, and focus on being concise.