Ask Question
SignIn

    Icons

    Font awesome 5

    Font awesome 4

    Google

    Bootstrap Icons

Bootstrap vector pen icon

In this, we learn how to show vector pen icon in bootstrap, How do i increase its size and change color.

Use this icon with a tag.

Use this icon with input tag.

Use this icon with button tag.

Use this icon as svg.

vector pen
<i class="bi-vector-pen"></i>
Example

vector pen

increase icon size using inline css

change icon color using inline css

use icon with html button tag

Full Code
<!Doctype html>
<html>
<head>
	<title>Bootstrap vector pen icon</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
	<h1 align="center">Bootstrap vector pen icon</h1>

	<p>increase icon size using inline css</p>
	<p>
		<i class="bi-vector-pen"></i>
		<i class="bi-vector-pen" style="font-size:20px"></i>
		<i class="bi-vector-pen" style="font-size:30px"></i>
		<i class="bi-vector-pen" style="font-size:40px"></i>
		<i class="bi-vector-pen" style="font-size:50px"></i>
	</p>

	<p>change icon color using inline css</p>
	<p>
		<i class="bi-vector-pen"></i>
		<i class="bi-vector-pen" style="color:red"></i>
		<i class="bi-vector-pen" style="color:blue"></i>
		<i class="bi-vector-pen" style="color:green"></i>
	</p>

	<p>use icon with html button tag</p>
	<p>
		<button style="padding: 5px">
			<i class="bi-vector-pen"></i> button
		</button>
	</p>
</body>
</html>
Icon With Anchor Tag

With Anchor Tag

Link
Code
<h1 align="center">with anchor tag</h1>
<a href="javascript:void(0);">
	<i class="bi-vector-pen" style="font-size:16px"></i> Link
</a>
Icon With Input Tag

With Input Tag

Use this with bootstrap css.

Code
<h1 align="center">with Input tag</h1>
<div class="input-group w-50">
	<span class="input-group-text">
		<i class="bi-vector-pen"></i>
	</span>
	<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example">
</div>
Icon With Button Tag

With Button Tag

Code
<h1 align="center">with button tag</h1>
<button style="padding: 5px">
	<i class="bi-vector-pen"></i> Button
</button>
Icon Html svg code

Icon Svg code

Code
<h1 align="center">Icon Svg code</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-vector-pen" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M10.646.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-1.902 1.902-.829 3.313a1.5 1.5 0 0 1-1.024 1.073L1.254 14.746 4.358 4.4A1.5 1.5 0 0 1 5.43 3.377l3.313-.828L10.646.646zm-1.8 2.908-3.173.793a.5.5 0 0 0-.358.342l-2.57 8.565 8.567-2.57a.5.5 0 0 0 .34-.357l.794-3.174-3.6-3.6z"/>
  <path fill-rule="evenodd" d="M2.832 13.228 8 9a1 1 0 1 0-1-1l-4.228 5.168-.026.086.086-.026z"/>
</svg>

Note :- You can use Bootstrap icons with i and span tag.

Note:- Use this icon with or without Bootstrap.

Download the svg of this icon and add in your document.

More icons

