default tooltip trigger icon

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;

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 <i ref={ref}>Info</i>
+  return <Info className={styles.icon} ref={ref} />
 })
 
 export default function Tooltip({
@@ -49,7 +50,7 @@ export default function Tooltip({
   return (
     <Tippy
       interactive
-      interactiveBorder={30}
+      interactiveBorder={5}
       zIndex={1}
       trigger={trigger || 'mouseenter focus'}
       disabled={disabled || null}

src/images/info.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.53846C5.32682 1.53846 1.53846 5.32682 1.53846 10C1.53846 14.6732 5.32682 18.4615 10 18.4615C14.6732 18.4615 18.4615 14.6732 18.4615 10C18.4615 5.32682 14.6732 1.53846 10 1.53846ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM10 8.46154C10.4248 8.46154 10.7692 8.80593 10.7692 9.23077V15.3846C10.7692 15.8094 10.4248 16.1538 10 16.1538C9.57517 16.1538 9.23077 15.8094 9.23077 15.3846V9.23077C9.23077 8.80593 9.57517 8.46154 10 8.46154ZM10 4.61538C9.36275 4.61538 8.84615 5.13198 8.84615 5.76923C8.84615 6.40648 9.36275 6.92308 10 6.92308C10.6373 6.92308 11.1538 6.40648 11.1538 5.76923C11.1538 5.13198 10.6373 4.61538 10 4.61538Z"/>
+</svg>