How to create an icon?

How to create/change an icon for your project on the R-IODA application.

Characteristics

Height (px)	48
Width (px)	48

For the colors, please refer to the officials Couleurs of R-IOSuite

For now, color have no meanings. Feel free to use them as you want.

Adobe Illustrator

The tutorial is based on the Adobe Illustrator tool from the Adobe Creative Cloud. To see more tutorials, please follow: Adobe illustrator tutorials

Examples

	To represent a supply chain organisation	Supply Chain Domain
	To represent a warehouse	Supply Chain Domain
	To represent a vehicle	Road Freight Transport Domain
	To represent a healthcare personnel	Healthcare Domain
	To represent an effect	Crisis Domain

Tutorial

Round Icon

1	Open Adobe Illustrator
2	Create a document File/New (picture) name: factory height: 48 px width: 48 px For more details: Basics
3	Create a shape: long click on the rectangle tool on the left menu select ellipse tool click anywhere on the workspace indicate a width= 48 px and height = 48 px (picture) For more details: Create and edit shapes
4	Edit the borders of the ellipse select the shape with the regular mouse on the left menu click on the border button on the right menu set 0 pt and see the border disappear
5	Edit the color of your eclipse select the shape with the regular mouse check if the background is selected over the border on the left menu: (here we can control the characteristics of the background) click on the color chart button on the right menu pick one for the try (picture)
6	Import the color chart of R-IOSuite click on the color chart button on the right menu click on the menu button (picture step 5) click on Other.... a open attached file: rioColors.ai The result is the new color bar named Rio (picture)
7	Use the new color bar to update the background color of your ellipse in "Yellow"
8	Use an existed svg logo We want to represent a factory To search for free .svg logo, editable on Adobe Illustrator, go on: Freepik Search "factory" Filter by icons (picture) Select the 5th one (among the free ones) Click on free download (second picture) - you will be redirected on flaticon.com Select SVG and click on the download button, and then the free download button Open with Adobe Illustrator Select all the svg component with the regular mouse (ctrl + A) Copy (ctrl + C) Return on the organisation file (tab on the left) Paste (picture)
9	Update a part of the drawing We want to center the factory logo, turn it into white and decrease its height and width Click on the layers button on the right menu Scroll down the menu and select the Factory group (you can also rename it if you want) by clicking on the round icon on the right of the line corresponding to the group Check that the background is selected (cf. step 5) Change the color to white (second of Rio color bar) Select the factory group again Move it so that its center correspond to the ellipse's center Indicate that your reference is the middle of the shape by clicking on the middle square of the icon placed just before the x,y, height and width above your workspace Change the size of the factory group by changing the width to 30 px, proportionally to the height thanks to the link button between height and width
10	Export your logo for the web on .png Go to FIle/Export for the web Save your file
11	Export your logo on .svg The .svg is editable on Adobe Illustrator Go to File/Save as.. and select SVG file as Type
	The end

Pin Icon (adapted to R-IOPlay)

(to be added)