use heroicons

src/components/Text.tsx

 import React from "react"
-import Button from "./core/Button"
 import { twMerge } from "tailwind-merge"
+import { InformationCircleIcon } from "@heroicons/react/outline"
+import { Button } from "@onegeo-suite/gatsby-theme-onegeo"
 
 interface IText {
     title?: string
@@ -29,30 +30,15 @@ const Text = (props: IText) => {
                         oClass.title
                     )}
                 >
-                    {title}{" "}
+                    {title}
                     {oTooltip.title ? (
-                        <div
-                            className="tooltip tooltip-base-100 "
+                        <span
+                            className="tooltip tooltip-info text-info ml-2 font-normal"
                             data-tip={oTooltip.title}
                         >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                                strokeWidth={2}
-                                className="text-secondary h-5 w-5 cursor-pointer"
-                            >
-                                <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
-                                />
-                            </svg>
-                        </div>
-                    ) : (
-                        <></>
-                    )}
+                            <InformationCircleIcon className=" h-5 w-5 cursor-pointer" />
+                        </span>
+                    ) : null}
                 </h2>
             )}
             {content && (