CSS Button with Icon

Last Updated:

CSS Button with icon is a type of button created using HTML and CSS. They provide a quick and easy way to add basic styling to any web page or application. The buttons can be styled to look like a traditional button or they can have a custom style applied to them.

Sample button with icon

<button class="button-with-icon-1">
  Button text
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
    <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
  </svg>
</button>

<button class="button-with-icon-2">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
    <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
  </svg>
  Button text
</button>

<button class="button-with-icon-3">
  Button text
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
    <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
  </svg>
</button>
/* Button Icon 1 */
.button-with-icon-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.5rem;
  border: 2px solid #6366f1;
  background-color: #6366f1;
  color: white;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.2s ease 0s, background-color 0.2s ease 0s,
    border 0.2s ease 0s;
}
.button-with-icon-1 svg {
  width: 20px;
  height: 20px;
  margin-left: 12px;
}
.button-with-icon-1:hover,
.button-with-icon-1:active,
.button-with-icon-1:focus {
  color: #6366f1;
  background-color: transparent;
}
/* Button Icon 2 */
.button-with-icon-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.5rem;
  border: 2px solid #6366f1;
  background-color: #6366f1;
  color: white;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.2s ease 0s, background-color 0.2s ease 0s,
    border 0.2s ease 0s;
}
.button-with-icon-2 svg {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
.button-with-icon-2:hover,
.button-with-icon-2:active,
.button-with-icon-2:focus {
  color: #6366f1;
  background-color: transparent;
}
/* Button Icon 3 */
.button-with-icon-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 25rem;
  color: white;
  font-size: 1rem;
  text-decoration: none;
  background-color: #6366f1;
  border: 0px transparent;
  transition: background-color 0.4s ease 0s;
}
.button-with-icon-3 svg {
  width: 20px;
  height: 20px;
  margin-left: 12px;
}
.button-with-icon-3:hover {
  background-color: rgba(99, 102, 241, 0.9);
}
/* Button Icon 1 */
.button-with-icon-1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1.5rem;
	border: 2px solid #6366f1;
	background-color: #6366f1;
	color: white;
	padding: 12px 30px;
	border-radius: 6px;
	text-decoration: none;
	transition: color 0.2s ease 0s, background-color 0.2s ease 0s, border 0.2s ease 0s;
	svg {
		width: 20px;
		height: 20px;
		margin-left: 12px;
	}
	&:hover {
		color: #6366f1;
		background-color: transparent;
	}
	&:active {
		color: #6366f1;
		background-color: transparent;
	}
	&:focus {
		color: #6366f1;
		background-color: transparent;
	}
}
/* Button Icon 2 */
.button-with-icon-2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1.5rem;
	border: 2px solid #6366f1;
	background-color: #6366f1;
	color: white;
	padding: 12px 30px;
	border-radius: 6px;
	text-decoration: none;
	transition: color 0.2s ease 0s, background-color 0.2s ease 0s, border 0.2s ease 0s;
	svg {
		width: 20px;
		height: 20px;
		margin-right: 12px;
	}
	&:hover {
		color: #6366f1;
		background-color: transparent;
	}
	&:active {
		color: #6366f1;
		background-color: transparent;
	}
	&:focus {
		color: #6366f1;
		background-color: transparent;
	}
}
/* Button Icon 3 */
.button-with-icon-3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 40px;
	border-radius: 25rem;
	color: white;
	font-size: 1rem;
	text-decoration: none;
	background-color: #6366f1;
	border: 0px transparent;
	transition: background-color 0.4s ease 0s;
	svg {
		width: 20px;
		height: 20px;
		margin-left: 12px;
	}
	&:hover {
		background-color: rgba(99, 102, 241, 0.9);
	}
}