Available translations

How to Contribute Icons

foundations.png
Summary: Superalgos visual interface features hundreds of icons and many more icons are required with each release, as new functionality is rolled out. Designing icons is a great way to leave your mark, as it puts your work directly in front of every user!
Foundations->Concept->Reusable Snippets->Contributions Reminder
Switch Branches and Update Before You Start
All contributions to the Docs and plugins must be submitted to the Develop branch. All contributions to the code base must be submitted to the Develop branch too. Make sure you update to the latest version on the new branch and that everything you are submitting works properly in that version.
Switch Branches
To switch to branches:
  • Go to the footer of this page (scroll down).
  • Then select Develop or Master under the Choose the Current Branch title.
  • Follow the instructions to close and restart the app.
Update to the Latest Version
 app.update
  • Now close the app and restart.
Beyond the Basics Tutorial
Before you go any further, do the Beyond the Basics tutorial in the Getting Started Native Workspaces so that you learn the basics on how to deal with contributions from within the app. The tutorial will help you get your setup right so that contributions are seamless.
Attribution
The original set of icons is a web design pack made by Freepik and is available at:
The rest of the series is inspired in the design style developed for the original set.
The authorship of each icon not in the original series may be tracked in the repository's history.
Coordination
Join the following group to coordinate works:
Please, introduce yourself and get up to speed with the group currently doing the work. The main coordination task is keeping track of who will block what part of the pending work so that we don’t duplicate efforts.
Design Brief
Color Palette
We use a restricted palette, with a playful selection of colors that work well both over a black background—on the Design Space — and a white background — on the Docs and the Charting Space.
Look & Feel
Superalgos is a large and rather complex system aimed at all sorts of user profiles. The ultimate goal of the project is to massify the use of the system, thus, Superalgos should be accessible to a wide user base: from professional traders to crypto-holders, and everything in between.
The choice of a playful look and feel responds to the underlying strategy to achieve massification: to gamify the user experience, in the sense that building profitable trading strategies may be turned into a strategy game in and of itself.
We choose to depart from realistic or corporate styles and lean towards cartoonish, joyful, and spirited ideas instead.
What we Like
The following are examples of icons we like among the existing batch.
Abstract Icons
The group above features icons representing ideas that directly or indirectly remind of the underlying concept they represent. However, icons may also be abstract, and have a loose or no obvious connection with the concept being represented:
Figurative Icons
Sometimes, the relationship between the drawing and the actual concept being represented may be figurative, such as when the icon illustrates an alternative interpretation of the word:
Design Tips
Several design tricks make up the character of the collection of icons. The more of these tricks you use in your creations, the better they will integrate with the rest, and resonate with users.
Split Colors
A stylistic resource that we favour and that helps to create depth and richness in the composition is the split in half of the drawing, giving each half a slight shift in color, using adjacent colors in the palette on each half:
Non-Realistic Proportions
It’s one of the characteristics of the cartoonish look and feel:
Rounded Corners
Again, one other typical characteristic:
Highlights
Occasionally, a simple drawing may be embellished with a playful highlight effect that brings light to the creation. Notice how an otherwise flat drawing comes to life with the simple light-reflection effect on the right hand side.
Cutouts
When multiple elements lie on top of each other, the drawing may loose clarity, probably due to the restricted color palette. In such cases, a cutout on the background object that creates a slight separation with the foreground object can look cool and help the visual interpretation. Notice the 20 pts wide cutout around the red arrow.
Level of Detail
It is important to notice that icons must work well when used in small sizes. Too much detail may create alias and artifacts when the icon is reduced in size.
Full Size and Centered
Ideally, icons occupy the whole canvas, either in the horizontal or vertical dimension, or both. Save from exceptions, this is a requirement, as any departure from this standard is quite noticeable.
Technical Requirements
Icons are created and maintained in vectors, in the SVG format, but are used in the system and documentation—the current two main use cases—as raster images in the PNG format, for technical reasons.
Vector Source Files
Criterion Details
Format SVG
Width 512 pt
Height 512 pt
Extension svg (lower-case)
In the case of the Superalgos project, SVG source files are organized in subfolders, under the following directory:
 \Projects\Foundations\Icons-SVG-Sources\
Folder Description
assets Assets listed at exchanges
color-palette A reference color plette
docs-menu Options in the floating Docs menu
exchanges Crypto exchanges
flags Round flags used to identify languages
layers Types of layers represented in a Layer Manager
menu The options in the menu of nodes
mouse Mouse and keyboard graphics used on video captures
nodes Icons of nodes
various Items that do not fit into the rest of the categories
Raster Images
Criterion Details
Format PNG
Application Size 512 x 512 px
Color Depth 24 bits (PNG-24)
Transparency Yes
Interlaced No
Extension png (lower-case)
Naming Convention
Files inherit the name of the node, asset, exchange, or whatever the icon represents, and are named in lower case, each word separated by a hyphen, and with a lower-case extension.
For example:
  • In the case of nodes, the PNG file for the Managed Take Profit node is managed-take-profit.png
  • In the case of assets, the name of the file must is the literal name of the asset. For instance, for Bitcoin, it is bitcoin.png; for Tether it is tether.png; and so on...
  • In the case of an exchange, again, the literal name of the exchange is used, as it is listed in the CCXT library. for instance, Binance is binance.png.
Previous
How to Contribute a Trading System
Next
How to Contribute to the Docs