diff --git a/src/components/atoms/Tooltip.module.css b/src/components/atoms/Tooltip.module.css
index 93a8edec4..57732f1d8 100644
--- a/src/components/atoms/Tooltip.module.css
+++ b/src/components/atoms/Tooltip.module.css
@@ -10,6 +10,16 @@
font-size: var(--font-size-small);
}
+.icon {
+ width: 15px;
+ height: 15px;
+ cursor: help;
+ display: inline-block;
+ margin-bottom: -0.1rem;
+ margin-left: calc(var(--spacer) / 6);
+ fill: var(--brand-grey-light);
+}
+
.arrow,
.arrow::before {
position: absolute;
diff --git a/src/components/atoms/Tooltip.tsx b/src/components/atoms/Tooltip.tsx
index 160bd117c..7913e4714 100644
--- a/src/components/atoms/Tooltip.tsx
+++ b/src/components/atoms/Tooltip.tsx
@@ -2,6 +2,7 @@ import React, { ReactElement, ReactNode } from 'react'
import loadable from '@loadable/component'
import { useSpring, animated } from 'react-spring'
import styles from './Tooltip.module.css'
+import { ReactComponent as Info } from '../../images/info.svg'
const Tippy = loadable(() => import('@tippyjs/react/headless'))
@@ -14,7 +15,7 @@ const animation = {
// Forward ref for Tippy.js
// eslint-disable-next-line
const DefaultTrigger = React.forwardRef((props, ref: any) => {
- return Info
+ return
})
export default function Tooltip({
@@ -49,7 +50,7 @@ export default function Tooltip({
return (
+
+