Integrate Branding
Foreword
It is possible to customize the look of the application and the widgets (colors, buttons radius, fonts, price format) as well as the logo and icons by editing and uploading three files: style.jsonc, logo.png and icons.svg.
Introduction to the Settings Files
style.jsonc
This file contains the list of all customizable variables. Note that it doesn't need to inform them all, just the ones you need to customize are enough, the other ones will be automatically setted to the default values.
This is a jsonc format, which is a usual JSON format with javascript-style comments allowed.
It contains 3 categories of variables, which are each defined in its own root element: "colors", "variables" and "rules".
- color variables
"colors": {
/* BRAND COLORS
primary color set */
"primary-default": "#006699",
"primary-active": "#333366",
/* alt- color set */
"alt-default": "#08a67f",
"alt-active": "#06926f",
/* secondary- color set */
"secondary-default": "#eeeeee",
"secondary-active": "#b6b6b6",
/* TEXT COLORS
primary- color set */
"txt-primary-default": "#ffffff",
"txt-primary-active": "#ffffff",
/* alt- color set */
"txt-alt-default": "#ffffff",
"txt-alt-active": "#ffffff",
/* secondary- color set */
"txt-secondary-default": "#222222",
"txt-secondary-active": "#222222",
/* LINK COLORS
primary- color set */
"link-primary-default": "#006699",
"link-primary-active": "#333366",
/* secondary- color set */
"link-alt-default": "#08a67f",
"link-alt-active": "#06926f",
/* ! --------------------------------------- EVENT COLORS --------------------------------------------
/* MESSAGE
event- color set */
"event-success": "#1a88ab",
"event-error": "#ae2b34",
"event-info": "#eeeeee",
"event-tip": "#1a88ab",
/* txt-event- color set */
"txt-event-success": "#ffffff",
"txt-event-error": "#ffffff",
"txt-event-info": "#212121",
"txt-event-tip": "#ffffff",
/* ! --------------------------------------- CTA COLORS --------------------------------------------
// the 1px wide border is part of the total CTA height calculation
// - If an outline button is wanted, please add "transparent" as the background color value.
// - If an icon is present in the CTA (cta-primary-icon f.e.), the icon will have the same colors as the text
primary cta- color set */
"cta-primary-background-default": "#006699" /* this value can be "transparent" */,
"cta-primary-background-active": "#333366" /* this value can be "transparent" */,
"cta-primary-border-default": "#006699",
"cta-primary-border-active": "#333366",
"cta-primary-txt-default": "#ffffff",
"cta-primary-txt-active": "#ffffff",
/* alt cta- color set */
"cta-alt-background-default": "#08a67f" /* this value can be "transparent" */,
"cta-alt-background-active": "#06926f" /* this value can be "transparent" */,
"cta-alt-border-default": "#08a67f",
"cta-alt-border-active": "#06926f",
"cta-alt-txt-default": "#ffffff",
"cta-alt-txt-active": "#ffffff",
/* secondary cta- color set */
"cta-secondary-background-default": "#eeeeee" /* this value can be "transparent" */,
"cta-secondary-background-active": "#b6b6b6" /* this value can be "transparent" */,
"cta-secondary-border-default": "#eeeeee",
"cta-secondary-border-active": "#b6b6b6",
"cta-secondary-txt-default": "#222222",
"cta-secondary-txt-active": "#222222"
}
These variables define the colors of each customizable UI elements.
Default values are formatted as hexadecimal values: "#rrggbb", 2 hexadecimal digits (0-9+a-f) for each primary color red, green, blue, though it is also possible to format them as "rgb(R, G, B)" where R, G and B are numbers between 0 and 255. In the end, it will all be converted to R, G, B format in the loaded css. Note that keyword "transparent" is also allowed, though only for "CTA background" variables.
For more details about the targeted UI element of each of these variables, please refer to the Global Colors section below.
- variable variables (yes really)
"variables": {
/* CTA CUSTOMIZATION
primary CTA font weight - default: "bold" */
"brand-font-weight-cta-l-primary": "bold",
/* alt CTA font weight - default: "bold" */
"brand-font-weight-cta-l-alt": "bold",
/* secondary CTA font weight - default: "normal" */
"brand-font-weight-cta-l-secondary": "normal",
/* CTA RADIUS */
"brand-radius-cta": "2px",
/* ! --------------------------------------- FONTS --------------------------------------------*/
/* font family - default: "Helvetica, Arial, \"Bitstream Vera Sans\", sans-serif" */
"font-family": "Helvetica, Arial, \"Bitstream Vera Sans\", sans-serif"
}
These variables define the font family, font weight as well as the border radius of each customizable texts and buttons.
Possible values for weight are the common ones allowed in css, see https://htmldog.com/references/css/properties/font-weight/ Radius is defined in pixel. Possible values for fonts are described in the Family section below.
For more details about the targeted UI element of each of these variables, please refer to the Fonts section below.
- rule variables
"rules": {
/* ! --------------------------------------- PRICING CUSTOMIZATION - optional --------------------------------------------*/
/* CASE 1: normal price
/* standard pricing style for .standard-price */
"standard-price": [],
/* ! -----------------------------------------------------------------------------------*/
/* CASE 2: membership price
/* membership pricing style for .standard-price */
/* This setting manages the display of the standard price indicated below the membership price. */
"membership-standard-price": [],
/* membership pricing style for .membership-price */
/* This setting overwrites the display of the value of the membership price defined in membership-standard-price-label-branding. */
"membership-price": [
"color: #ff9d1a"
],
/* membership pricing style for .membership-price-label */
/* This setting manages the display of both label and value of the membership price. */
"membership-price-label": [
"color: #212121"
],
/* ! -----------------------------------------------------------------------------------*/
/* CASE 3: reduced price
/* reduced pricing style for .standard-price */
"reduced-standard-price": [
"position: relative",
"text-decoration: none"
],
"reduced-standard-price-after": [
"background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDogMTAwJTsgaGVpZ2h0OiAxMDAlOyI+PGxpbmUgeDE9IjAiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAiIHN0eWxlPSJzdHJva2U6cmdiKDE5OSw3Miw4NSk7IHN0cm9rZS13aWR0aDoxIi8+PC9zdmc+\")",
"content: \"\"",
"display: block",
"height: 100%",
"left: 0",
"position: absolute",
"top: 0",
"width: 100%"
],
"reduced-standard-price-printable": [],
"reduced-standard-price-printable-after": [],
/* reduced pricing style for .reduced-price */
"reduced-price": []
}
These variables define the colors and layout of each customizable price elements.
Allowed values are the same as those commonly allowed by CSS standards. Note that the hexadecimal color values of this category won't be converted in a R, G, B format.
For more details about the targeted UI element of each of these variables, please refer to the Pricing Override section below.
Validation
This style.jsonc file will be validated as application page loads. If it contains any syntax error, unauthaurized variable name or wrongly formatted values, it will be dismissed with console errors/warnings and no customized css will be loaded in the application page, so be careful to properly edit this file before uploading it.
Common errors:
Wrong json syntax (missing closing "}" for instance) -> solution: validate the JSON object with a free online json validator such as https://jsonlint.com/. Though, you have to remove comments before validation (jsonc not supported).
Non existing variable name. -> solution: make sure all variable names belong to the lists mentioned above.
Wrong formatted value. -> solution: make sure all values belong to the expected ones, e.g. colors should be either #rrggbb or rgb(R,G,B).
logo.png
This file is the logo that will be displayed at the top left end corner of the application.
It must be a PNG format file, ideally of size 200x80 pixels, though it could be smaller or larger but keeping the same ratio will ensure a nice looking layout.
icons.svg
This file contains the list of all customizable symbols which will be used for displaying icons in the application. Note that it doesn't need to inform them all, just the ones to customize are enough, the other ones will be automatically set to the default ones.
Here is an example of a custom icons.svg file:
<svg>
<symbol id="icon-action-notes" viewBox="0 0 25 25">
<path d="M16,14H8a1,1,0,0,0,0,2h8a1,1,0,0,0,0-2Zm0-4H10a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Zm4-6H17V3a1,1,0,0,0-2,0V4H13V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H4A1,1,0,0,0,3,5V19a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3V5A1,1,0,0,0,20,4ZM19,19a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V6H7V7A1,1,0,0,0,9,7V6h2V7a1,1,0,0,0,2,0V6h2V7a1,1,0,0,0,2,0V6h2Z"/>
</symbol>
<symbol id="icon-function-product-list" viewBox="0 0 25 25">
<path d="M4 7a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1zm-5 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1zm-5 5a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1zm5 0a1 1 0 0 1 1-1h9a1 1 0 1 1 0 2h-9a1 1 0 0 1-1-1z" fill="#0D0D0D"/>
</symbol>
</svg>
The content of this file is as follow:
- The svg tag is mandatory. No need to specify the XML namespace for svgs, a tag without any attribute will do.
- Inside the svg tag, any number of symbol tags describing the customized icons.
The symbol tag may have two attributes:
- A mandatory id attribute corresponding to the id of the icon you want to customize. The possible ids and their places in the app is listed in the section
Symbols impact on the UI
. - An optional viewBox attribute that defines the coordinate system for the contents of the symbol. It is defined as a list of four values separated by white space or a comma, like this:
<symbol id="the-symbol-id-to-customize" viewBox="min-x min-y width height">
<!-- Symbol contents go here -->
</symbol>
- min-x: The minimum x-coordinate (horizontal) of the viewBox.
- min-y: The minimum y-coordinate (vertical) of the viewBox.
- width: The width of the viewBox.
- height: The height of the viewBox.
If it is not specified, the SVG content will be displayed at its natural size, and the viewport dimensions (specified by the width and height attributes of the <svg> element) will determine how the content is rendered.
- At last, inside the symbol tag, goes the SVG markup describing what your icon should look like. I can be a path tag or any number of line, rect or other svg primitives. You should be able to copy / paste its content from the web or from your Graphic Design Software of choice.
Uploading the Settings Files
Once both style.jsonc and logo.png files are created, it is necessary to upload them on the ByMe platform in order for the application to process them at launch. For each asset to upload in our platform there is a succession of 3 network calls to make, that are documented below.
NOTE : The following procedure is for a specific environment and a specific application distribution. These steps should be followed on every environments based on the target (staging, main, etc.), and every application distributions within these environments.
- Get a temporary bucket access
The first step is to retrieve a temporary access to the upload bucket. The corresponding call is one of our web services: POST storages/presigned/post/aws. For more details, see documentation here.
It is necessary to provide a key parameter. Need to choose the name, and it doesn't need to have an extension. We advise to use a UUID generator to have a different key each time, but it is also fine to reuse always the same key.
The response of this web-service is in the following form:
{
"url": "string",
"fields": {
"key": "string",
"bucket": "string",
"X-Amz-Algorithm": "string",
"X-Amz-Credential": "string",
"X-Amz-Date": "string",
"Policy": "string",
"X-Amz-Signature": "string"
}
}
It contains all the necessary information you need in order to upload the asset on the temporary bucket. For the context of this documentation, let's call this return object tmpBucketResponse
- Upload the asset on the temporary bucket
The second call to perform is not a ByMe web-service, but an AWS upload call. Refer to Amazon documentation for a detailed explanation of how to do this.
Need to do a POST call to tmpBucketResponse.url. The body of the request must contain the following fields in a form-data:
key ⮞ tmpBucketResponse.fields.key
acl ⮞ "private" or "public-read". If we indicated an acl value in your first call, it must be the same here.
bucket ⮞ tmpBucketResponse.fields.bucket
X-Amz-Credential ⮞ tmpBucketResponse.fields.X-Amz-Credential
X-Amz-Algorithm ⮞ tmpBucketResponse.fields.X-Amz-Algorithm
X-Amz-Date ⮞ tmpBucketResponse.fields.X-Amz-Date
X-Amz-Signature ⮞ tmpBucketResponse.fields.X-Amz-Signature
policy ⮞ tmpBucketResponse.fields.policy
file ⮞ the file asset to upload. The value given is of type File.
⚠️ Make sure that the "file" attribute is always the last in the form. The reason is that all elements placed after this "file" attribute are ignored.
For more details about how to send a request containing a form-data, refer to this MDN resource.
- Copy the settings files to the right place
Now that the asset is uploaded on the temporary bucket, the last step is to copy it to the main bucket. This last step is a call to one of our web services: POST applicationdistributions/{distributionID}/assets/{path}
- distributionID is the application distribution ID to target.
- path is the path on the main bucket where the asset will be copied. here are the correct values to use for this path parameter:
logo file | style file |
---|---|
branding%2Flogo.png | branding%2Fstyle.jsonc |
The formatting is not a mistake here, need to write "%2F" and not "/".
⚠️ Be very careful with the value of this "path" parameter. It is necessary to use exclusively those 2 values. The risk is overwritting another asset if we use another path.
This web-service call must contain the following body:
{
"tmpUploadKey" : "string"
}
The value of tmpUploadKey must be the generated temporary key. In other words, we need to put the value of tmpBucketResponse.fields.key.
CSS impact on the UI
The JSON file will be converted to a CSS file, which contains all the customizable branding settings in the application. The following documentation will detail how each setting impacts the UI.
Note: the hexadecimal codes and screenshots used in this documentation are based on the default Core theme. These are the fallback settings if no branding file is provided.
Global Colors
Branding Colors
Primary and alt colors are the brand's identity colors. Primary and alt can be similar, but we recommend that the secondary color be different (more neutral, eg. a light grey).
Primary
"primary-default": "#006699",
"primary-active": "#333366",
The primary color is used in multiple places in the UI (default and active state):
Focused input border color
Checkboxes background
Radio buttons
Focused select box (dropdown menu) border
Icon button's icon on hover, focus, selected state
Icon and label button's text and icon on hover, focus, selected state
Checked toggle buttons background
Button text's text
Catalog browser's product cards border on hover and selected state
Room shape's selected state
Sun position's circle
Sun inclination half circle
Viewpoint's slider track and handle + viewpoint label's background
Alt
"alt-default": "#08a67f",
"alt-active": "#06926f",
The alt color is used for the circle icon buttons. Brands can choose to use the same color for primary and alt variables; if so, there will be no difference for those buttons.
Create a favorite list
Take a screenshot action button
Secondary
"secondary-default": "#eeeeee",
"secondary-active": "#b6b6b6",
The secondary color (default and active state) can be used for UI elements like secondary icon buttons or non-active tabs. For now no module in the application uses this setting.
Branding Text Colors
The branding text colors are used whenever we need to add text above a background with a branding color. Readability is the main concern here. There are 2 states, that match the background color's states: default and active.
A text in txt-primary-default
must be readable on a primary-default
background.
A text in txt-primary-active
must be readable on a primary-active
background.
A text in txt-alt-default
must be readable on a alt-default
background.
A text in txt-alt-active
must be readable on a alt-active
background.
A text in txt-secondary-default
must be readable on a secondary-default
background.
A text in txt-secondary-active
must be readable on a secondary-active
background.
Link Colors
The link colors are used to style href links. There are no href links in the Home application, therefor the links settings are not used.
Event Colors
The event colors include 4 types: info, success, error and tip. They are used to provide user feedbacks on UI elements, such as: notifications (informative notifications, success notifications, error notifications); recommendations, warnings or tips in the help center; input errors, etc.
Colors
Success
"event-success": "#1a88ab",
The event success color is used on success notification's background.
Error
"event-error": "#ae2b34",
The event error color is used in multiple places in the UI:
Input's border and input error message when there is an error in a field (input or text area):
Error notification's background:
Info
"event-info": "#eeeeee",
The event info color is used on info notification's background.
Tip
"event-tip": "#1a88ab",
The event tip color is used in the help center:
Help center's tool tips' title and icon:
Text Colors
The event text colors are used whenever we need to add text above a background with an event color. Readability is the main concern here.
Success
A text in txt-event-success must be readable on a event-success background.
Error
A text in txt-event-error must be readable on a event-error background.
Info
A text in txt-event-info must be readable on a event-info background.
Tip
A text in txt-event-tip must be readable on a event-tip background.
Call to Actions (CTA)
There are 3 types of CTA: primary, alt and secondary.
Each type has different sizes: S, M, L.
There are 2 customizable states for each CTA: default and active (active = on hover, focus and selected state).
The "disabled" state is automatically generated, using the CTA default settings with a 0.5 opacity and default cursor.
The settings file allows to modify multiple parameters:
All Types
Radius - available soon
"brand-radius-cta": "2px",
This variable changes the border radius of all CTA (primary, alt, secondary) in the application (buttons, such as catalog entries, won't be modified by this variable).
Each type of CTA has the same settings: font-weight, background color, border color and text color. Here are the details for the primary CTA.The same is true for Alt and Secondary CTA.
Primary (same logic applies to Alt and Secondary)
Font Weight
"brand-font-weight-cta-l-primary": "bold",
This variable changes the font-weight of the primary CTA's text for L size and bigger. To ensure readability, smaller buttons will always have normal font-weight.
Background
"cta-primary-background-default": "#006699",
"cta-primary-background-active": "#333366"
These variables change the primary CTA's background color, in default and active state. It can be the same as the branding primary color or any other hexadecimal code. It can be "transparent" for an outline button.
Border
"cta-primary-border-default": "#006699",
"cta-primary-border-active": "#333366",
These variables change the primary CTA's border color, in default and active state. It can be the same as the branding primary color or any other hexadecimal code. If no border is wanted, the same color code as the CTA background should be used (do not use "transparent", as the 1px wide border is part of the total CTA height/width calculation).
Text
"cta-primary-txt-default": "#ffffff",
"cta-primary-txt-active": "#ffffff",
These variables change the primary CTA's text color, in default and active state. It can be the same as the branding primary text color or any other hexadecimal code, as long as it is readable on the chosen CTA primary background color.
Fonts
Family
Apart from the standard fonts, here is a list of available customized fonts, if you want to add one, please contact us:
- Gotham light
- Gotham book
- Gotham medium
- Gotham bold
"font-family": "Helvetica, Arial, \"Bitstream Vera Sans\", sans-serif"
This variable changes the font-family throughout the entire application.
Size - available soon
This variable changes the font-size base upon which the different font sizes are scaled.
Line Height - available soon
This variable changes the line height base upon which the different line-heights are scaled.
Pricing Override
This section is dedicated to the override styling for each type of price. CSS selectors can be filled with CSS properties to override default price styling. As there is a default style, this override is optional. The branding style will override any CSS property, as it is meant to.
New CSS properties will impact every price displayed in the application, therefore it is not advisable to change properties that can break the layout, such as the font-size, as it will change the visible price in every location (topbar, catalog browser, etc).
There are 3 possible cases handled:
No Reduction
Only the standard price is visible and its style can be overridden.
/* CASE 1: normal price
/* standard pricing style for .standard-price */
"standard-price": [],
Default style:
Membership Pricing
Displays the standard price under the fidelity program price. Membership price can have a label before its value. Both prices and the membership label styles can be overridden. Text of membership label is a localized string which is managed by the application translation key price.member_price. To know more, refer to Localization.
/* CASE 2: membership price
/* membership pricing style for .standard-price */
/* This setting manages the display of the standard price indicated below the membership price. */
"membership-standard-price": [],
/* membership pricing style for .membership-price */
/* This setting overwrites the display of the value of the membership price defined in membership-standard-price-label-branding. */
"membership-price": [
"color: #ff9d1a"
],
/* membership pricing style for .membership-price-label */
/* This setting manages the display of both label and value of the membership price. */
"membership-price-label": [
"color: #212121"
],
Default style:
Reduced Pricing
Displays the standard price under the reduced price. Both can be overridden.
/* CASE 3: reduced price
/* reduced pricing style for .standard-price */
"reduced-standard-price": [
"position: relative",
"text-decoration: none"
],
"reduced-standard-price-after": [
"background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ3aWR0aDogMTAwJTsgaGVpZ2h0OiAxMDAlOyI+PGxpbmUgeDE9IjAiIHkxPSIxMDAlIiB4Mj0iMTAwJSIgeTI9IjAiIHN0eWxlPSJzdHJva2U6cmdiKDE5OSw3Miw4NSk7IHN0cm9rZS13aWR0aDoxIi8+PC9zdmc+\")",
"content: \"\"",
"display: block",
"height: 100%",
"left: 0",
"position: absolute",
"top: 0",
"width: 100%"
],
"reduced-standard-price-printable": [],
"reduced-standard-price-printable-after": [],
/* reduced pricing style for .reduced-price */
"reduced-price": []
Default style:
Symbols impact on the UI
The following section will describe which symbol ids can be overridden and to which icons it refers in the application.
Symbol id | Default icon | Note |
---|---|---|
icon-function-favorite | ![]() | Favorite icon (in the header, toolbar, Catalog...) |
icon-tools-measure | ![]() | Measure tool icon (in the header) |
icon-action-export-hbm | ![]() | Export hbm icon (in the header) |
icon-action-print | ![]() | Print icon (in the header or in the My project popin) |
icon-action-undo | ![]() | Undo icon (in the header, editors, ...) |
icon-action-redo | ![]() | Redo icon (in the header, editors, ...) |
icon-action-save | ![]() | Save icon (in the popins, ...) |
icon-view-close | ![]() | Close icon (in popins, ...) |
icon-catalog-accessories | ![]() | Catalog icon used for Accessories category (see Application Distribution parameters catalogEntries) |
icon-catalog-appliances | ![]() | Catalog icon used for Appliances category (see Application Distribution parameters catalogEntries) |
icon-catalog-coverings | ![]() | Catalog icon used for Covering category (see Application Distribution parameters catalogEntries) |
icon-catalog-deco | ![]() | Catalog icon used for Deco category (see Application Distribution parameters catalogEntries) |
icon-catalog-dining | ![]() | Catalog icon used for Dining category (see Application Distribution parameters catalogEntries) |
icon-catalog-doors | ![]() | Catalog icon used for Doors category (see Application Distribution parameters catalogEntries) |
icon-catalog-flooring | ![]() | Catalog icon used for Flooring category (see Application Distribution parameters catalogEntries) |
icon-catalog-front | ![]() | Catalog icon used for Front category (see Application Distribution parameters catalogEntries) |
icon-catalog-furniture | ![]() | Catalog icon used for Furniture category (see Application Distribution parameters catalogEntries) |
icon-catalog-furniture-alt | ![]() | Alternative catalog icon used for Furniture category (see Application Distribution parameters catalogEntries) |
icon-catalog-handles | ![]() | Catalog icon used for Handles category (see Application Distribution parameters catalogEntries) |
icon-catalog-objects | ![]() | Configurators icons (in the top bar) or catalog icon used for Object category (see Application Distribution parameters catalogEntries) |
icon-catalog-openings | ![]() | Catalog icon used for Opening category (see Application Distribution parameters catalogEntries) |
icon-catalog-worktop | ![]() | Catalog icon used for Worktop category (see Application Distribution parameters catalogEntries) |
icon-action-search | ![]() | Search icon (in the toolbar, catalog browser, ...) |
icon-action-edit | ![]() | Edit icon (in the property window) |
icon-action-opening | ![]() | Open icon (in the property window) |
icon-action-zoomTo | ![]() | Zoom To icon (in the property window) |
icon-action-position | ![]() | Position icon (in the property window) |
icon-action-duplicate | ![]() | Duplicate icon (in the property window) |
icon-action-delete | ![]() | Delete icon (in the property window) |
icon-action-clean | ![]() | Empty room icon (in the property window) |
icon-tools-wall-side | ![]() | Wall side icon (in the edit property panel) |
icon-tools-opening-side | ![]() | Opening side icon (in the edit property panel) |
icon-tools-background | ![]() | My medias icon (in the topbar) orbBackground tool icon (in the "Create a realistic image" popin) |
icon-tools-azimuth | ![]() | Azimuth tool icon (in the "Create a realistic image" popin) |
icon-tools-inclination | ![]() | Inclination tool icon (in the "Create a realistic image" popin) |
icon-action-download | ![]() | Download icon (in the "Upload a 2D floorplan" popin) |
icon-function-document | ![]() | Document icon (in the "Upload a 2D floorplan" popin) |
icon-action-rotate-clockwise | ![]() | Download icon (in the "Upload a 2D floorplan" popin) |
icon-tools-opacity | ![]() | Rotate clockwise icon (in the "Upload a 2D floorplan" popin) |
icon-action-move | ![]() | Move icon (in the "Upload a 2D floorplan" popin) |
icon-action-double-arrow | ![]() | Double arrow icon (in the "Upload a 2D floorplan" popin) |
icon-action-expired | ![]() | Product expired icon (in the help center, summary step) |
icon-action-warning | ![]() | Warning icon (in the help center, summary step) |
icon-action-tip | ![]() | Tip icon (in the help center, summary step) |
icon-global-app | ![]() | Global app icon (in the summary step) |
icon-action-info | ![]() | Info icon (near the price in the top bar) |
icon-action-help | ![]() | Help icon (in the Help Center) |
icon-action-reload | ![]() | Reload icon (in the Help Center) |
icon-action-play | ![]() | Play icon (in the Help Center) |
icon-tools-options | ![]() | Tools options icon (in the navigation tools) |
icon-view-2d | ![]() | 2d view icon (in the navigation tools) |
icon-view-3d | ![]() | 3d view icon (in the navigation tools) |
icon-view-fp | ![]() | First person view icon (in the navigation tools) |
icon-action-zoom | ![]() | Zoom icon (in the navigation tools) |
icon-action-unzoom | ![]() | Unzoom icon (in the navigation tools) |
icon-action-viewpoint | ![]() | Viewpoint icon (in the navigation tools) |
icon-action-zoom-extend | ![]() | Extend zoom (in the navigation tools) |
icon-view-maximize | ![]() | Maximize icon (in the Catalog) |
icon-view-minimize | ![]() | Minimize icon (in the Catalog) |
icon-favorites-item | ![]() | Favorites item icon (in the Catalog) |
icon-favorites-arrow | ![]() | Favorites arrow icon (in the Catalog) |
icon-favorites-list | ![]() | Favorites list icon (in the Catalog) |
icon-function-favorite-filled | ![]() | Favorite filled icon (in the Catalog) |
icon-function-hq-render | ![]() | Render hq icon (in the "Images & 2D Plans" media list) |
icon-function-render | ![]() | Render icon (in the "Images & 2D Plans" media list) |
icon-tags-attic | ![]() | Attic icon (in Photo Studio) |
icon-tags-basement | ![]() | Basement icon (in Photo Studio) |
icon-tags-bathroom | ![]() | Bathroom icon (in Photo Studio) |
icon-tags-bedroom | ![]() | Bedroom icon (in Photo Studio) |
icon-tags-boilerroom | ![]() | Biolerroom icon (in Photo Studio) |
icon-tags-breakfast | ![]() | Breakfast icon (in Photo Studio) |
icon-tags-diningroom | ![]() | Diningroom icon (in Photo Studio) |
icon-tags-entertainment | ![]() | Entertainment icon (in Photo Studio) |
icon-tags-garage | ![]() | Garage icon (in Photo Studio) |
icon-tags-hallway | ![]() | Hallway icon (in Photo Studio) |
icon-tags-laundryroom | ![]() | Laundry room icon (in Photo Studio) |
icon-tags-library | ![]() | Library icon (in Photo Studio) |
icon-tags-livingroom | ![]() | Living room icon (in Photo Studio) |
icon-tags-mudroom | ![]() | Mudroom icon (in Photo Studio) |
icon-tags-nursery | ![]() | Nursery icon (in Photo Studio) |
icon-tags-office | ![]() | Office icon (in Photo Studio) |
icon-tags-pantry | ![]() | Pantry icon (in Photo Studio) |
icon-tags-winecellar | ![]() | Wine cellar icon (in Photo Studio) |
icon-tools-auto | ![]() | Auto tool icon (in Photo Studio) |
icon-tools-bulb-alight | ![]() | Bulb alight tool icon (in Photo Studio) |
icon-tools-bulb-intensity-1 | ![]() | Bulb intensity 1 icon (in Photo Studio) |
icon-tools-bulb-intensity-2 | ![]() | Bulb intensity 2 icon (in Photo Studio) |
icon-tools-bulb-intensity-3 | ![]() | Bulb intensity 3 icon (in Photo Studio) |
icon-tools-bulb-intensity-4 | ![]() | Bulb intensity 4 icon (in Photo Studio) |
icon-tools-bulb-intensity-5 | ![]() | Bulb intensity 5 icon (in Photo Studio) |
icon-tools-bulb-off | ![]() | Bulb off icon (in Photo Studio) |
icon-tools-bulb-twice | ![]() | Bulb twice icon (in Photo Studio) |
icon-tools-camera-full | ![]() | Camera full icon (in Photo Studio) |
icon-tools-camera | ![]() | Auto tool icon (in Photo Studio) |
icon-tools-ceiling-height | ![]() | Ceiling height icon (in Flooplan step mobile toolbar) |
icon-tools-change-room | ![]() | Floor plan icon (in the top bar) |
icon-tools-inclination-house | ![]() | Inclination house icon (in Photo Studio) |
icon-tools-dots | ![]() | Dots icon (in Photo Studio) |
icon-tools-flares | ![]() | Flares icon (in Photo Studio) |
icon-tools-kitchen | ![]() | Kitchen icon (in Photo Studio) |
icon-tools-lens-14 | ![]() | Lens 14 icon (in Photo Studio) |
icon-tools-lens-24 | ![]() | Lens 24 icon (in Photo Studio) |
icon-tools-lens-35 | ![]() | Lens 35 icon (in Photo Studio) |
icon-tools-lens-60 | ![]() | Lens 60 icon (in Photo Studio) |
icon-tools-lens | ![]() | Lens icon (in Photo Studio) |
icon-tools-night | ![]() | Night tool icon (in Photo Studio) |
icon-tools-picture | ![]() | Create image tool icon (in the toolbar) and picture icon (in the medias list) |
icon-tools-plane | ![]() | Plan icon (in the medias list) |
icon-tools-sun-outline | ![]() | Sun outline icon (in Photo Studio) |
icon-tools-sun | ![]() | Sun icon (in Photo Studio) |
icon-tools-tilt | ![]() | Tilt icon (in Photo Studio) |
icon-action-electric-warning | ![]() | Electric warning icon (in the Help Center) |