released

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".

  1. 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.

  1. 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.

  1. 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:

  1. 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).

  2. Non existing variable name. -> solution: make sure all variable names belong to the lists mentioned above.

  3. 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>
  1. min-x: The minimum x-coordinate (horizontal) of the viewBox.
  2. min-y: The minimum y-coordinate (vertical) of the viewBox.
  3. width: The width of the viewBox.
  4. 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.

  1. 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

  1. 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.

  1. 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 filestyle file
branding%2Flogo.pngbranding%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 Focused input

Checkboxes background Checkboxes background

Radio buttons Radio buttons

Focused select box (dropdown menu) border Focused select box

Icon button's icon on hover, focus, selected state Icon button's icon

Icon and label button's text and icon on hover, focus, selected state Icon and label button's

Checked toggle buttons background Checked toggle buttons background

Button text's text Button text's text

Catalog browser's product cards border on hover and selected state Catalog browser's product cards

Room shape's selected state Room shape's selected state

Sun position's circle Sun position's circle

Sun inclination half circle Sun inclination half circle

Viewpoint's slider track and handle + viewpoint label's background Viewpoint's slider

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 Navigation Button

Take a screenshot action button Navigation 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. Success notification

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): Input border and error message

Error notification's background: Error notification

Info

"event-info": "#eeeeee",

The event info color is used on info notification's background.

Event info color

Tip

"event-tip": "#1a88ab",

The event tip color is used in the help center:

Help center's tool tips' title and icon: Help Center tool tips

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: Default style price

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: Default style membership price

Discounted Pricing

Displays the standard price under the discounted price.

