Top 25 Free ASP.NET Icon Sets for UI Design

How to Use ASP.NET Icons in Your Razor Views (with Examples)Icons improve usability, communicate actions quickly, and make interfaces feel polished. In ASP.NET (Core or Framework) Razor Views you can include icons in several ways—SVGs, icon fonts (Font Awesome, Bootstrap Icons), inline images, or CSS background images. This article covers strategies, accessibility, performance, and practical examples to help you choose and implement icons in Razor Views cleanly and maintainably.

Why icons matter in web apps

Icons:

Enhance visual hierarchy and make primary actions more discoverable.
Save space compared to text labels when used correctly.
Improve scanability for users who skim pages.
When implemented with accessibility in mind, icons can make interfaces clearer for assistive technologies.

Icon options and trade-offs

Approach	Pros	Cons
SVG (inline)	Sharp at all sizes, styleable with CSS, accessible, smaller for single icons	Can bloat HTML if many inline SVGs
SVG (external sprite)	Single HTTP request for many icons, cacheable	Requires build step or sprite generator
Icon font (e.g., Font Awesome)	Easy to size and color with CSS, many icons available	Accessibility pitfalls, hinting issues, not as crisp as SVG on some displays
PNG/WebP/JPEG images	Simple, supported everywhere	Not scalable, needs multiple resolutions for clarity
CSS background images / data-URI	Keeps markup clean	Harder to handle accessibility and inline styling

Best practices

Prefer SVG for crispness, accessibility, and CSS styling.
Use inline SVG when you need to change colors or animate icons per instance.
Use an SVG sprite or external file for many repeated icons to reduce HTML size.
Ensure accessible names via aria-label, aria-hidden, or visually hidden text.
Keep icon decorative only when they add no semantic meaning; mark them aria-hidden=“true”.
Use semantic HTML: pair icons with buttons, links, or labels as needed.
Optimize SVGs (SVGO) and serve compressed assets to save bandwidth.

Using SVGs in Razor Views

1) Inline SVG example (simple button)

Inline SVGs are great when you want full control over the icon’s appearance per instance.

Example Razor snippet:

<button type="button" class="btn btn-primary" aria-label="Save">   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">     <path fill="currentColor" d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7z"/>     <path fill="currentColor" d="M7 3v4h10V3z"/>   </svg>   <span class="sr-only">Save</span> </button>

Notes:

Use fill=“currentColor” so the SVG inherits CSS color.
Include an accessible label: either aria-label on the button or visually hidden text (.sr-only).

2) SVG partial view for reuse

Create a partial view for each icon to avoid repeating SVG markup.

Views/Shared/Icons/_save.cshtml:

@* _save.cshtml *@ @{ string title = ViewData["title"] as string; } <svg class="icon icon-save" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="@(string.IsNullOrEmpty(title) ? "true" : "false")" focusable="false">   <title>@title</title>   <path fill="currentColor" d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7z"/>   <path fill="currentColor" d="M7 3v4h10V3z"/> </svg>

Use in a view:

@{ ViewData["title"] = "Save"; } @await Html.PartialAsync("Shared/Icons/_save")

Using SVG sprite sheets

SVG sprites reduce repetition by referencing symbols from a single file.

Create icons.svg with symbol definitions:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol id="icon-save" viewBox="0 0 24 24"> <path d="M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7z"/> <path d="M7 3v4h10V3z"/> </symbol> </svg>

Include the sprite file once (e.g., _Layout.cshtml) or serve externally.

Reference an icon in a Razor View:

<button class="btn" aria-label="Save"> <svg class="icon"> <use href="/images/icons.svg#icon-save" /> </svg> <span class="sr-only">Save</span> </button>

Notes:

For older browsers, use xlink:href or ensure server serves proper MIME types.
When the sprite is external, styling with currentColor still works if the symbol paths use currentColor.

Using icon fonts (Font Awesome / Bootstrap Icons)

Icon fonts are simple to integrate via CDN or npm packages.

