# How to put an svg I made into a button on the left side?

**URL:** <https://forum.codewithmosh.com/t/how-to-put-an-svg-i-made-into-a-button-on-the-left-side/13869>\
**Category:** HTML/CSS\
**Created:** [July 22, 2022, 4:43pm UTC](https://forum.codewithmosh.com/t/how-to-put-an-svg-i-made-into-a-button-on-the-left-side/13869 "2022-07-22T16:43:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Novaliz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/novaliz/32/4166_2.png) [@Novaliz](https://forum.codewithmosh.com/u/Novaliz)\
**Post date:** [July 22, 2022, 4:43pm UTC](https://forum.codewithmosh.com/t/how-to-put-an-svg-i-made-into-a-button-on-the-left-side/13869/1 "2022-07-22T16:43:18Z")

</div>

I am a beginner and want to create a button like this:

![button](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/d/d16fe636454be755e71c67d066116a8917b81c5f.jpeg)

The svg file is in my own folder and not from a third party website. I also have problems alligning an icon in the button properly. Could someone paste me a code as an example. Then I can read and understand it.

---

<div class="post-metadata">

**Author:** ![UniqueNospaceShort](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/uniquenospaceshort/32/1814_2.png) [@UniqueNospaceShort](https://forum.codewithmosh.com/u/UniqueNospaceShort)\
**Post date:** [July 23, 2022, 2:39pm UTC](https://forum.codewithmosh.com/t/how-to-put-an-svg-i-made-into-a-button-on-the-left-side/13869/2 "2022-07-23T14:39:32Z")

</div>

Hi,

Never worked with SVG before but as I thought there’s nothing special about it.

Here is an example:

```auto
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
	<title></title>
	<link href="css/styles.css" rel="stylesheet" />
	<style>
		.icon{
			position: relative;
			height: 0.8em;
			margin-right:10px;
			top: 0px; // Change that for vertical alignement. If OK as is, delete.
		}
		
		button {
			color: white;
			font-weight: bold;
			background-color: red;
			padding:5px 10px;
			border-radius: 20px;
			border: none;
			height: 32px;

		}
	</style>
</head>
<body>
	<button><img src="dessin.svg" class="icon">Test</button>

	<script type="text/javascript" src="scripts.js"></script>
</body>
</html>

```

I did a random SVG drawing just for the sake of having one.

![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/e/e8f0a882d52c2a21c29940bd02e0b7df4349e824.png)

And here is the result.

![image](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/c/c70eab7420a3cabd18602038561badb21a8decd1.png)

Regards.

---

<div class="post-metadata">

**Author:** ![Novaliz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/novaliz/32/4166_2.png) [@Novaliz](https://forum.codewithmosh.com/u/Novaliz)\
**Post date:** [July 25, 2022, 3:25pm UTC](https://forum.codewithmosh.com/t/how-to-put-an-svg-i-made-into-a-button-on-the-left-side/13869/3 "2022-07-25T15:25:39Z")

</div>

Thank you very much!
