This website uses cookies to enhance the user experience

Integrating SVG Icons in HTML

Share:

Web DevelopmentHTML

Hi,
I’m looking to integrate SVG icons into my HTML project. What’s the best way to include SVGs in HTML, and are there any performance considerations I should be aware of?

James Sullivan

9 months ago

2 Responses

Hide Responses

Olivia Bennett

9 months ago

Hi,
To integrate SVG icons in HTML, you can use the <img> tag, <object> tag, or inline SVG. Here are examples of each method:

  1. Using the <img> Tag:
<img src="icon.svg" alt="Icon">
  1. Using the <object> Tag:

<object data="icon.svg" type="image/svg+xml"></object>

3. **Inline SVG**:
  ```js
<svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor"/>
</svg>

Inline SVG is great for styling directly with CSS and for better control over the icon.

0

Olivia Bennett

9 months ago

Hi,
To integrate SVG icons in HTML, you can use the <img> tag, <object> tag, or inline SVG. Here are examples of each method:

  1. Using the <img> Tag:
<img src="icon.svg" alt="Icon">
  1. Using the <object> Tag:
    <object data="icon.svg" type="image/svg+xml"></object>
3. **Inline SVG**:
  ```js
<svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" fill="currentColor"/>
</svg>

Inline SVG is great for styling directly with CSS and for better control over the icon.

0