How to use the Commonwealth Bank icon
import { CommonwealthBankLogo } from "@/assets/icons/commonwealthbankLogo"
export default function Example() {
return <CommonwealthBankLogo width="32px" height="32px" />
}Brands icon
Commonwealth Bank JSX Icon
Copy the Commonwealth Bank icon as an optimized JSX SVG component for React, Next.js, dashboards, landing pages and Tailwind interfaces.
ComponentCommonwealthBankLogo
FilecommonwealthbankLogo.jsx
CategoryBrands
Copy-ready code
Commonwealth Bank React JSX component
// Source: https://raw.githubusercontent.com/glincker/thesvg/bc1ea3c9c5901d1d7a9438e760a9d071955ff29d/public/icons/commonwealth-bank/default.svg
// Asset license: MIT License
// Optimized, converted to monochrome currentColor JSX, and parameterized by JSXIcons.
export const CommonwealthBankLogo = ({ width = "40px", height = "40px", color = "#FFC72C", ...props }) => (
<svg {...props} width={width} height={height} viewBox="0 0 105.833 73.391" xmlns="http://www.w3.org/2000/svg" fill={color} color={color}>
<path d="m51.182 281.975 29.263-29.185-7.339-7.257-9.119 9.12zm0 0" transform="translate(0 -223.609)"/><path d="m51.182 223.609-29.18 29.18 29.18 29.186 12.805-27.323 9.12-9.114zm0 0" transform="translate(0 -223.609)"/><path d="M7.676 295.099C7.131 296.185 5.992 297 4.284 297 1.626 297 0 295.234 0 292.75c0-2.321 1.356-4.3 4.101-4.3 2.692 0 3.903 1.617 3.957 3.223H5.303c-.227-.849-.758-1.018-1.134-1.018-.488 0-1.313.338-1.313 2.046s.825 2.046 1.313 2.046c.294 0 .7-.12.984-.598a1.5 1.5 0 0 0 .217-.565h2.688c0 .521-.17 1.11-.382 1.515M11.57 297c-2.012 0-3.334-1.211-3.334-3.19 0-2.002 1.404-3.145 3.334-3.145 1.95 0 3.397 1.177 3.397 3.19 0 2.026-1.462 3.145-3.397 3.145m.039-4.593c-.705 0-.772.974-.772 1.481 0 .511.077 1.472.772 1.472.69 0 .767-.975.767-1.472 0-.507-.077-1.481-.767-1.481M30.112 296.74v-3.2c0-.554-.179-.781-.574-.781-.396 0-.656.362-.656.825v3.155h-2.524v-3.189c0-.555-.178-.767-.574-.767-.41 0-.67.347-.67.81v3.146h-2.476v-3.189c0-.555-.178-.767-.574-.767-.41 0-.67.347-.67.81v3.146h-2.476v-3.189c0-.555-.178-.767-.579-.767-.405 0-.666.347-.666.81v3.146h-2.475v-5.731h2.249l.058.506c.371-.463 1.008-.8 1.8-.8.79 0 1.591.38 1.862.882.308-.478 1.076-.873 1.891-.873.936 0 1.558.473 1.853.907.27-.434 1.018-.907 1.81-.907.993 0 1.529.405 1.9.907a2.19 2.19 0 0 1 1.8-.907c1.76 0 2.18 1.143 2.18 2.422v3.594zM36.172 297c-2.012 0-3.339-1.211-3.339-3.19 0-2.002 1.404-3.145 3.339-3.145 1.944 0 3.392 1.177 3.392 3.19 0 2.026-1.457 3.145-3.392 3.145m.034-4.593c-.705 0-.772.974-.772 1.481 0 .511.082 1.472.772 1.472s.767-.975.767-1.472c0-.507-.077-1.481-.767-1.481M43.573 296.73v-3.18c0-.555-.236-.772-.632-.772-.41 0-.67.352-.67.816v3.136h-2.476v-5.722h2.287l.02.574c.477-.574 1.12-.869 1.8-.869.824 0 2.18.473 2.18 1.945v4.072zM54.323 296.73l-2.59-.014s-.339-1.004-.474-1.64c-.226-.768-.25-1.096-.25-1.096s-.01.328-.227 1.095c-.121.589-.473 1.655-.473 1.655h-2.61l-1.723-5.722h2.692s.31.984.42 1.54c.169.631.203 1.003.203 1.003s.033-.362.217-1.004c.125-.593.43-1.539.43-1.539H52.2s.304.946.43 1.54c.193.675.212 1.003.212 1.003s.024-.319.217-1.004c.11-.545.415-1.539.415-1.539h2.567zM58.207 294.264c.014.574.26 1.071.931 1.071.314 0 .71-.159.825-.506h2.374c-.043.246-.183.54-.304.733-.637.95-1.843 1.424-2.996 1.424-2.118 0-3.382-1.255-3.44-3.05-.044-1.597.883-3.271 3.257-3.271 2.195 0 3.527 1.346 3.527 3.6zm.898-2.137c-.488 0-.816.381-.86.868h1.685c-.049-.463-.377-.868-.825-.868M66.709 296.73l-.068-.512c-.42.43-1.288.768-1.944.768-.42 0-1.37-.078-1.868-.744-.395-.545-.439-1.428-.091-1.992.477-.758 1.572-1.038 2.658-1.177.396-.044.95-.17.95-.517 0-.275-.144-.511-.506-.511a.69.69 0 0 0-.68.69h-2.355l.015-.068c.246-1.365 1.244-2.055 2.938-2.055 2.861 0 3.199.994 3.213 2.711l.02 1.607c.014 1.095.067 1.346.183 1.8zm-.319-2.533s-.328.1-.632.188c-.193.058-.675.15-.675.535 0 .193.154.43.497.415.641-.02.81-.395.81-.96zM69.521 288.653h2.476v8.077H69.52zM75.056 296.918c-1.64 0-2.08-.791-2.08-2.316v-2.012h-.757v-1.582h.757v-2.355h2.475v2.355h.975v1.582h-.975v1.559c0 .554.184.907.738.907.087 0 .203-.014.314-.035.058-.014.058-.025.058-.025v1.616a3.66 3.66 0 0 1-1.505.304M83.185 296.73h-2.48v-3.17c0-.555-.246-.782-.646-.782-.396 0-.656.367-.656.83v3.122h-2.577v-8.077h2.398v2.929c.377-.464 1.086-.869 1.79-.869.835 0 2.171.473 2.171 1.945zM88.768 292.46c.714-.212 1.192-.864 1.192-1.718 0-1.303-.936-2.084-2.495-2.084h-3.107v8.086h3.194c1.732 0 2.765-.859 2.765-2.306 0-1.274-.956-1.848-1.55-1.978m-3.7.405h2.485c.767 0 2.055.203 2.055 1.563 0 1.457-1.288 1.675-2.055 1.675h-2.485zm2.485-.651h-2.485V289.3h2.398c.666 0 1.785.188 1.785 1.461 0 .936-.603 1.453-1.698 1.453M95.725 296.141l-.077.01-.256.018c-.135 0-.323-.053-.323-.526v-3.146c0-1.095-.7-1.674-2.026-1.674-1.293 0-2.075.637-2.19 1.805l-.01.067h.675l.005-.053c.034-.285.125-.53.265-.719.25-.333.675-.506 1.22-.506 1.299 0 1.4.81 1.4 1.061v.169c0 .362-.232.463-.58.502-.829.116-1.862.299-2.465.656-.255.14-.472.352-.583.56-.247.439-.261 1.124-.034 1.625.26.58.878.898 1.727.898.883 0 1.549-.381 1.954-1.071v.082c.015.583.295.868.854.868l.454-.082-.01-.048zm-1.317-2.475v.84c0 .463-.352 1.775-1.9 1.775-.744 0-1.26-.449-1.26-1.095 0-.854.651-1.033 1.346-1.22.53-.14 1.293-.256 1.814-.3M98.51 290.82c-.787 0-1.468.429-1.796 1.066v-.907h-.665v5.765h.665v-3.218c0-1.264.71-2.108 1.776-2.108.936 0 1.394.56 1.394 1.708v3.618h.661v-3.618c0-.57 0-2.307-2.036-2.307M103.392 293.145c.072-.073 2.268-2.166 2.268-2.166h-.898l-2.895 2.764v-5.085h-.666v8.086h.666v-2.176l1.028-.936c.077.116 2.128 3.112 2.128 3.112h.81s-2.383-3.512-2.441-3.6" transform="translate(0 -223.609)"/>
</svg>
)
Built for the web
Use it in your stack
This copy-ready component works in React and Next.js projects, and the SVG can be adapted for any interface.
Looking for a similar mark? Browse the related icons below or explore the full brands collection.
Related JSX icons
FAQ
Is the Commonwealth Bank JSX icon free?
Yes. You can copy the JSX component and use it in React and Next.js projects.
Can I customize it?
Yes. Edit the SVG attributes or pass className, width, height and color props depending on the component.