Maybe this reddit post may help to solve your problem: https://www.reddit.com/r/FirefoxCSS/comments/cco3il/adding_top_sites_or_highlights_removes_firefox/

This would mean you need to create (or - if already existing - adjust) a "manual correction" using file userContent.css to manually insert the logo into about:newtab / about:home tab even when top sites are enabled to be shown. As a pre-requisite, this would require that in "about:config" the setting "toolkit.legacyUserProfileCustomizations.stylesheets" is set to True to be able to use the userContent.css file. How to create the file and where to place it, can be found here: http://kb.mozillazine.org/index.php?title=UserContent.css.

Hey thanks for the response. I got this to work but I have no idea how to add the text after the logo.

It's a bit messy to inject two different background images, but check this out:

@-moz-document url("about:newtab"), url("about:home") {
  #root::before { /* Logo */
    display: block;
    position: absolute;
    left: 50%; 
    top: 20px;
    transform: translateX(-143px);
    content: "";
    width: 96px; height: 96px;
    background: url("chrome://branding/content/icon128.png") no-repeat;
    background-size: 96px;
  }
  main::before { /* Firefox name */
    display: block;
    position: absolute;
    left: 50%; 
    top: 20px;
    transform: translateX(-37px);
    content: "";
    width: 172px; height: 96px;
    background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
    background-size: 172px;
    -moz-context-properties: fill;
    fill: var(--newtab-search-wordmark-color);
  }
}

If you want to push the logos further down the page, adjust both of the top values from 20 pixels to some higher number of pixels.

Thank you so much!