SVG Icons in JS

100%

SVG Icons in JS

✓ Published0🌍 Public

Last edited Jan 24, 2024

Created on Jan 24, 2024

This example demonstrates how to embed SVG icons directly in JavaScript code as template strings, avoiding the need for separate image files. It displays three icons from heroicons.com—an arrow path, an external link, and a gear—centered in a flexbox layout. Using D3.js, the code maps over the icon keys and injects the SVG markup into div elements via the `.html()` method, then resizes each icon to 250 pixels wide. The approach highlights a clean, dependency-light way to manage icons in web visualizations.

AI-generated description

This is in response to a question in the VizHub Discord on how to put icons in JavaScript and not use a bunch of image files.

This shows some random icons from https://heroicons.com/

Sometimes SVGs are larger than necessary. Try this tool and see if you can reduce the sizes: https://jakearchibald.github.io/svgomg/

MIT Licensed

Similar vizzes

Loading thumbnail…

Icon Chart using SVG Path Command

This example shows a 10-by-10 grid of circles that form an icon chart, with the first five circles in the top row highlighted in a lighter blue to mark a distinct subset. The visualization is built entirely with SVG and JavaScript, creating each circle dynamically using `document.createElementNS` and setting `cx`, `cy`, `r`, and `fill` attributes directly. The data is hard-coded in nested loops, and the SVG is appended to the page body, demonstrating a minimal, manual approach to icon-based charting without external libraries.

PPeter Cordone

74% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basics of SVG rendering using D3.js v7 within a React-compatible setup. The page displays a simple "Hello World" text alongside D3-generated symbol shapes, created via `symbol` and `symbols` APIs. It imports utilities like `ascending`, `range`, and `select` from D3 to handle array operations and DOM selection. The visualization also references a separate module (`something.js`) that computes a string, showing how external JavaScript files integrate with the main rendering logic. The code highlights fundamental SVG manipulation and D3’s modular imports.

AAitorGD

73% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle and a rectangle—hand-coded directly in an HTML document, with D3.js v5 loaded for broader data-driven visualization capabilities. The page also showcases ES6 module imports, including a custom `myMessage.js` module that exports a string, and uses D3’s `select` API to update a designated div’s text. Rendering relies entirely on SVG markup within the browser, with minimal styling applied via a separate CSS file. The code serves as a foundational template for integrating D3 with modular JavaScript.

DDjedjeX

73% match

Loading thumbnail…

SVG with HTML

This example demonstrates a static SVG scene composed of basic geometric shapes—a magenta circle, a red rectangle, a thick black line, and a triangular path—drawn directly in the HTML markup with fixed coordinates and styling. The page also includes a JavaScript module that imports D3’s `select` function to update the text of a `#message` div, while a separate CSS file sets a cyan background and hides overflow. The rendering relies entirely on SVG elements defined in the source, with no data binding or interaction.

SSushant Kunkekar

72% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational techniques for creating vector graphics using native SVG elements embedded in HTML. The page displays a grid of alternating blue and red rectangles, overlaid with white, blue, and red circles, and a large red stroked circle, all constructed with explicit SVG tags. The code uses CSS to define a transition effect on rectangle elements, which animates their properties, and a hover rule that is invalidly written with an equals sign instead of a colon. The rendering is fully client-side through the SVG specification, with no external JavaScript libraries involved.

Dd-schwabe

72% match

Loading thumbnail…

SVG - Database Icon

This example shows a classic cylindrical database icon drawn entirely with SVG shapes. The code uses SVG elements such as `ellipse`, `path`, and `circle` to render the icon's body, connector lines, and data dots on a 960x500 canvas. The icon is composed of stacked curved paths creating a three-dimensional cylinder effect, with the top ellipse and side straight lines forming the container. Grey circles on the side represent stored records, while the stroke and fill attributes control the black-and-white aesthetic. No JavaScript libraries are used; the visualization relies purely on static SVG markup.

RRaul Gamez

72% match

Loading thumbnail…

SVG Injection

This example demonstrates injecting HTML and SVG elements into a webpage using D3.js version 6. The code uses `d3.select` to target a div, appends a styled header, and creates an SVG canvas with a series of colorful circles. Each circle’s position, radius, and fill color are sequentially modified within a loop to produce a gradient-like visual effect. The example relies on D3’s `append` and `attr` methods, along with inline CSS styling, to render the final composition.

SSreenivasulu

72% match

Loading thumbnail…

SVG. Just saying

This example demonstrates the basic setup of a D3.js visualization using SVG, showing how to load D3 from a CDN and structure an HTML page with a message div and linked stylesheet. The code imports D3 via UNPKG and uses the `d3` object to render SVG content, though no specific data or interactive behavior is implemented. It serves as a minimal template for understanding how D3 v5 integrates with local ES6 modules and external libraries, highlighting the foundational structure for more complex visualizations.

NNemastoja

72% match