---
path: "/textWithIcon/3"
component: "textWithIcon"
type: "molecule"
date: "2017-07-12T17:12:33.962Z"
title: "Text With Icon"
---
<codeblock>
  <TextWithIcon
    iconSrc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI2IDIwIj4KICA8ZyBmaWxsPSIjRkQ1NzUwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPGNpcmNsZSBjeD0iMSIgY3k9IjE5IiByPSIxIi8+CiAgICA8Y2lyY2xlIGN4PSIxOSIgY3k9IjE5IiByPSIxIi8+CiAgICA8Y2lyY2xlIGN4PSI3IiBjeT0iMTkiIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjI1IiBjeT0iMTkiIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjEzIiBjeT0iMTkiIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIi8+CiAgICA8Y2lyY2xlIGN4PSIxOSIgY3k9IjEiIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjciIGN5PSIxIiByPSIxIi8+CiAgICA8Y2lyY2xlIGN4PSIyNSIgY3k9IjEiIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjEzIiBjeT0iMSIgcj0iMSIvPgogICAgPGNpcmNsZSBjeD0iMSIgY3k9IjciIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjE5IiBjeT0iNyIgcj0iMSIvPgogICAgPGNpcmNsZSBjeD0iNyIgY3k9IjciIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjI1IiBjeT0iNyIgcj0iMSIvPgogICAgPGNpcmNsZSBjeD0iMTMiIGN5PSI3IiByPSIxIi8+CiAgICA8Y2lyY2xlIGN4PSIxIiBjeT0iMTMiIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjE5IiBjeT0iMTMiIHI9IjEiLz4KICAgIDxjaXJjbGUgY3g9IjciIGN5PSIxMyIgcj0iMSIvPgogICAgPGNpcmNsZSBjeD0iMjUiIGN5PSIxMyIgcj0iMSIvPgogICAgPGNpcmNsZSBjeD0iMTMiIGN5PSIxMyIgcj0iMSIvPgogIDwvZz4KPC9zdmc+Cg=="
    iconHeight='20px'
    iconWidth='26px'
    iconTop='-2px'
    iconLeft='-10px'
  >
    <Heading.h5
      mx={1}
      p={0}
      fontSize='1.9rem'
      letterSpacing='text'
    >
      documentation
    </Heading.h5>
  </TextWithIcon>
</codeblock>