Color

Advanced editing in SVG Editor

Carbon Icons

Button Icon

Free SVG icon from the Carbon Icons collection. Download or copy for use in any project.

Download SVG

Collection: Carbon Icons
Format: SVG, React, Angular, Vue, Web Component, PNG
License: Apache-2.0 - Free for commercial use
Tags: button

The Button icon is available as a free SVG and is ready to drop into any web or app project.

img tag

<img src="https://proicons.com/icon/321044.svg" alt="Button icon" width="24" height="24">

React JSX

<img src="https://proicons.com/icon/321044.svg" alt="Button icon" width={24} height={24} />

Vue template

<img
  src="https://proicons.com/icon/321044.svg"
  alt="Button icon"
  :width="24"
  :height="24"
/>

CSS background

.icon-button {
  background-image: url('https://proicons.com/icon/321044.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
}

SVG markup

<svg width="640" height="360" viewBox="0 0 640 360" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="button">
<g id="button / 01 primary / field / 02 text and icon / 01 enabled">
<g id="Button">
<rect id="Background" x="144" y="148" width="352" height="64" fill="#0F62FE"/>
<g id="Label">
<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M178.232 171.248V188H180.248V180.848H184.904C186.408 180.848 187.564 180.42 188.372 179.564C189.18 178.708 189.584 177.536 189.584 176.048C189.584 174.56 189.18 173.388 188.372 172.532C187.564 171.676 186.408 171.248 184.904 171.248H178.232ZM184.904 179.072H180.248V173.024H184.904C185.704 173.024 186.324 173.232 186.764 173.648C187.204 174.064 187.424 174.656 187.424 175.424V176.672C187.424 177.44 187.204 178.032 186.764 178.448C186.324 178.864 185.704 179.072 184.904 179.072Z" fill="white"/>
<path id="Path" d="M192.619 188V175.616H194.539V177.896H194.659C194.883 177.304 195.283 176.776 195.859 176.312C196.435 175.848 197.227 175.616 198.235 175.616H198.979V177.536H197.851C196.811 177.536 195.999 177.732 195.415 178.124C194.831 178.516 194.539 179.008 194.539 179.6V188H192.619Z" fill="white"/>
<path id="Shape_2" fill-rule="evenodd" clip-rule="evenodd" d="M201.761 172.412C201.945 172.612 202.245 172.712 202.661 172.712C203.077 172.712 203.377 172.612 203.561 172.412C203.745 172.212 203.837 171.952 203.837 171.632V171.32C203.837 171 203.745 170.74 203.561 170.54C203.377 170.34 203.077 170.24 202.661 170.24C202.245 170.24 201.945 170.34 201.761 170.54C201.577 170.74 201.485 171 201.485 171.32V171.632C201.485 171.952 201.577 172.212 201.761 172.412ZM203.621 188V175.616H201.701V188H203.621Z" fill="white"/>
<path id="Path_2" d="M207.976 188V175.616H209.896V177.632H209.992C210.136 177.312 210.3 177.012 210.484 176.732C210.668 176.452 210.892 176.208 211.156 176C211.42 175.792 211.728 175.628 212.08 175.508C212.432 175.388 212.848 175.328 213.328 175.328C214.144 175.328 214.896 175.524 215.584 175.916C216.272 176.308 216.784 176.952 217.12 177.848H217.168C217.392 177.176 217.812 176.588 218.428 176.084C219.044 175.58 219.88 175.328 220.936 175.328C222.2 175.328 223.188 175.74 223.9 176.564C224.612 177.388 224.968 178.552 224.968 180.056V188H223.048V180.392C223.048 179.288 222.832 178.456 222.4 177.896C221.968 177.336 221.28 177.056 220.336 177.056C219.952 177.056 219.588 177.104 219.244 177.2C218.9 177.296 218.592 177.44 218.32 177.632C218.048 177.824 217.832 178.068 217.672 178.364C217.512 178.66 217.432 179.008 217.432 179.408V188H215.512V180.392C215.512 179.288 215.296 178.456 214.864 177.896C214.432 177.336 213.76 177.056 212.848 177.056C212.464 177.056 212.096 177.104 211.744 177.2C211.392 177.296 211.08 177.44 210.808 177.632C210.536 177.824 210.316 178.068 210.148 178.364C209.98 178.66 209.896 179.008 209.896 179.408V188H207.976Z" fill="white"/>
<path id="Shape_3" fill-rule="evenodd" clip-rule="evenodd" d="M236.654 187.424C236.966 187.808 237.482 188 238.202 188H239.282V186.32H237.866V179.504C237.866 178.192 237.45 177.168 236.618 176.432C235.786 175.696 234.618 175.328 233.114 175.328C231.994 175.328 231.066 175.564 230.33 176.036C229.594 176.508 229.058 177.08 228.722 177.752L229.874 178.832C230.21 178.272 230.63 177.824 231.134 177.488C231.638 177.152 232.266 176.984 233.018 176.984C234.01 176.984 234.746 177.216 235.226 177.68C235.706 178.144 235.946 178.816 235.946 179.696V180.92H233.498C231.69 180.92 230.358 181.232 229.502 181.856C228.646 182.48 228.218 183.376 228.218 184.544C228.218 185.696 228.582 186.608 229.31 187.28C230.038 187.952 231.058 188.288 232.37 188.288C233.234 188.288 233.978 188.096 234.602 187.712C235.226 187.328 235.674 186.752 235.946 185.984H236.066C236.146 186.56 236.342 187.04 236.654 187.424ZM234.002 186.488C233.602 186.6 233.162 186.656 232.682 186.656C231.93 186.656 231.334 186.488 230.894 186.152C230.454 185.816 230.234 185.344 230.234 184.736V184.232C230.234 183.624 230.486 183.16 230.99 182.84C231.494 182.52 232.298 182.36 233.402 182.36H235.946V184.4C235.946 184.72 235.866 185.016 235.706 185.288C235.546 185.56 235.322 185.8 235.034 186.008C234.746 186.216 234.402 186.376 234.002 186.488Z" fill="white"/>
<path id="Path_3" d="M242.292 188V175.616H244.212V177.896H244.332C244.556 177.304 244.956 176.776 245.532 176.312C246.108 175.848 246.9 175.616 247.908 175.616H248.652V177.536H247.524C246.484 177.536 245.672 177.732 245.088 178.124C244.504 178.516 244.212 179.008 244.212 179.6V188H242.292Z" fill="white"/>
<path id="Path_4" d="M259.246 175.616H261.142L255.598 190.88C255.454 191.248 255.31 191.556 255.166 191.804C255.022 192.052 254.846 192.248 254.638 192.392C254.43 192.536 254.17 192.64 253.858 192.704C253.546 192.768 253.166 192.8 252.718 192.8H251.734V191.12H253.678L254.614 188.48L249.982 175.616H251.902L254.878 184.04L255.454 186.056H255.574L256.246 184.04L259.246 175.616Z" fill="white"/>
<path id="Shape_4" fill-rule="evenodd" clip-rule="evenodd" d="M271.723 170.24H269.803V188H271.723V185.984H271.819C272.555 187.52 273.763 188.288 275.443 188.288C276.211 188.288 276.907 188.136 277.531 187.832C278.155 187.528 278.687 187.096 279.127 186.536C279.567 185.976 279.903 185.296 280.135 184.496C280.367 183.696 280.483 182.8 280.483 181.808C280.483 180.816 280.367 179.92 280.135 179.12C279.903 178.32 279.567 177.64 279.127 177.08C278.687 176.52 278.155 176.088 277.531 175.784C276.907 175.48 276.211 175.328 275.443 175.328C274.579 175.328 273.839 175.516 273.223 175.892C272.607 176.268 272.139 176.848 271.819 177.632H271.723V170.24ZM277.483 185.54C276.859 186.22 276.003 186.56 274.915 186.56C274.483 186.56 274.071 186.504 273.679 186.392C273.287 186.28 272.947 186.116 272.659 185.9C272.371 185.684 272.143 185.42 271.975 185.108C271.807 184.796 271.723 184.44 271.723 184.04V179.432C271.723 179.096 271.807 178.78 271.975 178.484C272.143 178.188 272.371 177.936 272.659 177.728C272.947 177.52 273.287 177.356 273.679 177.236C274.071 177.116 274.483 177.056 274.915 177.056C276.003 177.056 276.859 177.396 277.483 178.076C278.107 178.756 278.419 179.648 278.419 180.752V182.864C278.419 183.968 278.107 184.86 277.483 185.54Z" fill="white"/>
<path id="Path_5" d="M291.629 185.984H291.533C291.405 186.272 291.249 186.556 291.065 186.836C290.881 187.116 290.653 187.364 290.381 187.58C290.109 187.796 289.781 187.968 289.397 188.096C289.013 188.224 288.565 188.288 288.053 188.288C286.773 188.288 285.757 187.876 285.005 187.052C284.253 186.228 283.877 185.064 283.877 183.56V175.616H285.797V183.224C285.797 185.448 286.741 186.56 288.629 186.56C289.013 186.56 289.385 186.512 289.745 186.416C290.105 186.32 290.425 186.176 290.705 185.984C290.985 185.792 291.209 185.548 291.377 185.252C291.545 184.956 291.629 184.6 291.629 184.184V175.616H293.549V188H291.629V185.984Z" fill="white"/>
<path id="Path_6" d="M300.64 188C299.968 188 299.46 187.812 299.116 187.436C298.772 187.06 298.6 186.568 298.6 185.96V177.296H296.56V175.616H297.712C298.128 175.616 298.412 175.532 298.564 175.364C298.716 175.196 298.792 174.904 298.792 174.488V172.184H300.52V175.616H303.232V177.296H300.52V186.32H303.04V188H300.64Z" fill="white"/>
<path id="Path_7" d="M309.122 188C308.45 188 307.942 187.812 307.598 187.436C307.254 187.06 307.082 186.568 307.082 185.96V177.296H305.042V175.616H306.194C306.61 175.616 306.894 175.532 307.046 175.364C307.198 175.196 307.274 174.904 307.274 174.488V172.184H309.002V175.616H311.714V177.296H309.002V186.32H311.522V188H309.122Z" fill="white"/>
<path id="Shape_5" fill-rule="evenodd" clip-rule="evenodd" d="M317.388 187.832C318.076 188.136 318.836 188.288 319.668 188.288C320.5 188.288 321.256 188.136 321.936 187.832C322.616 187.528 323.204 187.092 323.7 186.524C324.196 185.956 324.58 185.276 324.852 184.484C325.124 183.692 325.26 182.8 325.26 181.808C325.26 180.832 325.124 179.944 324.852 179.144C324.58 178.344 324.196 177.66 323.7 177.092C323.204 176.524 322.616 176.088 321.936 175.784C321.256 175.48 320.5 175.328 319.668 175.328C318.836 175.328 318.076 175.48 317.388 175.784C316.7 176.088 316.112 176.524 315.624 177.092C315.136 177.66 314.756 178.344 314.484 179.144C314.212 179.944 314.076 180.832 314.076 181.808C314.076 182.8 314.212 183.692 314.484 184.484C314.756 185.276 315.136 185.956 315.624 186.524C316.112 187.092 316.7 187.528 317.388 187.832ZM322.212 185.624C321.556 186.264 320.708 186.584 319.668 186.584C318.628 186.584 317.78 186.264 317.124 185.624C316.468 184.984 316.14 184.008 316.14 182.696V180.92C316.14 179.608 316.468 178.632 317.124 177.992C317.78 177.352 318.628 177.032 319.668 177.032C320.708 177.032 321.556 177.352 322.212 177.992C322.868 178.632 323.196 179.608 323.196 180.92V182.696C323.196 184.008 322.868 184.984 322.212 185.624Z" fill="white"/>
<path id="Path_8" d="M328.702 188V175.616H330.622V177.632H330.718C331.022 176.928 331.45 176.368 332.002 175.952C332.554 175.536 333.294 175.328 334.222 175.328C335.502 175.328 336.514 175.74 337.258 176.564C338.002 177.388 338.374 178.552 338.374 180.056V188H336.454V180.392C336.454 178.168 335.518 177.056 333.646 177.056C333.262 177.056 332.89 177.104 332.53 177.2C332.17 177.296 331.846 177.44 331.558 177.632C331.27 177.824 331.042 178.068 330.874 178.364C330.706 178.66 330.622 179.008 330.622 179.408V188H328.702Z" fill="white"/>
</g>
</g>
<g id="Icon">
<path id="icon color" fill-rule="evenodd" clip-rule="evenodd" d="M451.938 180.062V172.562H450.062V180.062H442.562V181.938H450.062V189.438H451.938V181.938H459.438V180.062H451.938Z" fill="white"/>
</g>
</g>
</g>
</svg>

Button in other icon packs

Custom Brand Icons Brand

ProIcons (ProCode)

Radix Icons

TDesign Icons

Teenyicons Outline

Teenyicons Filled

Copied!

Button Icon

More from Carbon Icons

Button in other icon packs