Primer CSS Button with Icons

Last Updated : 24 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Buttons help us to initiate an action such as submitting a form, navigating to another link, etc. Primer CSS Button with Icons is used to add an icon with the button. In this article, we will discuss Primer CSS Button with Icons.

Primer CSS Button with Icons Classes:

btn: This class is used to create a basic default button.
octicon: This class is used to add octicon icons.

Syntax:

<button class="btn mr-2" type="button">
      SVG ICON 
  <span> ... </span>
</button>

Example 1: The following example demonstrates the Primer CSS Button with Icons.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Button with Icons </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Button with Icons </h3> <br> 
  
        <button class="btn-octicon mr-2" type="button"> 
            <svg class="octicon" viewBox="0 0 16 16" 
                 xmlns="http://www.w3.org/2000/svg" 
                 width="16" height="16" > 
                <path fill-rule="evenodd"
                    d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5  
                    0 000-13zM0 8a8 8 0 1116 0A8 8 0 010  
                    8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 
                    01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 
                    010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 
                    100-2 1 1 0 000 2z"> 
                </path> 
            </svg> 
        </button> 
  
        <button class="btn-octicon mr-2" type="button"> 
            <svg class="octicon" viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg" 
                 width="16" height="16" > 
                <path fill-rule="evenodd"
                    d="M8.22 1.754a.25.25 0 00-.44 0L1.698 
                    13.132a.25.25 0 00.22.368h12.164a.25.25 0 
                    00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 
                    2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 
                    0114.082 15H1.918a1.75 1.75 0  
                    01-1.543-2.575L6.457 1.047zM9 11a1 1 0 
                    11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 
                    00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> 
                </path> 
            </svg> 
        </button> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Button with Icons

Example 2: The following example demonstrates the Primer CSS Button with Icons.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> Primer CSS Button with Icons </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Button with Icons </h3> <br> 
  
        <button class="btn mr-2" type="button"> 
            <svg class="octicon" viewBox="0 0 16 16" 
                 xmlns="http://www.w3.org/2000/svg" 
                 width="16" height="16" > 
                <path fill-rule="evenodd"
                    d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5  
                    0 000-13zM0 8a8 8 0 1116 0A8 8 0 010  
                    8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 
                    01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 
                    010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 
                    100-2 1 1 0 000 2z"> 
                </path> 
            </svg> 
            <span> GFG 1 </span> 
        </button> 
  
        <button class="btn btn-primary mr-2" type="button"> 
            <svg class="octicon" viewBox="0 0 16 16"
                 xmlns="http://www.w3.org/2000/svg" 
                 width="16" height="16" > 
                <path fill-rule="evenodd"
                    d="M8.22 1.754a.25.25 0 00-.44 0L1.698 
                    13.132a.25.25 0 00.22.368h12.164a.25.25 0 
                    00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 
                    2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 
                    0114.082 15H1.918a1.75 1.75 0  
                    01-1.543-2.575L6.457 1.047zM9 11a1 1 0 
                    11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 
                    00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> 
                </path> 
            </svg> 
            <span> GFG 2 </span> 
        </button> 
    </div> 
</body> 
  
</html>