@redsift/design-system-legacy 8.0.0-alpha.8 → 8.0.1

package/src/components/icons/ForwardArrowIcon.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const DIRECTION = {
+  TOP: 'top',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+};
+
+const getDirectionCss = (direction) => {
+  if (direction === DIRECTION.LEFT)
+    return css`
+      transform: rotate(135deg);
+    `;
+  if (direction === DIRECTION.TOP)
+    return css`
+      transform: rotate(225deg);
+    `;
+  if (direction === DIRECTION.RIGHT)
+    return css`
+      transform: rotate(-45deg);
+    `;
+  return css`
+    transform: rotate(45deg);
+  `;
+};
+
+const StyledForwardArrowIcon = styled.div`
+  ${({ direction, fill = "#000" }) => {
+    return css`
+      width: 100%;
+      height: 100%;
+      border-right: 2px solid ${fill};
+      border-top: 2px solid ${fill};
+      ${getDirectionCss(direction)}
+    `;
+  }}
+`;
+
+export const ForwardArrowIcon = ({ direction, size = '18px', fill, ...props }) => (
+  <IconContainer {...props} size={size} fill={fill}>
+    <StyledForwardArrowIcon direction={direction} fill={fill} />
+  </IconContainer>
+);
+
+ForwardArrowIcon.propTypes = {
+  direction: PropTypes.oneOf(Object.values(DIRECTION)),
+  size: PropTypes.string,
+  ...IconContainerPropTypes,
+};

