Myob logo variation
<a href="#" title="MYOB Home" class="brand brand--site block">
<svg id="logo" class="brand__logo brand__logo--site block overflow-i--visible" preserveAspectRatio="xMidYMin slice" data-name="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 116.4" aria-label="MYOB Home">
<title>MYOB</title>
<defs>
<linearGradient id="logo-gradient" gradientUnits="userSpaceOnUse" x1="0" y1="58.2083" x2="283.4646" y2="58.2083">
<stop offset="0.36" stop-color="#6100A5"></stop>
<stop offset="0.4557" stop-color="#7001A0"></stop>
<stop offset="0.6409" stop-color="#980293"></stop>
<stop offset="0.8947" stop-color="#D9057E"></stop>
<stop offset="0.97" stop-color="#ED0677"></stop>
</linearGradient>
</defs>
<g fill="url(#logo-gradient)">
<path d="M46.8,34.2 c-4.4-5.3-11.1-8.6-19.4-8.6C10.8,25.5,0,37.3,0,52.7V88h5.1c3.5-0.2,10.3-1.9,10.5-12V52.4c0-6.9,4.8-11.6,11.8-11.6 c10.3,0,11.4,8.2,11.4,11.6V88h5.1c3.4-0.2,10.2-1.9,10.5-11.9V52.4c0-6.9,5-11.6,11.8-11.6c10.3,0,11.5,8.2,11.5,11.6V88h5.1 c3.5-0.2,10.4-1.9,10.5-12.2V52.7c0-16-10.1-27.2-27.1-27.2C58.3,25.5,51.4,28.9,46.8,34.2"></path>
<path d="M138.3,33.8l-13.1,36.4l-14.3-37.7c-2.2-6-7.8-5.6-7.8-5.6H90.9l24.2,59.2c0-0.1,0-0.1-0.1-0.2 c0,0,0,0.1,0.1,0.2c0,0.1,0.1,0.2,0.1,0.2l-0.1-0.3c0.8,2.4,0.6,3.7-0.2,6.1l-0.5,1.5c-2.8,7-6.8,8.9-15.2,8.4v0.1l5.8,14.3 c10.8-0.2,19-3.8,24.4-17.3l29.1-72.2l0,0l-10.9,0c0,0,0,0,0,0C147.1,26.9,140.9,27.1,138.3,33.8"></path>
<path d="M170.1,57.7 c0-10.5,6.7-17.9,15-17.9c8.3,0,15,7.3,15,17.9c0,10.3-6.7,17.4-15,17.4C176.8,75.1,170.1,68,170.1,57.7 M154.5,57.6 c0,18.2,13.7,31.8,30.6,31.8c16.9,0,30.7-13.6,30.7-31.8c0-18.2-13.8-32-30.7-32C168.2,25.5,154.5,39.4,154.5,57.6"></path>
<path d="M236.6,57.7c0-9.7,7-17.5,15.6-17.5 c8.6,0,15.6,7.6,15.6,17.5c0,9.7-7,17.1-15.6,17.1C243.6,74.9,236.6,67.2,236.6,57.7 M233.4,0L233.4,0 c-10.6,0-12.3,7.2-12.5,10.6V88l7.5,0c6,0.1,7.4-3.7,7.5-5.9v-0.3v-0.3c4.7,5,11.2,7.8,18.6,7.8c16,0,29-13.7,29-31.7 c0-18.1-13-31.8-29-31.8c-7,0-13.2,2.6-17.9,7.1V0H233.4z"></path>
</g>
</svg>
</a>
App marketplace logo variation
<a href="#" title="MYOB App Marketplace Home" class="brand brand--app-marketplace block">
<svg id="logo" class="brand__logo block overflow-i--visible" preserveAspectRatio="xMidYMin slice" data-name="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499.1 110" aria-label="MYOB App Marketplace Home">
<title>MYOB App Marketplace</title>
<defs>
<linearGradient id="logo-gradient" gradientUnits="userSpaceOnUse" x1="0" y1="58.2083" x2="283.4646" y2="58.2083">
<stop offset="0.36" stop-color="#6100A5"></stop>
<stop offset="0.4557" stop-color="#7001A0"></stop>
<stop offset="0.6409" stop-color="#980293"></stop>
<stop offset="0.8947" stop-color="#D9057E"></stop>
<stop offset="0.97" stop-color="#ED0677"></stop>
</linearGradient>
</defs>
<g fill="url(#logo-gradient)">
<path d="M130.69 32l-12.41 34.33-13.49-35.58a7.67 7.67 0 0 0-7.37-5.32H85.93l22.87 55.91-.06-.18a2.15 2.15 0 0 1 .09.23c0 .11.08.22.08.23l-.11-.28a7.87 7.87 0 0 1-.16 5.73l-.5 1.42c-2.65 6.61-6.4 8.4-14.36 8L99.3 110c10.24-.22 17.94-3.57 23.08-16.36l27.52-68.21h-10.33a9.73 9.73 0 0 0-8.88 6.57m30 22.56c0-9.94 6.37-16.87 14.19-16.87s14.19 6.93 14.19 16.87c0 9.72-6.37 16.43-14.19 16.43s-14.19-6.71-14.19-16.43M146 54.42c0 17.21 13 30.06 28.94 30.06s29-12.85 29-30.06-13.07-30.28-29-30.28S146 37.21 146 54.42M44.25 32.29c-4.13-5-10.5-8.15-18.32-8.15C10.17 24.14 0 35.2 0 49.84v33.3h4.81c3.27-.2 9.72-1.83 9.94-11.36V49.5c0-6.48 4.58-11 11.18-11 9.72 0 10.72 7.71 10.72 11v33.64h4.81c3.26-.2 9.67-1.82 9.94-11.26V49.5c0-6.48 4.7-11 11.18-11 9.72 0 10.84 7.71 10.84 11v33.64h4.8c3.28-.2 9.79-1.84 10-11.51V49.84c0-15.09-9.5-25.7-25.59-25.7a24 24 0 0 0-18.33 8.15m179.29 22.24c0-9.16 6.59-16.54 14.75-16.54s14.75 7.15 14.75 16.54c0 9.16-6.59 16.2-14.75 16.2s-14.75-7.26-14.75-16.2M220.57 0c-10.06 0-11.67 6.74-11.85 10v73.14h7.12c5.7.12 7-3.52 7.08-5.57V77a23.84 23.84 0 0 0 17.53 7.37c15.09 0 27.38-13 27.38-29.95s-12.29-30.06-27.38-30.06a23.94 23.94 0 0 0-16.87 6.7V0z"/>
</g>
<g>
<path fill="none" stroke="#231f20" stroke-miterlimit="10" stroke-width="1.42" d="M301.14 0v83.14"/>
<path d="M348.56 46.19h-9.69l-2.21 6h-2.45l8.14-21.55h2.79l8.24 21.55h-2.58zm-.75-2.06l-4.12-11-4.07 11z" fill="#231f20"/>
<path d="M363.67 36.72a6.51 6.51 0 0 0-5.47 2.81L358 37h-2v21.55h2.33v-8.67a6.24 6.24 0 0 0 5.29 2.61c3.93 0 7.24-3 7.24-8s-3.51-7.77-7.19-7.77zm-.32 13.68c-3 0-5.14-2.21-5.14-5.73s2-5.87 5.16-5.87c3 0 5.14 2.26 5.14 5.77s-2.09 5.83-5.16 5.83z" fill="#231f20" />
<path d="M381.84 36.72a6.53 6.53 0 0 0-5.48 2.81l-.25-2.5h-2v21.52h2.33v-8.67a6.25 6.25 0 0 0 5.29 2.61c3.94 0 7.25-3 7.25-8s-3.47-7.77-7.14-7.77zm-.33 13.68c-2.95 0-5.13-2.21-5.13-5.73s2-5.87 5.15-5.87 5.14 2.26 5.14 5.77-2.09 5.83-5.16 5.83z" fill="#231f20" />
<path d="M339.97 61.27l7.88 15.62 7.8-15.62h2.82l.88 21.56h-2.41l-.72-18.05-7.55 15.2h-1.75l-7.68-15.21-.7 18.06h-2.32l.86-21.56h2.89z" fill="#231f20" />
<path d="M375.81 78.94V72.5c0-3.41-2.22-5.13-6.16-5.13a10.42 10.42 0 0 0-5.65 1.46l.75 1.66a10.25 10.25 0 0 1 4.61-1.12c2.45 0 4.16.93 4.16 3.63v1.26a21.77 21.77 0 0 0-4.15-.47c-4.46 0-6.66 2-6.66 4.87s2.39 4.48 5.32 4.48a6.63 6.63 0 0 0 5.6-2.63 2.57 2.57 0 0 0 2.85 2.62l.28-1.73c-.76-.4-.95-1.08-.95-2.46zm-2.29-1.62c0 2.26-2.81 3.86-5.25 3.86-1.6 0-3.28-.68-3.28-2.63 0-1.77 1.41-2.89 4.63-2.89a19.94 19.94 0 0 1 3.9.44z" fill="#231f20" />
<path d="M380.15 67.67h2l.26 2.47a4.7 4.7 0 0 1 4.49-2.77 6.68 6.68 0 0 1 1.8.23l-.35 2.15a5.34 5.34 0 0 0-1.55-.24c-3.1 0-4.33 2.73-4.33 5.8v7.52h-2.31z" fill="#231f20" />
<path d="M393.33 73.56h.68l5.81-5.89h2.98l-6.79 6.88 7.33 8.28h-2.95l-6.38-7.21h-.68v7.21h-2.32V60.59h2.32v12.97z" fill="#231f20" />
<path d="M418.15 74.9c0-4.22-2.77-7.53-7.1-7.53-4.17 0-7.48 3.09-7.48 8s3.46 7.78 7.7 7.78a9 9 0 0 0 5.7-2l-1.1-1.52a7.89 7.89 0 0 1-4.49 1.44 5.15 5.15 0 0 1-5.46-5.07h12.16a8.84 8.84 0 0 0 .07-1.1zM406 74.18a5.08 5.08 0 0 1 5.11-4.78 4.72 4.72 0 0 1 4.76 4.78z" fill="#231f20" />
<path d="M422 67.67V62.6h2.31v5.07h4v2h-4v7.36c0 3.1 1.28 3.68 3.46 4.16l-.29 1.93c-2.76-.09-5.48-1.55-5.48-5v-8.43h-2.8v-2z" fill="#231f20" />
<path d="M438.52 67.37a6.54 6.54 0 0 0-5.52 2.81l-.25-2.51h-2V89.2h2.33v-8.67a6.29 6.29 0 0 0 5.3 2.61c3.93 0 7.24-3 7.24-8 .08-5.14-3.42-7.77-7.1-7.77zM438.2 81c-3 0-5.14-2.2-5.14-5.72 0-3.37 2-5.87 5.15-5.87s5.15 2.26 5.15 5.77S441.27 81 438.2 81z" fill="#231f20" />
<path d="M451.72 83.14a2.94 2.94 0 0 1-3-3.29V60.59H451v18.18c0 1.38.2 2.13 1 2.52z" fill="#231f20" />
<path d="M467.22 78.94V72.5c0-3.41-2.22-5.13-6.15-5.13a10.45 10.45 0 0 0-5.66 1.46l.76 1.66a10.18 10.18 0 0 1 4.6-1.12c2.45 0 4.17.93 4.17 3.63v1.26a22 22 0 0 0-4.15-.47c-4.46 0-6.67 2-6.67 4.87s2.39 4.48 5.32 4.48a6.65 6.65 0 0 0 5.61-2.63 2.56 2.56 0 0 0 2.84 2.62l.28-1.73c-.73-.4-.95-1.08-.95-2.46zm-2.28-1.62c0 2.26-2.81 3.86-5.26 3.86-1.6 0-3.28-.68-3.28-2.63 0-1.77 1.41-2.89 4.63-2.89a20.15 20.15 0 0 1 3.91.44z" fill="#231f20" />
<path d="M483.36 81.59a8.71 8.71 0 0 1-5 1.55 7.48 7.48 0 0 1-7.82-7.8 7.62 7.62 0 0 1 7.89-8 8.6 8.6 0 0 1 4.73 1.34l-1 1.7a7.44 7.44 0 0 0-3.61-1 5.5 5.5 0 0 0-5.67 5.84 5.43 5.43 0 0 0 5.57 5.77 7.26 7.26 0 0 0 3.74-1z" fill="#231f20" />
<path d="M499.1 74.9c0-4.22-2.77-7.53-7.09-7.53s-7.49 3.09-7.49 8 3.47 7.78 7.7 7.78a8.92 8.92 0 0 0 5.7-2l-1.1-1.52a7.87 7.87 0 0 1-4.49 1.44 5.16 5.16 0 0 1-5.46-5.07H499a9.24 9.24 0 0 0 .1-1.1zm-12.18-.72A5.08 5.08 0 0 1 492 69.4a4.72 4.72 0 0 1 4.76 4.78z" fill="#231f20" />
</g>
</svg>
</a>
Payments logo variation
<a href="#" title="MYOB PayBy Home" class="brand brand--payments block">
<svg id="myob-payby-logo" class="brand__logo brand__logo--payments block overflow-i--visible" preserveAspectRatio="xMidYMin slice" data-name="myob-payby-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630.9 116.4" aria-label="MYOB PayBy">
<title>MYOB PayBy</title>
<defs>
<linearGradient id="logo-gradient" gradientUnits="userSpaceOnUse" x1="0" y1="58.2083" x2="283.4646" y2="58.2083">
<stop offset="0.36" stop-color="#6100A5"></stop>
<stop offset="0.4557" stop-color="#7001A0"></stop>
<stop offset="0.6409" stop-color="#980293"></stop>
<stop offset="0.8947" stop-color="#D9057E"></stop>
<stop offset="0.97" stop-color="#ED0677"></stop>
</linearGradient>
</defs>
<g fill="url(#logo-gradient)">
<path d="M46.8,34.2 c-4.4-5.3-11.1-8.6-19.4-8.6C10.8,25.5,0,37.3,0,52.7V88h5.1c3.5-0.2,10.3-1.9,10.5-12V52.4c0-6.9,4.8-11.6,11.8-11.6 c10.3,0,11.4,8.2,11.4,11.6V88h5.1c3.4-0.2,10.2-1.9,10.5-11.9V52.4c0-6.9,5-11.6,11.8-11.6c10.3,0,11.5,8.2,11.5,11.6V88h5.1 c3.5-0.2,10.4-1.9,10.5-12.2V52.7c0-16-10.1-27.2-27.1-27.2C58.3,25.5,51.4,28.9,46.8,34.2"></path>
<path d="M138.3,33.8l-13.1,36.4l-14.3-37.7c-2.2-6-7.8-5.6-7.8-5.6H90.9l24.2,59.2c0-0.1,0-0.1-0.1-0.2 c0,0,0,0.1,0.1,0.2c0,0.1,0.1,0.2,0.1,0.2l-0.1-0.3c0.8,2.4,0.6,3.7-0.2,6.1l-0.5,1.5c-2.8,7-6.8,8.9-15.2,8.4v0.1l5.8,14.3 c10.8-0.2,19-3.8,24.4-17.3l29.1-72.2l0,0l-10.9,0c0,0,0,0,0,0C147.1,26.9,140.9,27.1,138.3,33.8"></path>
<path d="M170.1,57.7 c0-10.5,6.7-17.9,15-17.9c8.3,0,15,7.3,15,17.9c0,10.3-6.7,17.4-15,17.4C176.8,75.1,170.1,68,170.1,57.7 M154.5,57.6 c0,18.2,13.7,31.8,30.6,31.8c16.9,0,30.7-13.6,30.7-31.8c0-18.2-13.8-32-30.7-32C168.2,25.5,154.5,39.4,154.5,57.6"></path>
<path d="M236.6,57.7c0-9.7,7-17.5,15.6-17.5 c8.6,0,15.6,7.6,15.6,17.5c0,9.7-7,17.1-15.6,17.1C243.6,74.9,236.6,67.2,236.6,57.7 M233.4,0L233.4,0 c-10.6,0-12.3,7.2-12.5,10.6V88l7.5,0c6,0.1,7.4-3.7,7.5-5.9v-0.3v-0.3c4.7,5,11.2,7.8,18.6,7.8c16,0,29-13.7,29-31.7 c0-18.1-13-31.8-29-31.8c-7,0-13.2,2.6-17.9,7.1V0H233.4z"></path>
</g>
<path d="M325.3,28.5l1.1,9.2c4.9-6.8,12.8-10.5,21.3-10.5c15.6,0,28.4,12.1,28.4,31.5c0,18.3-11.4,32-28.6,32
c-7.9,0-15.5-3-20.1-9.2l-0.1,33.6h-12V28.5H325.3z M345.3,37.8c-12.1,0-18.2,10.3-18.2,21.4c0,12.2,7.4,20.9,18.6,20.9
c10.8,0,18.4-8.3,18.4-21.2C364,45.5,355.7,37.8,345.3,37.8L345.3,37.8z M437.7,90.7c-6.7,0-13.5-3-13.5-9.5h-0.1
c-4.1,6.3-12.2,9.5-20.5,9.5c-11.9,0-21.8-6.3-21.8-18.4c0-11.7,9.3-19.9,26.7-19.9c5.2,0,10.7,0.8,14.8,1.6v-3.6
c0-9.4-6.5-12.9-15.1-12.9c-6.3,0-12.9,1.9-18,4.6l-3.7-8.3c6.4-4.6,15.5-6.4,23.5-6.4c16.1,0,25.2,7,25.2,21v25
c0,4.6,0.9,7.1,4.1,8.7L437.7,90.7z M409.5,61.5c-11.2,0-16,3.8-16,10.1c0,6.8,5.7,9.5,11.4,9.5c8.4,0,18.4-5.6,18.4-13.7V63
C419.9,62.3,414.5,61.5,409.5,61.5z M490.2,28.5h12.3l-30.2,74c-3.9,9.5-11.5,13.9-19.4,13.9c-2.9,0-6-0.6-8.9-1.7l1.6-9.7
c1.6,0.3,3,0.7,4.9,0.7c5.2,0,9.6-2.1,12.9-10.5l2.1-5.2l-24.3-61.5h13.1l17.4,47.4L490.2,28.5L490.2,28.5z M518.1,38.9
c5.1-7.5,13.2-11.7,22.4-11.7c14.6,0,29.6,10.4,29.6,32.2c0,21.9-15.2,31.3-29.3,31.3c-9.5,0-17.1-4.3-22.7-12.1l-0.9,10.8H511V0
h7.1C518.1,0,518.1,38.9,518.1,38.9z M540.2,33.8c-12.6,0-22.5,9-22.5,24.9c0,15.7,9.7,25.6,22.9,25.6c13.4,0,22.4-10.2,22.4-24.9
C563,44.4,553.9,33.8,540.2,33.8z M623.5,28.5h7.3l-30.9,75.6c-3.3,8.2-10.5,12.2-17.7,12.2c-1.8,0-4-0.3-6.1-1l1-6
c1.4,0.3,2.5,0.5,4,0.5c5.2,0,10.1-2.3,13.5-10.4l4.1-9.8l-24.3-61.2h7.7l20.4,52.2L623.5,28.5L623.5,28.5z"
fill="#434548" />
</svg>
</a>
Usage guidelines
We're so sorry, there are currently no usage guidelines for this component 😥
If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to @marquee on the #astridd Slack channel.
Implementation guidelines
We're so sorry, there are currently no implementation guidelines for this component 😥
If you feel you can help out your fellow designers by creating implementation guidelines for this component, please reach out to @marquee on the #astridd Slack channel.