The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default gap value. We stylize the underline with a custom offset and color. Icons are automatically sized to 1em to best match their associated text’s font-size.
Icon links assume Bootstrap Icons are being used, but you can use any icon or image you like.
When icons are purely decorative, they should be hidden from assistive technologies using aria-hidden="true", as we’ve done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding role="img" and an appropriate aria-label="..." to the SVGs.
Example
Take a regular <a> element, add .icon-link, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
Icon link
<a class="icon-link" href="#"> <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg> Icon link</a>
<a class="icon-link" href="#"> Icon link <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg></a>
Style on hover
Add .icon-link-hover to move the icon to the right on hover.
Icon link
<a class="icon-link icon-link-hover" href="#"> Icon link <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg></a>
Customize
Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
CSS variables
Modify the --bs-link-* and --bs-icon-link-* CSS variables as needed to change the default appearance.
Customize the hover transform by overriding the --bs-icon-link-transform CSS variable:
Icon link
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#"> <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg> Icon link</a>
Customize the color by overriding the --bs-link-* CSS variable:
Icon link
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#"> Icon link <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg></a>
Sass variables
Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
$icon-link-gap: .375rem;$icon-link-underline-offset: .25em;$icon-link-icon-size: 1em;$icon-link-icon-transition: .2s ease-in-out transform;$icon-link-icon-transform: translate3d(.25em, 0, 0);
Sass utilities API
Modify icon links with any of our link utilities for modifying underline color and offset.
Icon link
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#"> Icon link <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg></a>
FAQs
Icon is a small graphical representation of a program or file. When we double-click an icon, the associated file or program will be opened. For example, if we were to double-click on the My Computer icon, it would open Windows Explorer.
How to get space between icon and text? ›
To create a space between an icon and text in HTML, you can use the or the <span> tag with CSS.
What is a sentence for icon? ›
Examples of icon in a Sentence
He has become an icon in the movie business. a singer who has become a pop icon The Statue of Liberty has become an American cultural icon.
What does icon mean simple? ›
Icon as a word has a Greek origin meaning 'image' ; derived from the Greek word ``eikon'' which means image or resemblance. It can be referred to a person, symbol, image or picture that is widely admired for its conspicuous feature or allegiance.
Is my icon app free? ›
A free app for Android, by MagicVaried.
With the MyICON app, you can change the icons on your home screen with a variety of themes.
What is the best icon website? ›
Top 5 Websites for Free Icons
- 1. Flaticon
- 2. Freepik
- 3. The Noun Project
- 4. Icons DB
- 5. Google Material Icons
The simplest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as or  .
How do I add a tab in HTML? ›
You can add a tab space using other HTML entity whitespace characters that are wider than the HTML entity. The   HTML entity is about two spaces wide and   HTML entity is about four spaces wide. The width of these entities depends on the current font.
Which CSS property is used to control the padding around an HTML element? ›
All CSS Padding Properties
| Property | Description |
|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
1 more rowWord meaning:- Icon (noun): 1. A picture, image, or other representation. 2. A small picture or symbol that appears on a computer screen and is used to represent a command.
How To Add Icons. To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
Why is it called an icon? ›
Icon comes to us from the Greek word eikenai, meaning "to seem or to be like." In certain religions, statues of religious figures are referred to as icons — because they are prayed to as if they were the thing they represent. Icon can also describe a person closely linked to an idea.
What is the definition of an icon? ›
countable noun. If you describe something or someone as an icon, you mean that they are important as a symbol of a particular thing.
What best describes an icon? ›
The word 'icon' can be best described as a 'picture'. Icons are graphical symbols or visual representations used to denote a particular function, concept, or entity.
What is an example icon? ›
Examples of cultural icons include Elvis Presley, Marilyn Monroe and Michael Jordan. Fashion icons are people whose style is copied by others. Examples of fashion icons include Audrey Hepburn, Jackie Kennedy and Princess Diana. Religious icons are people or objects venerated by a religious group.
What does icon literally mean? ›
Icon comes to us from the Greek word eikenai, meaning "to seem or to be like." In certain religions, statues of religious figures are referred to as icons — because they are prayed to as if they were the thing they represent. Icon can also describe a person closely linked to an idea.