package/src/components/icons/Github.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export const Github = ({
+  titleTag = "Github",
+  width = 35,
+  fill = "#ffffff",
+  bgFill = false
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 35 35"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+
+    {bgFill && (
+      <circle
+        fill={bgFill}
+        cx="12.25"
+        cy="12.25"
+        r="12.25"
+        transform="translate(5, 5)"
+      />
+    )}
+    <path
+      fill={fill}
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.3,5C10.5,5,5,10.5,5,17.3c0,5.4,3.5,10,8.4,11.7c0.6,0.1,0.8-0.3,0.8-0.6s0-1.1,0-2.1
+			c-3.4,0.8-4.1-1.7-4.1-1.7c-0.5-1.4-1.4-1.8-1.4-1.8C7.6,22,8.8,22,8.8,22c1.2,0.1,1.9,1.3,1.9,1.3c1.1,1.9,2.9,1.4,3.5,1.1
+			c0.1-0.8,0.5-1.4,0.8-1.7c-2.7-0.3-5.6-1.4-5.6-6.1c0-1.4,0.5-2.4,1.3-3.3c-0.1-0.2-0.5-1.5,0.2-3.2c0,0,1.1-0.3,3.4,1.3
+			c1-0.3,2-0.4,3.1-0.4c1.1,0,2.1,0.2,3.1,0.4c2.3-1.6,3.4-1.3,3.4-1.3c0.7,1.7,0.2,2.9,0.2,3.2c0.8,0.8,1.3,2,1.3,3.3
+			c0,4.8-2.9,5.7-5.6,6c0.5,0.4,0.8,1.1,0.8,2.3c0,1.7,0,2.9,0,3.4c0,0.3,0.2,0.7,0.8,0.6c4.9-1.7,8.4-6.3,8.4-11.7
+			C29.6,10.5,24.1,5,17.3,5z"
+    />
+  </svg>
+);

package/src/components/icons/Globe.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const Globe = ({ titleTag, width = 30, fill = "#33b222", stroke = "#33b222", strokeWidth = 1.4 }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 18 18'
+    style={{
+      width,
+    }}>
+    {titleTag && <title>{titleTag}</title>}
+    <g transform='translate(.53 .53)'>
+      <circle fill='none' cx='8.471' cy='8.471' r='8.471' />
+      <circle fill='none' stroke={stroke} strokeWidth={strokeWidth} cx='8.471' cy='8.471' r='7.765' />
+
+      <g transform='translate(4.941)'>
+        <ellipse fill='none' cx='3.529' cy='8.471' rx='3.529' ry='8.471' />
+        <ellipse fill='none' stroke={stroke} strokeWidth={strokeWidth} cx='3.529' cy='8.471' rx='2.824' ry='7.765' />
+      </g>
+    </g>
+    <path fill='none' d='M0 0h24v24H0z' transform='translate(-3 -3)' />
+    <path
+      fill={fill}
+      fillRule='evenodd'
+      clipRule='evenodd'
+      transform='translate(-3 -3)'
+      d='M19.117 8.47H4.883a.706.706 0 100 1.412h14.234a.706.706 0 100-1.411zM18.676 14.118H5.324a.714.714 0 000 1.411h13.352a.714.714 0 000-1.411z'
+    />
+  </svg>
+);

package/src/components/icons/Hand.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Hand = ({ titleTag, width = 55, fill = "#02ac61" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 50 41.22"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      fill={fill}
+      d="M26.09,41.22A4.11,4.11,0,0,1,23.3,40L23,39.72a3.7,3.7,0,0,1-4.63-.09A3.45,3.45,0,0,1,17,37.29h-.29a3.75,3.75,0,0,1-2.37-.86A3.65,3.65,0,0,1,12.94,34h-.29a3.75,3.75,0,0,1-2.37-.86,3.65,3.65,0,0,1-1.37-2.44H8.62a3.76,3.76,0,0,1-2.37-.87A3.62,3.62,0,0,1,4.9,27.3a3.76,3.76,0,0,1,.82-2.75l1.17-1.38A11.08,11.08,0,0,1,5.79,20a6.73,6.73,0,0,0-1.92-3.74L.35,12.75a1.14,1.14,0,0,1,0-1.65l10-10A1.06,1.06,0,0,1,11.2.72a1.08,1.08,0,0,1,.83.36l3.51,3.51a6.72,6.72,0,0,0,3.75,1.92l.27.07a8.89,8.89,0,0,1,1.12.32,10.16,10.16,0,0,1,3.6-2.24A10.36,10.36,0,0,1,27.91,4a11.24,11.24,0,0,1,2.65.32L32.84,5a6.58,6.58,0,0,0,1.51-1.09L37.87.35A1.14,1.14,0,0,1,38.69,0a1.2,1.2,0,0,1,.83.35l10,10A2.3,2.3,0,0,1,50,12.13l-3.56,3.62a6.76,6.76,0,0,0-1.92,3.74,9.43,9.43,0,0,1-2.62,5.05l-1,1,.93.93a3.76,3.76,0,0,1-.11,5.38,3.78,3.78,0,0,1-2.43,1,3.68,3.68,0,0,1-1.07,2.54,3.34,3.34,0,0,1-2.59,1.07,3.85,3.85,0,0,1-2-.53,3.09,3.09,0,0,1-.82,1.21,3.7,3.7,0,0,1-2.58,1.08,1.35,1.35,0,0,1-.35-.06l-.15,0a3.72,3.72,0,0,1-3.63,3.09Zm-1.45-3a1.64,1.64,0,0,0,1.14.49,1.25,1.25,0,0,0,.83-.3,1.51,1.51,0,0,0,.47-.92,1.42,1.42,0,0,0-.37-1L26,35.71l-1.68,2.15ZM23.5,31.61a1.51,1.51,0,0,0-1,.47l-3.09,3.71a1.87,1.87,0,0,0-.28,1,1.1,1.1,0,0,0,.45.91,1.33,1.33,0,0,0,.87.31,1.21,1.21,0,0,0,1-.47l3.11-3.73a2,2,0,0,0,.27-1.05,1.13,1.13,0,0,0-.45-.91A1.34,1.34,0,0,0,23.5,31.61ZM29,35.28a1.33,1.33,0,0,0,2,0,1.39,1.39,0,0,0,.37-.93,1.17,1.17,0,0,0-.37-.93l-9-9a1.14,1.14,0,0,1,0-1.65,1.16,1.16,0,0,1,.83-.35,1.14,1.14,0,0,1,.82.35L34.35,33.53a1.39,1.39,0,1,0,2-2L25.57,20.82a1.18,1.18,0,0,1,.83-2,1.14,1.14,0,0,1,.82.35L37.87,29.7a1.61,1.61,0,0,0,1.14.5,1.3,1.3,0,0,0,.83-.3,1.87,1.87,0,0,0,.58-.86,1.44,1.44,0,0,0-.38-1L27.23,15.65a3.16,3.16,0,0,0-1.78-.89,2.51,2.51,0,0,0-.65-.08,3.93,3.93,0,0,0-1.55.38L18.4,17.53a3.4,3.4,0,0,1-1.51.37,3,3,0,0,1-2.28-1,3.45,3.45,0,0,1-.86-2.27,2.88,2.88,0,0,1,1-2.18l3.91-3.62a9.38,9.38,0,0,1-4.75-2.57L11.2,3.56,2.83,11.93l2.69,2.68a9.44,9.44,0,0,1,2.62,5,6.81,6.81,0,0,0,.41,1.61l.27-.33a3.93,3.93,0,0,1,2.9-1.4,3.81,3.81,0,0,1,2.37.86A4,4,0,0,1,15,21.62a3.7,3.7,0,0,1,4.59.12A3.45,3.45,0,0,1,21,24.21v.51a4.07,4.07,0,0,1,2,.84A3.43,3.43,0,0,1,24.37,28a2.68,2.68,0,0,1-.07,1.25,3.54,3.54,0,0,1,1.57.72,3.48,3.48,0,0,1,1.4,2.48,3.55,3.55,0,0,1-.09,1Zm-8.37-8.22a1.49,1.49,0,0,0-1,.47l-4.13,5.06a1.85,1.85,0,0,0-.28,1,1.14,1.14,0,0,0,.46.91,1.5,1.5,0,0,0,.83.23,1.35,1.35,0,0,0,1-.4l4.13-5.07a1.87,1.87,0,0,0,.28-1,1.13,1.13,0,0,0-.45-.92A1.34,1.34,0,0,0,20.61,27.06ZM17.3,23.23a1.52,1.52,0,0,0-1,.48l-1.65,1.95-3.1,3.72a1.33,1.33,0,0,0,.19,1.86,1.41,1.41,0,0,0,.91.31,1.51,1.51,0,0,0,1.06-.4l4.13-5,.52-.62a2,2,0,0,0,.27-1.05,1.13,1.13,0,0,0-.45-.91A1.35,1.35,0,0,0,17.3,23.23ZM11.72,22a1.52,1.52,0,0,0-1,.48L7.6,26.18a1.24,1.24,0,0,0-.29,1,1.33,1.33,0,0,0,.47.9,1.36,1.36,0,0,0,.86.3,1.19,1.19,0,0,0,1-.48l3.1-3.73a1.3,1.3,0,0,0,.3-.95,1.39,1.39,0,0,0-.48-.91A1.35,1.35,0,0,0,11.72,22Zm13-9.77a6.61,6.61,0,0,1,1,.08,5.3,5.3,0,0,1,3,1.49L38.8,23.61l1-1a6.66,6.66,0,0,0,1.92-3.74,9.45,9.45,0,0,1,2.63-5L47.17,11,38.8,2.63,36.11,5.31A8.43,8.43,0,0,1,33.59,7.1a1,1,0,0,1-.53.17,1,1,0,0,1-.55-.18l-.12,0-2.31-.62a9,9,0,0,0-2.19-.29,7.66,7.66,0,0,0-2.68.49,7.9,7.9,0,0,0-2.95,1.83l-6,5.48a.52.52,0,0,0-.26.51.53.53,0,0,0,.16.62.85.85,0,0,0,.6.27.81.81,0,0,0,.37-.09L22,12.83A6.48,6.48,0,0,1,24.71,12.22Z"
+    />
+    <path
+      fill={fill}
+      d="M49.44,10.48l-10-10A1,1,0,0,0,38,.46L34.46,4A5.93,5.93,0,0,1,32.8,5.11h0l-2.27-.62a10.48,10.48,0,0,0-6.2.31,10.26,10.26,0,0,0-3.62,2.27,9.51,9.51,0,0,0-1.44-.41,6.82,6.82,0,0,1-3.83-2L11.93,1.18A1,1,0,0,0,11.2.87a.92.92,0,0,0-.72.31l-10,10a1,1,0,0,0,0,1.45L4,16.16a6.84,6.84,0,0,1,2,3.83,10.77,10.77,0,0,0,1.14,3.2L5.83,24.64a3.62,3.62,0,0,0,2.79,5.89H9a3.71,3.71,0,0,0,3.62,3.31h.41a3.55,3.55,0,0,0,1.35,2.48,3.63,3.63,0,0,0,2.27.82h.41a3.35,3.35,0,0,0,1.35,2.38,3.53,3.53,0,0,0,4.55,0l.41.41a3.91,3.91,0,0,0,2.69,1.14,3.63,3.63,0,0,0,2.37-.93A3.69,3.69,0,0,0,29.6,38c.21,0,.41.1.62.1a3.61,3.61,0,0,0,2.48-1,2.75,2.75,0,0,0,.83-1.34,3.74,3.74,0,0,0,2.06.62,3.19,3.19,0,0,0,2.48-1,3.55,3.55,0,0,0,1-2.58h.1a3.66,3.66,0,0,0,2.38-.93,3.36,3.36,0,0,0,1.13-2.58,3.45,3.45,0,0,0-1-2.59l-1-1,1.13-1.14a9.2,9.2,0,0,0,2.59-5,6.78,6.78,0,0,1,2-3.82l3.51-3.52A2.23,2.23,0,0,0,49.44,10.48ZM7.69,28.15a1.47,1.47,0,0,1-.21-2.06l3.1-3.72a1.63,1.63,0,0,1,1.14-.52,1.43,1.43,0,0,1,.93.31,1.48,1.48,0,0,1,.21,2.07L9.76,28A1.46,1.46,0,0,1,7.69,28.15Zm3.93,3.21a1.48,1.48,0,0,1-.21-2.07l3.1-3.72h0l1.65-2a1.68,1.68,0,0,1,1.14-.52,1.43,1.43,0,0,1,.93.31,1.28,1.28,0,0,1,.52,1,2.14,2.14,0,0,1-.31,1.14l-.52.62h0l-4.13,5.06A1.72,1.72,0,0,1,11.62,31.36Zm3.92,3.3a1.26,1.26,0,0,1-.51-1,2.07,2.07,0,0,1,.31-1.14l4.13-5.06a1.68,1.68,0,0,1,1.14-.52,1.49,1.49,0,0,1,.93.31,1.28,1.28,0,0,1,.52,1,2.13,2.13,0,0,1-.31,1.13l-4.14,5.07A1.7,1.7,0,0,1,15.54,34.66Zm3.93,3.21a1.28,1.28,0,0,1-.52-1,2,2,0,0,1,.32-1.13L22.37,32a1.65,1.65,0,0,1,1.13-.52,1.41,1.41,0,0,1,.93.31,1.28,1.28,0,0,1,.52,1,2.05,2.05,0,0,1-.31,1.14l-3.1,3.72A1.47,1.47,0,0,1,19.47,37.87Zm7.24.62a1.62,1.62,0,0,1-2.17-.21l-.42-.41L26,35.49l.83.83a1.54,1.54,0,0,1,.41,1.13A1.65,1.65,0,0,1,26.71,38.49ZM39.93,30a1.61,1.61,0,0,1-2.17-.2L27.12,19.26a1,1,0,0,0-1.45,1.45L36.32,31.36h0l.1.1a1.53,1.53,0,0,1-2.17,2.17l-4-4L23.5,22.88a1,1,0,0,0-1.44,0h0a1,1,0,0,0,0,1.45l6.71,6.72,2.28,2.27a1.32,1.32,0,0,1,.41,1,1.62,1.62,0,0,1-.41,1,1.5,1.5,0,0,1-2.17,0L27,33.53a3.16,3.16,0,0,0-1.24-3.41,3.44,3.44,0,0,0-1.66-.73,2.92,2.92,0,0,0,.11-1.34,3.35,3.35,0,0,0-1.35-2.38,4,4,0,0,0-2.06-.82v-.62a3.35,3.35,0,0,0-1.35-2.38,3.53,3.53,0,0,0-4.55,0A3.81,3.81,0,0,0,14,20.5a3.63,3.63,0,0,0-2.27-.82A3.78,3.78,0,0,0,8.93,21l-.41.52A6.18,6.18,0,0,1,8,19.68a9.25,9.25,0,0,0-2.58-5L2.63,11.93,11.2,3.35,14,6.14a9.28,9.28,0,0,0,5,2.58h0l-4.13,3.83a2.73,2.73,0,0,0-.93,2.06,3.31,3.31,0,0,0,.83,2.17,3,3,0,0,0,3.61.62l4.86-2.48a3.5,3.5,0,0,1,2.28-.31,3.31,3.31,0,0,1,1.86.93L40.14,28a1.54,1.54,0,0,1,.41,1.13A1.81,1.81,0,0,1,39.93,30Zm4.55-16.12a9.25,9.25,0,0,0-2.58,5,6.85,6.85,0,0,1-2,3.83L38.8,23.81,28.57,13.89a5.19,5.19,0,0,0-2.9-1.45,6.22,6.22,0,0,0-3.61.52L17.2,15.44a.94.94,0,0,1-1.14-.21.63.63,0,0,1-.21-.72.63.63,0,0,1,.31-.62l6-5.48a8.35,8.35,0,0,1,3-1.86,8.1,8.1,0,0,1,5-.2L32.39,7h.21a.8.8,0,0,0,.93,0A8.62,8.62,0,0,0,36,5.21L38.8,2.42,47.37,11Z"
+    />
+  </svg>
+);

package/src/components/icons/InfinityLoop.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+// from ondmarc.com
+
+export const InfinityLoop = ({
+  titleTag = "Unlimited",
+  width = 34,
+  fill = "#333"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-7 -13 34 34"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <path
+      fill={fill}
+      d="M13.349,8.436a14.345,14.345,0,0,1-2.1-1.573c-.465-.409-.89-.819-1.245-1.176-.354.357-.779.767-1.245,1.176a14.345,14.345,0,0,1-2.1,1.573,4.288,4.288,0,0,1-2.076.715A4.577,4.577,0,0,1,2.794.359,4.546,4.546,0,0,1,4.575,0,4.286,4.286,0,0,1,6.651.715a14.357,14.357,0,0,1,2.1,1.573c.465.409.89.819,1.245,1.177.354-.358.779-.767,1.245-1.177a14.356,14.356,0,0,1,2.1-1.573A4.286,4.286,0,0,1,15.425,0,4.574,4.574,0,0,1,18.66,7.81a4.56,4.56,0,0,1-3.235,1.34A4.288,4.288,0,0,1,13.349,8.436Zm.579-6.4a9.439,9.439,0,0,0-1.382,1.033,17.407,17.407,0,0,0-1.5,1.5,17.439,17.439,0,0,0,1.5,1.5A9.421,9.421,0,0,0,13.928,7.11a2.817,2.817,0,0,0,1.363.469,3,3,0,1,0,0-6.009A2.815,2.815,0,0,0,13.928,2.04Zm-11.534.41A3,3,0,0,0,4.518,7.58,2.817,2.817,0,0,0,5.882,7.11,9.42,9.42,0,0,0,7.263,6.078a17.433,17.433,0,0,0,1.5-1.5,17.539,17.539,0,0,0-1.5-1.5A9.439,9.439,0,0,0,5.882,2.04a2.815,2.815,0,0,0-1.363-.47A2.985,2.985,0,0,0,2.394,2.451Z"
+    />
+  </svg>
+);

package/src/components/icons/InfinityLoopBreak.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export const InfinityLoopBreak = ({
+  titleTag = "Infinity",
+  width = 50,
+  stroke = "#02ac61"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 60 33"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g
+      transform="translate(2, 2)"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      stroke={stroke}
+      strokeWidth="4"
+    >
+      <path
+        d="M28,14.5 C28,14.5 18.1522822,29 11.6998496,29 C5.25089314,29 0,22.5138739 0,14.5 C0,6.48612611 
+      5.23428556,0 11.7031325,0 C14.2919845,0 17.4949308,2.3285202 20.2398168,5.10559968"
+      />
+      <path
+        d="M28,14.5 C28,14.5 37.8477178,0 44.3001504,0 C50.7491069,0 56,6.48612611 56,14.5 C56,22.5138739 
+      50.7657144,29 44.2968675,29 C41.7080155,29 38.5050692,26.6714798 35.7601832,23.8944003"
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/IngrainIcon.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export const IngrainIcon = ({
+  titleTag = "InGrain",
+  width = 45,
+  height = 45,
+  fill = "#53c3eb",
+  bgFill = "#fff",
+  ...restProps
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0"
+    y="0"
+    viewBox="0 0 498.9 498.9"
+    style={{
+      width,
+      height,
+    }}
+    {...restProps}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <circle cx="248.5" cy="247.5" r="231.5" fill={bgFill} />
+    <path
+      fill={fill}
+      d="M250.1 2.3h-.2C113.6 2.3 3 112.9 3 249.3s110.6 246.9 246.9 246.9h.2c136.3-.1 246.8-110.6 246.8-246.9S386.4 2.5 250.1 2.3zM141.5 151l35.9-14.5v91.8L250 196l.2.1v-22.262l.015.005L321.3 200.6v23.061L250.1 196.1v71.6l-.6-.3-108 44.2V151zm108.6 296.6v-75l-108.7-45.9 108.7-39.9v-19l107.6 43.9V151l-107.6-43.8v66.55l-.1-.05-59 26.9-.7-69.3 59.6-24.1.2.1V51c109.4.1 198.1 88.9 198.1 198.3s-88.6 198.2-198.1 198.3z"
+    />
+    <path
+      fill={fill}
+      d="M357.575 326.753l.125-.053-107.6-39.9v85.8l107.6-45.8z"
+    />
+  </svg>
+);

package/src/components/icons/LanguageIcon.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { IconContainer, IconContainerPropTypes } from '../IconContainer';
+
+export const LanguageIcon = (props) => (
+  <IconContainer {...props}>
+    <svg
+      width="38"
+      height="37"
+      viewBox="0 0 38 37"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <ellipse
+        cx="18.7498"
+        cy="18.3406"
+        rx="16.9583"
+        ry="16.8123"
+        className="stroke"
+        strokeWidth="1.41176"
+      />
+      <ellipse
+        cx="18.7497"
+        cy="18.3406"
+        rx="6.16666"
+        ry="16.8123"
+        className="stroke"
+        strokeWidth="1.41176"
+      />
+      <path
+        d="M33.8992 11.0176L3.61921 11.0176C2.78994 11.0176 2.11768 11.8383 2.11768 12.8507C2.11768 13.8631 2.78994 14.6838 3.61921 14.6838L33.8992 14.6838C34.7285 14.6838 35.4007 13.8631 35.4007 12.8507C35.4007 11.8383 34.7285 11.0176 33.8992 11.0176Z"
+        className="fill"
+      />
+      <path
+        d="M34.0102 22.0166L3.50823 22.0166C2.7092 22.1517 2.11768 22.9315 2.11768 23.8497C2.11768 24.768 2.7092 25.5478 3.50823 25.6829L34.0102 25.6829C34.8092 25.5478 35.4007 24.768 35.4007 23.8497C35.4007 22.9315 34.8092 22.1517 34.0102 22.0166Z"
+        className="fill"
+      />
+    </svg>
+  </IconContainer>
+);
+
+LanguageIcon.propTypes = {
+  ...IconContainerPropTypes,
+};

package/src/components/icons/Linkedin.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export const Linkedin = ({
+  titleTag = "Linkedin",
+  width = 30,
+  fill = "#0077b7",
+  bgFill = false
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 35 35"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+
+    {bgFill && (
+      <path
+        transform="translate(5.9, 4.9), scale(0.965)"
+        fill={fill}
+        d="M21.875,25 L3.125,25 C1.4,25 0,23.6 0,21.875 L0,3.125 C0,1.4 1.4,0 3.125,0 L21.875,0 C23.6,0 25,1.4 25,3.125 L25,21.875 C25,23.6 23.6,25 21.875,25 Z"
+      ></path>
+    )}
+    <path
+      fill={bgFill ? bgFill : fill}
+      d="M27.8,5H8.2C7,5,6,6,6,7.2v19.7C6,28,7,29,8.2,29h19.7c1.2,0,2.2-1,2.2-2.2V7.2C30,6,29,5,27.8,5z
+      M13.4,25.7c0,0.3-0.3,0.6-0.6,0.6h-2.7c-0.3,0-0.6-0.3-0.6-0.6V14.4c0-0.3,0.3-0.6,0.6-0.6h2.7c0.3,0,0.6,0.3,0.6,0.6V25.7z
+      M11.5,12.8c-1.4,0-2.6-1.1-2.6-2.6s1.1-2.6,2.6-2.6S14,8.8,14,10.2S12.9,12.8,11.5,12.8z M27.5,25.8c0,0.3-0.3,0.6-0.6,0.6H24
+      c-0.3,0-0.6-0.3-0.6-0.6v-5.3c0-0.8,0.2-3.5-2.1-3.5c-1.8,0-2.1,1.8-2.2,2.6v6.1c0,0.3-0.3,0.6-0.6,0.6h-2.8
+      c-0.3,0-0.6-0.3-0.6-0.6V14.4c0-0.3,0.3-0.6,0.6-0.6h2.8c0.3,0,0.6,0.3,0.6,0.6v1c0.7-1,1.6-1.8,3.7-1.8c4.6,0,4.6,4.3,4.6,6.7
+      V25.8L27.5,25.8z"
+    />
+  </svg>
+);

package/src/components/icons/LocationPin.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const LocationPin = ({
+  titleTag = "Location Marker",
+  width = 30,
+  fill = "#02ac61"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    viewBox="0 0 28 37"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g transform="translate(1, 1)">
+      <path
+        fill={fill}
+        stroke={fill}
+        d="M13,0.1C6,0.1,0.3,5.8,0.3,12.7c0,5.1,3.1,10.5,6.1,14.7s6,7.2,6,7.2c0.3,0.3,0.8,0.3,1.1,0
+        c0,0,3-3,6-7.2s6.1-9.6,6.1-14.7C25.7,5.8,20,0.1,13,0.1L13,0.1z M13,1.6c6.1,0,11.1,5,11.1,11.1c0,4.4-2.9,9.7-5.8,13.8
+        c-2.7,3.7-4.8,5.9-5.3,6.4c-0.5-0.5-2.6-2.7-5.3-6.4c-2.9-4.1-5.8-9.4-5.8-13.8C1.9,6.6,6.9,1.6,13,1.6z"
+      />
+      <path
+        fill={fill}
+        stroke={fill}
+        d="M13,7.2c-3.1,0-5.5,2.5-5.5,5.5s2.5,5.5,5.5,5.5s5.5-2.5,5.5-5.5S16.1,7.2,13,7.2z M13,8.8
+        c2.2,0,4,1.8,4,4s-1.8,4-4,4s-4-1.8-4-4S10.8,8.8,13,8.8z"
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/MicrosoftShield.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export const MicrosoftShield = ({
+  titleTag = "Microsoft",
+  width = 40,
+  stroke = "#0278D8",
+  fill = "#0278D8",
+  bgFill = "#ffffff"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 71 85"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      transform="translate(2, 2.181818)"
+    >
+      <path
+        d="M31.8783636,80.0633077 L30.6056364,79.4325385 C18.3026061,73.7556154 10.0298788,62.8222821 5.15109091,48.3145897 C2.81775758,41.5863846 1.5450303,34.4376667 0.696545455,27.0786923 C0.27230303,22.2427949 0.0601818182,18.2479231 0.0601818182,14.6735641 L0.0601818182,14.0427949 L0.0601818182,9.20689744 L33.3632121,0.165871795 L67.0904848,9.20689744 L67.0904848,14.2530513 L67.0904848,14.6735641 C67.0904848,18.2479231 66.8783636,22.0325385 66.4541212,26.8684359 C65.6056364,34.2274103 64.1207879,41.5863846 61.7874545,48.3145897 C56.9086667,62.6120256 48.6359394,73.3351026 36.3329091,79.2222821 L33.3632121,80.6940769 L31.8783636,80.0633077 Z"
+        fill={bgFill}
+      />
+      <path
+        d="M31.8783636,80.0633077 L30.6056364,79.4325385 C18.3026061,73.7556154 10.0298788,62.8222821 5.15109091,48.3145897 C2.81775758,41.5863846 1.5450303,34.4376667 0.696545455,27.0786923 C0.27230303,22.2427949 0.0601818182,18.2479231 0.0601818182,14.6735641 L0.0601818182,14.0427949 L0.0601818182,9.20689744 L33.3632121,0.165871795 L67.0904848,9.20689744 L67.0904848,14.2530513 L67.0904848,14.6735641 C67.0904848,18.2479231 66.8783636,22.0325385 66.4541212,26.8684359 C65.6056364,34.2274103 64.1207879,41.5863846 61.7874545,48.3145897 C56.9086667,62.6120256 48.6359394,73.3351026 36.3329091,79.2222821 L33.3632121,80.6940769 L31.8783636,80.0633077 Z"
+        stroke={stroke}
+        strokeWidth="3"
+      />
+      <path
+        d="M32.3579697,69.8915231 L31.4458485,69.414241 C22.6173636,65.1271128 16.6822121,56.868241 13.1800909,45.9075744 C11.5064545,40.8256769 10.5943333,35.4241897 9.98554545,29.8650103 C9.68221212,26.2128564 9.52948485,23.1956769 9.52948485,20.4938821 L9.52948485,20.0187026 L9.52948485,16.3644462 L33.4228182,9.53321538 L57.6237273,16.3644462 L57.6237273,20.1763949 L57.6237273,20.4938821 C57.6237273,23.1956769 57.471,26.0530615 57.1655455,29.7073179 C56.5567576,35.2664974 55.4919091,40.8256769 53.8182727,45.9075744 C50.3161515,56.7084462 44.381,64.8096256 35.5546364,69.2565487 L33.4228182,70.3688051 L32.3579697,69.8915231 Z"
+        fill={fill}
+      />
+      <polygon
+        fill={bgFill}
+        points="33.2030606 22.5190718 24.1454848 41.1709179 31.0542727 41.1709179 26.3663939 56.2967641 45.0797273 33.9423026 35.2118485 33.9423026 42.8588182 22.5190718"
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/News.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+export const News = ({ titleTag = "News", width = 60, fill = "#02ac61" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 57 57"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g fill={fill} fillRule="nonzero">
+      <path
+        d="M55.8125,23.75 L45.125,23.75 L45.125,3.5625 C45.125,1.54375 43.58125,0 41.5625,0 L3.5625,
+      0 C1.54375,0 0,1.54375 0,3.5625 L0,49.6375 C0,53.675 3.325,57 7.3625,57 L49.875,57 C53.79375,57 57,
+      53.79375 57,49.875 L57,24.9375 C57,24.225 56.525,23.75 55.8125,23.75 Z M7.3625,54.625 C4.63125,
+      54.625 2.375,52.36875 2.375,49.6375 L2.375,3.5625 C2.375,2.85 2.85,2.375 3.5625,2.375 L41.5625,
+      2.375 C42.275,2.375 42.75,2.85 42.75,3.5625 L42.75,24.9375 C42.75,50.23125 42.0375,51.775 44.53125,
+      54.625 L7.3625,54.625 Z M54.625,49.875 C54.625,52.4875 52.4875,54.625 49.875,54.625 C47.2625,
+      54.625 45.125,52.4875 45.125,49.875 L45.125,26.125 L54.625,26.125 L54.625,49.875 Z"
+      />
+      <path
+        d="M8.2,21 L17.8,21 C18.52,21 19,20.5333333 19,19.8333333 L19,8.16666667 C19,7.46666667 18.52,
+      7 17.8,7 L8.2,7 C7.48,7 7,7.46666667 7,8.16666667 L7,19.8333333 C7,20.5333333 7.48,21 8.2,21 Z M9.4,
+      9.33333333 L16.6,9.33333333 L16.6,18.6666667 L9.4,18.6666667 L9.4,9.33333333 Z"
+      />
+      <path
+        d="M36.8333333,13 L25.1666667,13 C24.4666667,13 24,13.4 24,14 C24,14.6 24.4666667,15 25.1666667,
+      15 L36.8333333,15 C37.5333333,15 38,14.6 38,14 C38,13.4 37.5333333,13 36.8333333,13 Z"
+      />
+      <path
+        d="M19.8333333,26 L8.16666667,26 C7.46666667,26 7,26.4 7,27 C7,27.6 7.46666667,28 8.16666667,
+      28 L19.8333333,28 C20.5333333,28 21,27.6 21,27 C21,26.4 20.5333333,26 19.8333333,26 Z"
+      />
+      <path
+        d="M36.8333333,26 L25.1666667,26 C24.4666667,26 24,26.4 24,27 C24,27.6 24.4666667,28 25.1666667,
+      28 L36.8333333,28 C37.5333333,28 38,27.6 38,27 C38,26.4 37.5333333,26 36.8333333,26 Z"
+      />
+      <path
+        d="M19.8333333,33 L8.16666667,33 C7.46666667,33 7,33.4 7,34 C7,34.6 7.46666667,35 8.16666667,
+      35 L19.8333333,35 C20.5333333,35 21,34.6 21,34 C21,33.4 20.5333333,33 19.8333333,33 Z"
+      />
+      <path
+        d="M36.8333333,33 L25.1666667,33 C24.4666667,33 24,33.4 24,34 C24,34.6 24.4666667,35 25.1666667,
+      35 L36.8333333,35 C37.5333333,35 38,34.6 38,34 C38,33.4 37.5333333,33 36.8333333,33 Z"
+      />
+      <path
+        d="M19.8333333,40 L8.16666667,40 C7.46666667,40 7,40.4 7,41 C7,41.6 7.46666667,42 8.16666667,
+      42 L19.8333333,42 C20.5333333,42 21,41.6 21,41 C21,40.4 20.5333333,40 19.8333333,40 Z"
+      />
+      <path
+        d="M36.8333333,40 L25.1666667,40 C24.4666667,40 24,40.4 24,41 C24,41.6 24.4666667,42 25.1666667,
+      42 L36.8333333,42 C37.5333333,42 38,41.6 38,41 C38,40.4 37.5333333,40 36.8333333,40 Z"
+      />
+      <path
+        d="M19.8333333,47 L8.16666667,47 C7.46666667,47 7,47.4 7,48 C7,48.6 7.46666667,49 8.16666667,
+      49 L19.8333333,49 C20.5333333,49 21,48.6 21,48 C21,47.4 20.5333333,47 19.8333333,47 Z"
+      />
+      <path
+        d="M36.8333333,47 L25.1666667,47 C24.4666667,47 24,47.4 24,48 C24,48.6 24.4666667,49 25.1666667,
+      49 L36.8333333,49 C37.5333333,49 38,48.6 38,48 C38,47.4 37.5333333,47 36.8333333,47 Z"
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/Nodes.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const Nodes = ({ titleTag = "Nodes", width = 50, fill = "#02ac61" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 53 53"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <g stroke="none" fill={fill} fillRule="nonzero">
+      <path d="M26.5,53 C22.0833333,53 18.5611814,49.4219409 18.5611814,45.0611814 C18.5611814,41.2035865 21.3565401,37.9050633 25.1023207,37.2341772 L25.1023207,34.3270042 C21.8597046,33.7679325 19.2320675,31.1402954 18.6729958,27.8976793 L15.7658228,27.8976793 C15.0949367,31.6434599 11.7964135,34.4388186 7.93881857,34.4388186 C3.5221519,34.4388186 0,30.9166667 0,26.5 C0,22.0833333 3.57805907,18.5611814 7.93881857,18.5611814 C11.7964135,18.5611814 15.0949367,21.3565401 15.7658228,25.1023207 L18.6729958,25.1023207 C19.2320675,21.8597046 21.8597046,19.2320675 25.1023207,18.6729958 L25.1023207,15.7658228 C21.3565401,15.0949367 18.5611814,11.7964135 18.5611814,7.93881857 C18.5611814,3.5221519 22.1392405,0 26.5,0 C30.9166667,0 34.4388186,3.57805907 34.4388186,7.93881857 C34.4388186,11.7964135 31.6434599,15.0949367 27.8976793,15.7658228 L27.8976793,18.6729958 C31.1402954,19.2320675 33.7679325,21.8597046 34.3270042,25.1023207 L37.2341772,25.1023207 C37.9050633,21.3565401 41.2035865,18.5611814 45.0611814,18.5611814 C49.4778481,18.5611814 53,22.1392405 53,26.5 C53,30.9166667 49.4219409,34.4388186 45.0611814,34.4388186 C41.2035865,34.4388186 37.9050633,31.6434599 37.2341772,27.8976793 L34.3270042,27.8976793 C33.7679325,31.1402954 31.1402954,33.7679325 27.8976793,34.3270042 L27.8976793,37.2341772 C31.6434599,37.9050633 34.4388186,41.2035865 34.4388186,45.0611814 C34.4388186,49.4778481 30.9166667,53 26.5,53 Z M26.5,39.9177215 C23.6487342,39.9177215 21.3565401,42.2099156 21.3565401,45.0611814 C21.3565401,47.9124473 23.6487342,50.2046414 26.5,50.2046414 C29.3512658,50.2046414 31.6434599,47.9124473 31.6434599,45.0611814 C31.6434599,42.2099156 29.3512658,39.9177215 26.5,39.9177215 Z M45.0611814,21.3565401 C42.2099156,21.3565401 39.9177215,23.6487342 39.9177215,26.5 C39.9177215,29.3512658 42.2099156,31.6434599 45.0611814,31.6434599 C47.9124473,31.6434599 50.2046414,29.3512658 50.2046414,26.5 C50.2046414,23.6487342 47.9124473,21.3565401 45.0611814,21.3565401 Z M26.5,21.3565401 C23.6487342,21.3565401 21.3565401,23.6487342 21.3565401,26.5 C21.3565401,29.3512658 23.6487342,31.6434599 26.5,31.6434599 C29.3512658,31.6434599 31.6434599,29.3512658 31.6434599,26.5 C31.6434599,23.6487342 29.3512658,21.3565401 26.5,21.3565401 Z M7.93881857,21.3565401 C5.08755274,21.3565401 2.79535865,23.6487342 2.79535865,26.5 C2.79535865,29.3512658 5.08755274,31.6434599 7.93881857,31.6434599 C10.7900844,31.6434599 13.0822785,29.3512658 13.0822785,26.5 C13.0822785,23.6487342 10.7900844,21.3565401 7.93881857,21.3565401 Z M26.5,2.79535865 C23.6487342,2.79535865 21.3565401,5.08755274 21.3565401,7.93881857 C21.3565401,10.7900844 23.6487342,13.0822785 26.5,13.0822785 C29.3512658,13.0822785 31.6434599,10.7900844 31.6434599,7.93881857 C31.6434599,5.08755274 29.3512658,2.79535865 26.5,2.79535865 Z"></path>
+      <path d="M45.2590618,18.7590618 C41.3603412,18.7590618 38.1396588,21.6407249 37.6311301,25.369936 L34.184435,25.369936 C33.6759062,21.9797441 31.0202559,19.3240938 27.630064,18.815565 L27.630064,15.3688699 C31.3592751,14.803838 34.2409382,11.5831557 34.2409382,7.74093817 C34.2409382,3.50319829 30.7942431,0 26.5,0 C22.2057569,0 18.7590618,3.50319829 18.7590618,7.74093817 C18.7590618,11.6396588 21.6407249,14.8603412 25.369936,15.3688699 L25.369936,18.815565 C21.9797441,19.3240938 19.3240938,21.9797441 18.815565,25.369936 L15.3688699,25.369936 C14.803838,21.6407249 11.5831557,18.7590618 7.74093817,18.7590618 C3.50319829,18.7590618 0,22.2622601 0,26.5 C0,30.7377399 3.4466951,34.2409382 7.74093817,34.2409382 C11.6396588,34.2409382 14.8603412,31.3592751 15.3688699,27.630064 L18.815565,27.630064 C19.3240938,31.0202559 21.9797441,33.6759062 25.369936,34.184435 L25.369936,37.6311301 C21.6407249,38.196162 18.7590618,41.4168443 18.7590618,45.2590618 C18.7590618,49.4968017 22.2057569,53 26.5,53 C30.7942431,53 34.2409382,49.5533049 34.2409382,45.2590618 C34.2409382,41.3603412 31.3592751,38.1396588 27.630064,37.6311301 L27.630064,34.184435 C31.0202559,33.6759062 33.6759062,31.0202559 34.184435,27.630064 L37.6311301,27.630064 C38.196162,31.3592751 41.4168443,34.2409382 45.2590618,34.2409382 C49.4968017,34.2409382 53,30.7942431 53,26.5 C53,22.2057569 49.4968017,18.7590618 45.2590618,18.7590618 Z M20.9626866,7.74093817 C20.9626866,4.68976546 23.4488273,2.20362473 26.5,2.20362473 C29.5511727,2.20362473 32.0373134,4.68976546 32.0373134,7.74093817 C32.0373134,10.7921109 29.5511727,13.2782516 26.5,13.2782516 C23.4488273,13.2782516 20.9626866,10.7921109 20.9626866,7.74093817 Z M7.74093817,32.0373134 C4.68976546,32.0373134 2.20362473,29.5511727 2.20362473,26.5 C2.20362473,23.4488273 4.68976546,20.9626866 7.74093817,20.9626866 C10.7921109,20.9626866 13.2782516,23.4488273 13.2782516,26.5 C13.2782516,29.5511727 10.7921109,32.0373134 7.74093817,32.0373134 Z M32.0373134,45.2590618 C32.0373134,48.3102345 29.5511727,50.7963753 26.5,50.7963753 C23.4488273,50.7963753 20.9626866,48.3102345 20.9626866,45.2590618 C20.9626866,42.2078891 23.4488273,39.7217484 26.5,39.7217484 C29.5511727,39.7217484 32.0373134,42.2078891 32.0373134,45.2590618 Z M26.5,32.0373134 C23.4488273,32.0373134 20.9626866,29.5511727 20.9626866,26.5 C20.9626866,23.4488273 23.4488273,20.9626866 26.5,20.9626866 C29.5511727,20.9626866 32.0373134,23.4488273 32.0373134,26.5 C32.0373134,29.5511727 29.5511727,32.0373134 26.5,32.0373134 Z M45.2590618,32.0373134 C42.2078891,32.0373134 39.7217484,29.5511727 39.7217484,26.5 C39.7217484,23.4488273 42.2078891,20.9626866 45.2590618,20.9626866 C48.3102345,20.9626866 50.7963753,23.4488273 50.7963753,26.5 C50.7963753,29.5511727 48.3102345,32.0373134 45.2590618,32.0373134 Z"></path>
+    </g>
+  </svg>
+);

package/src/components/icons/OnDmarcIcon.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const OnDmarcIcon = ({
+  titleTag = "OnDMARC",
+  width = 45,
+  fill = "#02ac61",
+  bgFill = "#ffffff"
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <circle cx="10" cy="10" r="10" fillRule="evenodd" fill={bgFill} />
+    <g transform="translate(-4.3 -4.3) scale(1.4285714285714286)">
+      <path
+        fill={fill}
+        d="M10,17a7,7,0,1,1,7-7A7,7,0,0,1,10,17Zm0-3.5v2.1A5.6,5.6,0,0,0,10,4.4V6.5h0L7.2,7.27v.29c0,1.09.24,4.74,2.78,5.94h0Z"
+      />
+      <path
+        fill={fill}
+        d="M10,13.51h0v-7h0l2.81.76a10.64,10.64,0,0,1-.29,2.58,6.72,6.72,0,0,1-.83,2.08A4.17,4.17,0,0,1,10,13.51Z"
+      />
+    </g>
+  </svg>
+);

package/src/components/icons/OnDmarcLogo.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const RedPolygon = styled.polygon`
+  fill: #e01010;
+`;
+
+const RedPath = styled.path`
+  fill: #e01010;
+`;
+
+const ByText = styled.text`
+  fill: #333;
+  font-size: 14.94px;
+  font-family: Electrolize, sans-serif;
+`;
+
+const GreenPath = styled.path`
+  fill: #02ac61;
+`;
+
+const BlackPath = styled.path`
+  fill: #333;
+`;
+
+export const OnDmarcLogo = ({ titleTag, width = 250 }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 229.78 61.14"
+    style={{
+      width
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <RedPolygon points="135.87 48.45 133.63 48.45 138.87 57.02 141.01 57.02 139.72 54.88 135.87 48.45" />
+    <RedPolygon
+      points="135.87 48.45 139.72 42.02 141.01 39.88 141.01 39.88 141.01 39.88 138.44 39.88 
+    138.44 39.88 138.44 39.88 138.44 39.88 131.01 39.88 129.01 39.88 129.01 42.45 129.01 57.02 131.01 
+    57.02 131.01 41.55 137.91 41.55 133.63 48.45 135.87 48.45"
+    />
+
+    <RedPath d="M155.3,55.36,156.39,57h-11V39.88h11l-1.09,1.67-7.81,0v5.89H155l-1.15,1.69-6.4,0v6.12Z" />
+    <RedPath d="M160.68,57V39.88h9.07l4.12,3.43V53.59L169.75,57Zm11.12-4.16V44.05l-3-2.46h-6.12V55.31h6.12Z" />
+    <RedPath
+      d="M190.75,49.19H184.9l-2.36-2V42.09l2.36-2.21h6.52l2.36,2.21v1h-2.07v-.48l-1.19-1H185.8l-1.19,
+    1v3.86l1.19,1h5.86L194,49.67v5.14L191.66,57h-7l-2.36-2.21v-1h2v.48l1.19,1h5.19l1.19-1V50.19Z"
+    />
+    <RedPath d="M198.28,39.88h2.05V57h-2.05Z" />
+    <RedPath d="M207.3,57h-2V39.88h10l-1.12,1.67-6.81,0v5.89l3.71,0-1.19,1.67-2.52,0V57Z" />
+    <RedPath d="M216.69,39.88h12.93l-1,1.67-4.48,0V57h-2V41.59h-5.43Z" />
+    <ByText transform="translate(107.92 57.04)">by</ByText>
+    <GreenPath d="M42.6,11.64V32.4H36.28V0h4.9l17,21.27V.05h6.32V32.4H59.32Z" />
+    <BlackPath
+      d="M70,32.39V.2H81.76A17.58,17.58,0,0,1,88.7,1.47a13.88,13.88,0,0,1,8,8.54,19.19,19.19,0,0,1,
+    1,6.24,18.8,18.8,0,0,1-1.12,6.64,14,14,0,0,1-8.24,8.34,17.75,17.75,0,0,1-6.57,1.16ZM91.36,16.25A13.73,
+    13.73,0,0,0,90.72,12a9.45,9.45,0,0,0-1.86-3.35,8.31,8.31,0,0,0-3-2.18,10.3,10.3,0,0,0-4.07-.77H76.3V26.9h5.46a9.9,
+    9.9,0,0,0,4.12-.81,8.51,8.51,0,0,0,3-2.25,9.85,9.85,0,0,0,1.84-3.38,13.36,13.36,0,0,0,.64-4.21ZM129,32.39V11.08L120.62,
+    27h-3.41l-8.33-15.87V32.39H102.6V.2h6.73l9.56,18.31L128.54.2h6.68V32.39ZM151.15.2h5.55L169,32.39h-6.46l-3-8H148.24l-3,
+    8h-6.46ZM158.39,20,153.93,7.31,149.29,20Zm14.15,12.43V.2h14.28a9,9,0,0,1,4.12.93,10.69,10.69,0,0,1,3.26,2.44A11.5,11.5,
+    0,0,1,196.33,7a10.33,10.33,0,0,1,.78,3.88,10.68,10.68,0,0,1-1.57,5.69,9,9,0,0,1-4.26,3.69l7.38,12.11H191.6L185,21.6h-6.18V32.39Zm6.28-16.28h7.87a3.35,
+    3.35,0,0,0,1.61-.41,4,4,0,0,0,1.3-1.11,5.8,5.8,0,0,0,.87-1.65,6.43,6.43,0,0,0,.31-2,5.71,5.71,0,0,0-.36-2.09,5.51,5.51,0,0,0-1-1.65A4.28,4.28,0,0,0,188,
+    6.07a3.75,3.75,0,0,0-1.62-.39h-7.59Zm22-.05a16.53,16.53,0,0,1,1.07-5.82A15.64,15.64,0,0,1,210,1.42,15.48,15.48,0,0,1,216.77,0a14.76,14.76,0,0,1,7.71,
+    2A12.46,12.46,0,0,1,229.32,7l-4.82,3.31A8.05,8.05,0,0,0,223,8.06,7.75,7.75,0,0,0,221,6.59a8.57,8.57,0,0,0-2.19-.79,9.84,9.84,0,0,0-2.23-.25,8.4,8.4,0,0,
+    0-4.11,1A9.15,9.15,0,0,0,209.55,9a11,11,0,0,0-1.75,3.45,12.71,12.71,0,0,0,.09,7.93,11,11,0,0,0,1.94,3.47,9.7,9.7,0,0,0,3,2.4,8.29,8.29,0,0,0,3.84.91,10.93,
+    10.93,0,0,0,2.28-.27A8.51,8.51,0,0,0,221.2,26a8.63,8.63,0,0,0,2-1.52,7,7,0,0,0,1.46-2.25l5.14,2.95a9.67,9.67,0,0,1-2.21,3.2,14.28,14.28,0,0,1-3.23,2.33,17.23,
+    17.23,0,0,1-7.85,1.95,13.72,13.72,0,0,1-6.32-1.45,16.46,16.46,0,0,1-4.94-3.79,17.47,17.47,0,0,1-3.23-5.3,16.51,16.51,0,0,1-1.16-6.05Z"
+    />
+    <GreenPath
+      d="M16.33,33A16.33,16.33,0,1,1,32.65,16.69,16.34,16.34,0,0,1,16.33,33Zm0-8.16v4.9a13.06,
+    13.06,0,0,0,0-26.12v4.9h0L9.8,10.31s0,.1,0,.29V11c0,2.54.57,11.06,6.49,13.85h0Z"
+    />
+    <GreenPath d="M16.35,24.86h0l0,0V8.52h0l6.55,1.79a25.34,25.34,0,0,1-.66,6,16.71,16.71,0,0,1-1.94,4.85A9.5,9.5,0,0,1,16.35,24.86Z" />
+  </svg>
+);

package/src/components/icons/OnDomainIcon.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export const OnDomainIcon = ({
+  titleTag = "OnDOMAIN",
+  width = 45,
+  fill = "#028062",
+  bgFill = "#ffffff",
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1000 1000"
+    style={{
+      width,
+    }}
+  >
+    {titleTag && <title>{titleTag}</title>}
+    <circle cx="500" cy="500" r="500" fillRule="evenodd" fill={bgFill} />
+    <path
+      fill={fill}
+      d="M500.1 1C224.5 1 1.2 224.4 1.2 499.9s223.4 498.9 498.9 498.9S999 775.4 999 499.9 775.6 1 500.1 1zM240.5 712.2c-37 0-66.9-30-66.9-66.9 0-37 30-66.9 66.9-66.9 37 0 66.9 30 66.9 66.9 0 36.9-30 66.9-66.9 66.9zm260.8 186.9h-1.2V704.2h-90.7c-27.1 0-49.1-22-49.1-49.1V336.8c0-27.1 22-49.1 49.1-49.1h90.7V100.8h1.2c220.4 0 399.1 178.7 399.1 399.1S721.8 899.1 501.3 899.1z"
+    />
+    <path
+      fill={fill}
+      d="M776.8 336.8v318.3c0 27.1-22 49.1-49.1 49.1H500.1V287.7h227.5c27.2 0 49.2 22 49.2 49.1z"
+    />
+  </svg>
+);