Default style: Default style discounted price

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: Default style reduced price

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 idDefault iconNote
icon-function-favoriteFavorite iconFavorite icon (in the header, toolbar, Catalog...)
icon-tools-measureMeasure iconMeasure tool icon (in the header)
icon-action-export-hbmExport hbm iconExport hbm icon (in the header)
icon-action-printPrint iconPrint icon (in the header or in the My project popin)
icon-action-undoUndo iconUndo icon (in the header, editors, ...)
icon-action-redoRedo iconRedo icon (in the header, editors, ...)
icon-action-saveSave iconSave icon (in the popins, ...)
icon-view-closeClose iconClose icon (in popins, ...)
icon-catalog-accessoriesAccessories catalog iconCatalog icon used for Accessories category (see Application Distribution parameters catalogEntries)
icon-catalog-appliancesAppliances catalog iconCatalog icon used for Appliances category (see Application Distribution parameters catalogEntries)
icon-catalog-coveringsCovering catalog iconCatalog icon used for Covering category (see Application Distribution parameters catalogEntries)
icon-catalog-decoDeco catalog iconCatalog icon used for Deco category (see Application Distribution parameters catalogEntries)
icon-catalog-diningDining catalog iconCatalog icon used for Dining category (see Application Distribution parameters catalogEntries)
icon-catalog-doorsDoors catalog iconCatalog icon used for Doors category (see Application Distribution parameters catalogEntries)
icon-catalog-flooringFlooring catalog iconCatalog icon used for Flooring category (see Application Distribution parameters catalogEntries)
icon-catalog-frontFront catalog iconCatalog icon used for Front category (see Application Distribution parameters catalogEntries)
icon-catalog-furnitureFurniture catalog iconCatalog icon used for Furniture category (see Application Distribution parameters catalogEntries)
icon-catalog-furniture-altAlternative furniture catalog iconAlternative catalog icon used for Furniture category (see Application Distribution parameters catalogEntries)
icon-catalog-handlesHandles catalog iconCatalog icon used for Handles category (see Application Distribution parameters catalogEntries)
icon-catalog-objectsObject catalog iconConfigurators icons (in the top bar) or catalog icon used for Object category (see Application Distribution parameters catalogEntries)
icon-catalog-openingsOpening catalog iconCatalog icon used for Opening category (see Application Distribution parameters catalogEntries)
icon-catalog-worktopWorktop catalog iconCatalog icon used for Worktop category (see Application Distribution parameters catalogEntries)
icon-action-searchSearch iconSearch icon (in the toolbar, catalog browser, ...)
icon-action-editEdit iconEdit icon (in the property window)
icon-action-openingOpen iconOpen icon (in the property window)
icon-action-zoomToZoom To iconZoom To icon (in the property window)
icon-action-positionPosition iconPosition icon (in the property window)
icon-action-duplicateDuplicate iconDuplicate icon (in the property window)
icon-action-deleteDelete iconDelete icon (in the property window)
icon-action-cleanClean iconEmpty room icon (in the property window)
icon-tools-wall-sideWall side iconWall side icon (in the edit property panel)
icon-tools-opening-sideOpening side iconOpening side icon (in the edit property panel)
icon-tools-backgroundBackground tool iconMy medias icon (in the topbar) orbBackground tool icon (in the "Create a realistic image" popin)
icon-tools-azimuthAzimuth tool iconAzimuth tool icon (in the "Create a realistic image" popin)
icon-tools-inclinationInclination tool iconInclination tool icon (in the "Create a realistic image" popin)
icon-action-downloadDownload iconDownload icon (in the "Upload a 2D floorplan" popin)
icon-function-documentDocument iconDocument icon (in the "Upload a 2D floorplan" popin)
icon-action-rotate-clockwiseRotate clockwise iconDownload icon (in the "Upload a 2D floorplan" popin)
icon-tools-opacityDownload iconRotate clockwise icon (in the "Upload a 2D floorplan" popin)
icon-action-moveMove iconMove icon (in the "Upload a 2D floorplan" popin)
icon-action-double-arrowDouble arrow iconDouble arrow icon (in the "Upload a 2D floorplan" popin)
icon-action-expiredExpired iconProduct expired icon (in the help center, summary step)
icon-action-warningRule warning iconWarning icon (in the help center, summary step)
icon-action-tipRule tip iconTip icon (in the help center, summary step)
icon-global-appGlobal app iconGlobal app icon (in the summary step)
icon-action-infoInfo iconInfo icon (near the price in the top bar)
icon-action-helpHelp iconHelp icon (in the Help Center)
icon-action-reloadReload iconReload icon (in the Help Center)
icon-action-playPlay iconPlay icon (in the Help Center)
icon-tools-optionsTools options iconTools options icon (in the navigation tools)
icon-view-2dView 2d icon2d view icon (in the navigation tools)
icon-view-3dView 3d icon3d view icon (in the navigation tools)
icon-view-fpView fp iconFirst person view icon (in the navigation tools)
icon-action-zoomZoom iconZoom icon (in the navigation tools)
icon-action-unzoomUnzoom iconUnzoom icon (in the navigation tools)
icon-action-viewpointViewpoint iconViewpoint icon (in the navigation tools)
icon-action-zoom-extendExtend zoom iconExtend zoom (in the navigation tools)
icon-view-maximizeMaximize iconMaximize icon (in the Catalog)
icon-view-minimizeMinimize iconMinimize icon (in the Catalog)
icon-favorites-itemFavorites item iconFavorites item icon (in the Catalog)
icon-favorites-arrowFavorites arrow iconFavorites arrow icon (in the Catalog)
icon-favorites-listFavorites list iconFavorites list icon (in the Catalog)
icon-function-favorite-filledFavorite filled iconFavorite filled icon (in the Catalog)
icon-function-hq-renderHq render iconRender hq icon (in the "Images & 2D Plans" media list)
icon-function-renderRender iconRender icon (in the "Images & 2D Plans" media list)
icon-tags-atticAttic iconAttic icon (in Photo Studio)
icon-tags-basementBasement tag iconBasement icon (in Photo Studio)
icon-tags-bathroomBathroom tag iconBathroom icon (in Photo Studio)
icon-tags-bedroomBedroom tag iconBedroom icon (in Photo Studio)
icon-tags-boilerroomBiolerroom tag iconBiolerroom icon (in Photo Studio)
icon-tags-breakfastBreakfast tag iconBreakfast icon (in Photo Studio)
icon-tags-diningroomDining room tag iconDiningroom icon (in Photo Studio)
icon-tags-entertainmentEntertainment tag iconEntertainment icon (in Photo Studio)
icon-tags-garageGarage tag iconGarage icon (in Photo Studio)
icon-tags-hallwayHallway tag iconHallway icon (in Photo Studio)
icon-tags-laundryroomLaundry room tag iconLaundry room icon (in Photo Studio)
icon-tags-libraryLibrary tag iconLibrary icon (in Photo Studio)
icon-tags-livingroomLiving room tag iconLiving room icon (in Photo Studio)
icon-tags-mudroomMudroom tag iconMudroom icon (in Photo Studio)
icon-tags-nurseryNursery tag iconNursery icon (in Photo Studio)
icon-tags-officeOffice tag iconOffice icon (in Photo Studio)
icon-tags-pantryPantry tag iconPantry icon (in Photo Studio)
icon-tags-winecellarWine cellar tag iconWine cellar icon (in Photo Studio)
icon-tools-autoTools auto iconAuto tool icon (in Photo Studio)
icon-tools-bulb-alightTools bulb alight iconBulb alight tool icon (in Photo Studio)
icon-tools-bulb-intensity-1Tools bulb intensity 1 iconBulb intensity 1 icon (in Photo Studio)
icon-tools-bulb-intensity-2Tools bulb intensity 2 iconBulb intensity 2 icon (in Photo Studio)
icon-tools-bulb-intensity-3Tools bulb intensity 3 iconBulb intensity 3 icon (in Photo Studio)
icon-tools-bulb-intensity-4Tools bulb intensity 4 iconBulb intensity 4 icon (in Photo Studio)
icon-tools-bulb-intensity-5Tools bulb intensity 5 iconBulb intensity 5 icon (in Photo Studio)
icon-tools-bulb-offTools bulb off iconBulb off icon (in Photo Studio)
icon-tools-bulb-twiceTools bulb twice iconBulb twice icon (in Photo Studio)
icon-tools-camera-fullCamera full iconCamera full icon (in Photo Studio)
icon-tools-cameraCamera iconAuto tool icon (in Photo Studio)
icon-tools-ceiling-heightCeiling height iconCeiling height icon (in Flooplan step mobile toolbar)
icon-tools-change-roomChange room iconFloor plan icon (in the top bar)
icon-tools-inclination-houseInclination house iconInclination house icon (in Photo Studio)
icon-tools-dotsDots iconDots icon (in Photo Studio)
icon-tools-flaresFlares iconFlares icon (in Photo Studio)
icon-tools-kitchenKitchen iconKitchen icon (in Photo Studio)
icon-tools-lens-14Lens 14 iconLens 14 icon (in Photo Studio)
icon-tools-lens-24Lens 24 iconLens 24 icon (in Photo Studio)
icon-tools-lens-35Lens 35 iconLens 35 icon (in Photo Studio)
icon-tools-lens-60Lens 60 iconLens 60 icon (in Photo Studio)
icon-tools-lensLens iconLens icon (in Photo Studio)
icon-tools-nightNight iconNight tool icon (in Photo Studio)
icon-tools-picturePicture iconCreate image tool icon (in the toolbar) and picture icon (in the medias list)
icon-tools-planePlan iconPlan icon (in the medias list)
icon-tools-sun-outlineSun outline iconSun outline icon (in Photo Studio)
icon-tools-sunSun iconSun icon (in Photo Studio)
icon-tools-tiltTilt iconTilt icon (in Photo Studio)
icon-action-electric-warningElectric warning iconElectric warning icon (in the Help Center)

 

← PreviousNext →