Try tapping both. The icons are the same size.
The one on the left is a 16px button. The one on the right is a 44px button with the same 16px icon inside. With a mouse on a desktop, you can hit either one. On a phone, with your thumb, or when you're moving fast, you'll miss the small one a lot.
I don't make the icon bigger to fix this. A 16px icon in a toolbar usually looks right, and I want to keep it that way. How big the icon looks and how big the clickable area is are two separate decisions. The clickable area should be at least 44px on its shortest side, and the extra space can just be padding. Nobody has to see it.
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
}
.icon-button svg {
width: 16px;
height: 16px;
}
When buttons sit next to each other in a row, their padding can take up the gap between them. That's fine. You want a finger to land on a button, not on empty space you added so the icons would look evenly spaced.
The same goes for text links in a list. The label might be one short line, but the whole row should be clickable, full width with some padding above and below the text. People don't aim for the letters. They aim for the row.
The way I check this is to use the page the way people will actually use it: with my thumb on a phone, and with a trackpad, not just a mouse. If I have to slow down to hit something, it's too small, even if the icon looks right.