Add stylesheet in _Layout.cshtml:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

Use in Razor views:

<button class="btn btn-primary" aria-label="Edit"> <i class="fa-solid fa-pen" aria-hidden="true"></i> <span class="sr-only">Edit</span> </button>

Accessibility tips:

Mark the (or ) as aria-hidden=“true” if the button has an accessible label.

Avoid relying solely on icon fonts for semantic meaning.

Server-side helper: tag helper or HtmlHelper

Create a Tag Helper (ASP.NET Core) to inject icons consistently.

IconTagHelper.cs:

using Microsoft.AspNetCore.Razor.TagHelpers; [HtmlTargetElement("icon", Attributes = "name")] public class IconTagHelper : TagHelper { public string Name { get; set; } public string CssClass { get; set; } public override void Process(TagHelperContext context, TagHelperOutput output) { output.TagName = "svg"; output.Attributes.SetAttribute("class", $"icon icon-{Name} {CssClass}".Trim()); output.Attributes.SetAttribute("role", "img"); output.Attributes.SetAttribute("aria-hidden", "true"); output.Content.SetHtml($@"<use href=""/images/icons.svg#{Name}"" />"); } }

Use:

<icon name="save" css-class="text-primary"></icon>

Accessibility checklist

Decorative icon only? Add aria-hidden=“true”.

