diff --git a/docs/colors-and-icons.md b/docs/colors-and-icons.md
index 7a061d3b..c1cbaa3e 100644
--- a/docs/colors-and-icons.md
+++ b/docs/colors-and-icons.md
@@ -12,9 +12,13 @@ change the color variables:
 --marketplaceColorLight: #ff4c38;
 --marketplaceColorDark: #8c291e;
 ```
+and
+```css
+--marketplaceColorEncoded: %23c0392b;
+```
 
-N.B. search also from files color code `c0392b`. Some icons and background-images with data-URL are
-using it directly.
+N.B. search also from files for the color code `c0392b`. It's used directly in a few places like
+some icons, the 500 error page and map configurations.
 
 ## Icons
 
diff --git a/src/components/FieldCheckbox/FieldCheckbox.js b/src/components/FieldCheckbox/FieldCheckbox.js
index a1231c2d..aeb92a2f 100644
--- a/src/components/FieldCheckbox/FieldCheckbox.js
+++ b/src/components/FieldCheckbox/FieldCheckbox.js
@@ -12,7 +12,6 @@ const IconCheckbox = props => {
         <g transform="translate(2 2)">
           <path
             className={css.checked}
-            fill="#C0392B"
             d="M9.9992985 1.5048549l-.0194517 6.9993137C9.977549 9.3309651 9.3066522 10 8.4798526 10H1.5001008c-.8284271 0-1.5-.6715729-1.5-1.5l-.000121-7c0-.8284271.6715728-1.5 1.5-1.5h.000121l6.9993246.0006862c.8284272.000067 1.4999458.671694 1.499879 1.5001211a1.5002208 1.5002208 0 0 1-.0000059.0040476z"
           />
           <path
diff --git a/src/components/Logo/IconLogo.js b/src/components/Logo/IconLogo.js
index bf090fce..149c5eae 100644
--- a/src/components/Logo/IconLogo.js
+++ b/src/components/Logo/IconLogo.js
@@ -15,7 +15,6 @@ const IconLogo = props => {
     >
       <path
         d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
-        fill="#C0392B"
         fillRule="evenodd"
       />
     </svg>
diff --git a/src/components/Logo/Logo.css b/src/components/Logo/Logo.css
new file mode 100644
index 00000000..8bde39bc
--- /dev/null
+++ b/src/components/Logo/Logo.css
@@ -0,0 +1,7 @@
+@import '../../marketplace.css';
+
+.logoMobile {
+  & path {
+    fill: var(--marketplaceColor);
+  }
+}
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
index bf9582d3..743d2e96 100644
--- a/src/components/Logo/Logo.js
+++ b/src/components/Logo/Logo.js
@@ -1,18 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import config from '../../config';
+import classNames from 'classnames';
 
+import config from '../../config';
 import IconLogo from './IconLogo';
 import LogoImage from './saunatime-logo.png';
+import css from './Logo.css';
 
 const Logo = props => {
   const { className, format, ...rest } = props;
+  const mobileClasses = classNames(css.logoMobile, className);
 
   if (format === 'desktop') {
     return <img className={className} src={LogoImage} alt={config.siteTitle} {...rest} />;
   }
 
-  return <IconLogo className={className} {...rest} />;
+  return <IconLogo className={mobileClasses} {...rest} />;
 };
 
 const { oneOf, string } = PropTypes;
diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css
index d75f0318..ad2e1be2 100644
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@@ -41,7 +41,7 @@
   border-bottom-color: transparent;
 
   transition: var(--transitionStyleButton);
-  background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
   background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */
 
   &:hover {
@@ -59,7 +59,7 @@
     margin-top: 0;
 
     &:hover {
-      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
+      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
       background-position: right center;
     }
   }
diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css
index eddd8716..a1a6886b 100644
--- a/src/containers/CheckoutPage/CheckoutPage.css
+++ b/src/containers/CheckoutPage/CheckoutPage.css
@@ -45,6 +45,10 @@
 .logoMobile {
   display: block;
 
+  & path {
+    fill: var(--marketplaceColor);
+  }
+
   @media (--viewportLarge) {
     display: none;
   }
diff --git a/src/containers/CheckoutPage/LogoIcon.js b/src/containers/CheckoutPage/LogoIcon.js
index 15424b7a..c07df269 100644
--- a/src/containers/CheckoutPage/LogoIcon.js
+++ b/src/containers/CheckoutPage/LogoIcon.js
@@ -16,7 +16,6 @@ const LogoIcon = props => {
       >
         <path
           d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
-          fill="#C0392B"
           fillRule="evenodd"
         />
       </svg>
diff --git a/src/containers/PasswordRecoveryPage/DoorIcon.css b/src/containers/PasswordRecoveryPage/DoorIcon.css
new file mode 100644
index 00000000..471c5840
--- /dev/null
+++ b/src/containers/PasswordRecoveryPage/DoorIcon.css
@@ -0,0 +1,10 @@
+@import '../../marketplace.css';
+
+.stroke {
+  stroke: var(--marketplaceColor);
+}
+
+.strokeAndFill {
+  stroke: var(--marketplaceColor);
+  fill: var(--marketplaceColor);
+}
diff --git a/src/containers/PasswordRecoveryPage/DoorIcon.js b/src/containers/PasswordRecoveryPage/DoorIcon.js
index 6281f9de..4bbf3b85 100644
--- a/src/containers/PasswordRecoveryPage/DoorIcon.js
+++ b/src/containers/PasswordRecoveryPage/DoorIcon.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import css from './DoorIcon.css';
 
 const DoorIcon = props => {
   const { className } = props;
@@ -13,15 +14,14 @@ const DoorIcon = props => {
     >
       <g strokeWidth="2.5" fill="none" fillRule="evenodd" strokeLinejoin="round">
         <path
-          stroke="#C0392B"
-          fill="#C0392B"
+          className={css.strokeAndFill}
           strokeLinecap="round"
           d="M28.182 42.364H50V26H28.182z"
         />
         <path d="M39.09 38v-4.364" stroke="#FFF" strokeLinecap="round" />
         <path
+          className={css.stroke}
           d="M31.455 26v-2.455c0-4.067 3.176-7.363 7.09-7.363 3.915 0 7.09 3.296 7.09 7.363V26"
-          stroke="#C0392B"
           strokeLinecap="round"
         />
         <path
@@ -29,13 +29,13 @@ const DoorIcon = props => {
           stroke="#FFF"
         />
         <path
-          stroke="#C0392B"
+          className={css.stroke}
           strokeLinecap="round"
           d="M23.818 7.455h19.637V14M43.455 47.818v4.364H23.818M2 52.798l21.818 4.838V2L2 6.838z"
         />
         <path
+          className={css.stroke}
           d="M19.455 30.91c0 2.107-1.71 3.817-3.82 3.817-2.106 0-3.817-1.71-3.817-3.818 0-2.11 1.71-3.82 3.818-3.82s3.82 1.71 3.82 3.82z"
-          stroke="#C0392B"
           strokeLinecap="round"
         />
       </g>
diff --git a/src/marketplace.css b/src/marketplace.css
index d29cbc65..57ec63b3 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -51,6 +51,9 @@
 
   --matterColorLightTransparent: rgba(255, 255, 255, 0.65);
 
+  /* Used with inline CSS SVGs */
+  --marketplaceColorEncoded: %23c0392b;
+
   /* ================ Spacing unites ================ */
 
   /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */