Icon
Icons from our icon set
Icons should convey meaning to the user and be quickly understood. If an icon you want isn't here, ask a member of Design or UI Engineering to have it added.
Contents
System icons are basic visual representations reduced to a minimal form. They are used to support user progression through the product and serve as a visual aid. We have a large library of system icons to represent many different actions or contexts.
System icons should be used in combination with meaningful text to support users who are gathering information, or performing action to progress through a flow in an accessible manner.
The goal of a system icon is to:
give a simple, basic visual representation of an action or concept
provide a visual guide to what an associated action does that spans across language barriers
System icons are designed to fullfill this purpose, therefore try to avoid using system icons for purely decorative purposes, or on their own with no context.
Our system icons are available all within a 24 x 24px bounding box, and have been designed and placed within this area to ensure that they maintain a strong ‘visual alignment’ when placed alongside each other.
Do
Use text or labeling alongside system icons that is understandable to the user.
Don't
Use unrelated labels or text alongside system icons which may confuse the user.
Do
Use system icons at the recommended size of 24px x 24px
Don't
Use system icons as purely a decorative or visual tool on its own.
Ilustrative icons are slightly more complex visual representations used to support text or content in order to help convey a concept. Our illustrative icon library has been custom designed to have a consistent visual style throughout that reflects our brand. A library of illustrative icons is available for use in different contexts common throughout the Freelancer.com website.
The full icon library and code can be found here .
The full icon library and code can be found
Whilst the purpose of illustrative icons is similar to system icons (as a visual aid), they can be used for more decorative purposes. Illustrative icons can support content that is more in-depth or complicated, rather than a singular quick action.
Common places illustrative icons could be used are landing pages, onboarding flows or empty states.
The goal of an illustrative icon is to:
give a simple yet decorative visual representation of a theme or concept
provide a visual guide to what associated content represents that spans across language barriers
Our illustrative icons are available all within a 128 x 128px bounding box, and have been designed and placed within this area to ensure that they maintain a strong ‘visual alignment’ when placed alongside each other.
Do
Use illustrative icons directly related to text or content in a supporting manner.
Don't
Use illustrative icons on their own with no context on what they are there for.
Do
Use illustrative icons at the recommended size of 128px x 128px
Don't
Expand or shrink illustrative icons to different sizes and create inconsistency.
Do
Use illustrative icons that are relevant for the content they are supporting.
Don't
Use unrelated or random illustrative icons which may potentially confuse users.
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.