Bootstrap zoom out icon
Bootstrap zoom in icon
Bootstrap youtube icon
Bootstrap x square fill icon
Bootstrap x square icon
Bootstrap x octagon fill icon
Bootstrap x octagon icon
Bootstrap x lg icon
Bootstrap x diamond fill icon
Bootstrap x diamond icon
Bootstrap x circle fill icon
Bootstrap x circle icon
Bootstrap wrench icon
Bootstrap x icon
Bootstrap window sidebar icon
Bootstrap window icon
Bootstrap window dock icon
Bootstrap wind icon
Bootstrap wifi off icon
Bootstrap wifi 1 icon
Bootstrap wifi 2 icon
Bootstrap wifi icon
Bootstrap whatsapp icon
Bootstrap water icon
Bootstrap watch icon
Bootstrap wallet fill icon
Bootstrap wallet icon
Bootstrap wallet2 icon
Bootstrap volume up fill icon
Bootstrap vr icon
Bootstrap volume up icon
Bootstrap volume off fill icon
Bootstrap volume off icon
Bootstrap volume mute icon
Bootstrap volume mute fill icon
Bootstrap volume down fill icon
Bootstrap volume down icon
Bootstrap voicemail icon
Bootstrap vinyl fill icon
Bootstrap view stacked icon
Bootstrap view list icon
Bootstrap upload icon
Bootstrap unlock icon
Bootstrap upc icon
Bootstrap upc scan icon
Bootstrap unlock fill icon
Bootstrap union icon
Bootstrap ui radios grid icon
Bootstrap umbrella icon
Bootstrap umbrella fill icon
Bootstrap ui radios icon
Bootstrap ui checks grid icon
Bootstrap ui checks icon
Bootstrap type underline icon
Bootstrap type strikethrough icon
Bootstrap type italic icon
Bootstrap type h3 icon
Bootstrap type h2 icon
Bootstrap type h1 icon
Bootstrap type icon
Bootstrap type bold icon
Bootstrap twitter icon
Bootstrap twitch icon
Bootstrap tv fill icon
Bootstrap tsunami icon
Bootstrap tv icon
Bootstrap truck flatbed icon
Bootstrap truck icon
Bootstrap tropical storm icon
Bootstrap triangle half icon
Bootstrap trophy fill icon
Bootstrap trophy icon
Bootstrap triangle fill icon
Bootstrap triangle icon
Bootstrap trash2 fill icon
Bootstrap tree icon
Bootstrap tree fill icon
Bootstrap trash2 icon
Bootstrap trash icon
Bootstrap translate icon
Bootstrap trash fill icon
Bootstrap tornado icon
Bootstrap tools icon
Bootstrap toggles2 icon
Bootstrap toggles icon
Bootstrap toggle2 on icon
Bootstrap toggle2 off icon
Bootstrap toggle on icon
Bootstrap toggle off icon
Bootstrap three dots vertical icon
Bootstrap three dots icon
Bootstrap thermometer sun icon
Bootstrap thermometer snow icon
Bootstrap thermometer high icon
Bootstrap thermometer low icon
Bootstrap thermometer half icon
Bootstrap textarea t icon
Bootstrap thermometer icon
Bootstrap text paragraph icon
Bootstrap text right icon
Bootstrap text left icon
Bootstrap textarea resize icon
Bootstrap textarea icon
Bootstrap text indent left icon
Bootstrap text indent right icon
Bootstrap telephone x icon
Bootstrap telephone x fill icon
Bootstrap text center icon
Bootstrap terminal fill icon
Bootstrap telephone plus fill icon
Bootstrap telephone plus icon
Bootstrap terminal icon
Bootstrap telephone outbound fill icon
Bootstrap telephone outbound icon
Bootstrap telephone minus fill icon
Bootstrap telephone forward fill icon
Bootstrap telephone inbound fill icon
Bootstrap telephone icon
Bootstrap telephone minus icon
Bootstrap telephone inbound icon
Bootstrap telephone forward icon
Bootstrap telephone fill icon
Bootstrap tablet fill icon
Bootstrap tags icon
Bootstrap tablet icon
Bootstrap telegram icon
Bootstrap tags fill icon
Bootstrap tag icon
Bootstrap tablet landscape fill icon
Bootstrap tag fill icon
Bootstrap tablet landscape icon
Bootstrap sunset icon
Bootstrap table icon
Bootstrap symmetry vertical icon
Bootstrap symmetry horizontal icon
Bootstrap sunglasses icon
Bootstrap sunset fill icon
Bootstrap sun fill icon
Bootstrap sunrise icon
Bootstrap sunrise fill icon
Bootstrap suit heart fill icon
Bootstrap suit spade fill icon
Bootstrap sun icon
Bootstrap suit spade icon
Bootstrap suit heart icon
Bootstrap suit diamond fill icon
Bootstrap suit diamond icon
Bootstrap suit club fill icon
Bootstrap suit club icon
Bootstrap stoplights fill icon
Bootstrap subtract icon
Bootstrap stopwatch fill icon
Bootstrap stoplights icon
Bootstrap stop fill icon
Bootstrap stopwatch icon
Bootstrap stop circle fill icon
Bootstrap sticky fill icon
Bootstrap stop circle icon
Bootstrap stop btn fill icon
Bootstrap stop icon
Bootstrap stop btn icon
Bootstrap sticky icon
Bootstrap stickies fill icon
Bootstrap stars icon
Bootstrap star half icon
Bootstrap stickies icon
Bootstrap star fill icon
Bootstrap star icon
Bootstrap square fill icon
Bootstrap stack icon
Bootstrap square icon
Bootstrap square half icon
Bootstrap spellcheck icon
Bootstrap sort up alt icon
Bootstrap speedometer2 icon
Bootstrap speedometer icon
Bootstrap speaker fill icon
Bootstrap speaker icon
Bootstrap soundwave icon
Bootstrap sort up icon
Bootstrap sort numeric up icon
Bootstrap sort numeric up alt icon
Bootstrap sort numeric down alt icon
Bootstrap sort numeric down icon
Bootstrap sort down alt icon
Bootstrap snow3 icon
Bootstrap sort down icon
Bootstrap sort alpha up alt icon
Bootstrap sort alpha down alt icon
Bootstrap sort alpha up icon
Bootstrap sort alpha down icon
Bootstrap snow icon
Bootstrap snow2 icon
Bootstrap smartwatch icon
Bootstrap slash square fill icon
Bootstrap slash circle fill icon
Bootstrap sliders icon
Bootstrap skype icon
Bootstrap slash lg icon
Bootstrap slash square icon
×