Icon conveys meaning? Provide accessible text via aria-label, visible label, or inside SVG.</li> <li>Ensure focusable elements (buttons/links) have clear labels.</li> <li>Test with screen readers and keyboard navigation.</li> </ul> <hr> <h2 id="performance-tips">Performance tips</h2> <ul> <li>Combine icons into a sprite when many are used.</li> <li>Inline critical icons (above-the-fold) and lazy-load less important assets.</li> <li>Minify/optimize SVGs (SVGO) and compress responses (gzip/brotli).</li> <li>Cache external sprite or icon font via proper headers.</li> </ul> <hr> <h2 id="examples-small-gallery">Examples: small gallery</h2> <ol> <li> <p>Icon with label:</p> <pre><code ><a href="/profile" class="link"> <svg class="icon"><use href="/images/icons.svg#user" /></svg> Profile </a> </code></pre> </li> <li> <p>Icon button with tooltip:</p> <pre><code ><button class="btn" aria-label="Delete" title="Delete"> <svg class="icon"><use href="/images/icons.svg#trash" /></svg> </button> </code></pre> </li> <li> <p>Colored SVG via CSS:</p> <pre><code >.icon { width: 1em; height: 1em; vertical-align: -0.125em; } .icon.icon-alert { color: #d9534f; } </code></pre> <pre><code ><svg class="icon icon-alert" aria-hidden="true"><use href="/images/icons.svg#alert" /></svg> </code></pre> </li> </ol> <hr> <h2 id="tooling-and-workflows">Tooling and workflows</h2> <ul> <li>Use an icon management tool (IcoMoon, SvgSprite, Figma export) to build sprites.</li> <li>Automate optimization with SVGO in build pipelines.</li> <li>If using npm, install packages like @fortawesome/react-fontawesome (or CSS for Razor) or bootstrap-icons and serve only required assets.</li> </ul> <hr> <h2 id="conclusion">Conclusion</h2> <p>Use SVGs by default for crisp, accessible icons. Choose inline SVGs for per-instance control and sprites or Tag Helpers for maintainability. Always include accessible text or mark decorative icons hidden from assistive tech, optimize assets, and test with real devices and screen readers.</p> </div> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> </div> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);"> <nav class="wp-block-group alignwide is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-9b36172e wp-block-group-is-layout-flex" aria-label="Post navigation" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"> <div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="http://cloud93421.click/how-secure-eraser-protects-your-privacy-features-tips/" rel="prev">How Secure Eraser Protects Your Privacy: Features & Tips</a></div> <div class="post-navigation-link-next wp-block-post-navigation-link"><a href="http://cloud93421.click/powercad-dwg-to-image-converter-review-features-speed-and-quality/" rel="next">PowerCAD DWG to Image Converter Review: Features, Speed, and Quality</a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div> </nav> </div> <div class="wp-block-comments wp-block-comments-query-loop" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"> <h2 class="wp-block-heading has-x-large-font-size">Comments</h2> <div id="respond" class="comment-respond wp-block-post-comments-form"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/top-25-free-asp-net-icon-sets-for-ui-design/#respond" style="display:none;">Cancel reply</a></small></h3><form action="http://cloud93421.click/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit wp-block-button"><input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='490' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> </div> <div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> <h2 class="wp-block-heading alignwide has-small-font-size" style="font-style:normal;font-weight:700;letter-spacing:1.4px;text-transform:uppercase">More posts</h2> <div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow"> <ul class="alignfull wp-block-post-template is-layout-flow wp-container-core-post-template-is-layout-3ee800f6 wp-block-post-template-is-layout-flow"><li class="wp-block-post post-973 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud93421.click/psp-media-server/" target="_self" >PSP Media Server</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-10T04:20:18+01:00"><a href="http://cloud93421.click/psp-media-server/">10 September 2025</a></time></div> </div> </li><li class="wp-block-post post-972 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud93421.click/lain-and-the-philosophy-of-consciousness-what-it-means-to-be-human/" target="_self" >Lain and the Philosophy of Consciousness: What It Means to Be Human</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-10T04:01:03+01:00"><a href="http://cloud93421.click/lain-and-the-philosophy-of-consciousness-what-it-means-to-be-human/">10 September 2025</a></time></div> </div> </li><li class="wp-block-post post-971 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud93421.click/free-icon-to-pdf-converter-no-downloads-no-watermarks/" target="_self" >Free ICON to PDF Converter — No Downloads, No Watermarks</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-10T03:42:16+01:00"><a href="http://cloud93421.click/free-icon-to-pdf-converter-no-downloads-no-watermarks/">10 September 2025</a></time></div> </div> </li><li class="wp-block-post post-970 post type-post status-publish format-standard hentry category-uncategorised"> <div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"> <h3 class="wp-block-post-title has-large-font-size"><a href="http://cloud93421.click/blue-in-nature-discovering-the-beauty-of-the-sky-and-ocean/" target="_self" >Blue in Nature: Discovering the Beauty of the Sky and Ocean</a></h3> <div class="has-text-align-right wp-block-post-date"><time datetime="2025-09-10T03:16:53+01:00"><a href="http://cloud93421.click/blue-in-nature-discovering-the-beauty-of-the-sky-and-ocean/">10 September 2025</a></time></div> </div> </li></ul> </div> </div> </main> <footer class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-e5edad21 wp-block-group-is-layout-flex"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><h2 class="wp-block-site-title"><a href="http://cloud93421.click" target="_self" rel="home">cloud93421.click</a></h2> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div> </div> </div> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-570722b2 wp-block-group-is-layout-flex"> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Blog</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">About</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">FAQs</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Authors</span></a></li></ul></nav> <nav class="is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-fe9cc265 wp-block-navigation-is-layout-flex"><ul class="wp-block-navigation__container is-vertical wp-block-navigation"><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Events</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Shop</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Patterns</span></a></li><li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Themes</span></a></li></ul></nav> </div> </div> <div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-91e87306 wp-block-group-is-layout-flex"> <p class="has-small-font-size">Twenty Twenty-Five</p> <p class="has-small-font-size"> Designed with <a href="https://en-gb.wordpress.org" rel="nofollow">WordPress</a> </p> </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/twentytwentyfive\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script src="http://cloud93421.click/wp-includes/js/comment-reply.min.js?ver=6.8.2" id="comment-reply-js" async data-wp-strategy="async"></script> <script id="wp-block-template-skip-link-js-after"> ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.id = 'wp-skip-link'; skipLink.href = '#' + skipLinkTargetID; skipLink.innerText = 'Skip to content'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); </script> </body> </html>