SVG Icons

100%

✓ Published0🌍 Public

Ffcordon@pin.upv.es

Last edited Feb 9, 2025

Created on Feb 9, 2025

This example displays a small set of vector icons from Heroicons, shown as large, browser-rendered SVG elements. It demonstrates a practical way to embed icons directly in JavaScript without external image files. The code uses `d3.select` to build a flexbox layout, iterates over the icon keys with `selectAll` and `join`, and injects the raw SVG strings via `.html()`. The rendered SVG is then resized by setting the `width` attribute to 250 pixels.

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…

SVG Icons in JS

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.

CCurran Kelleher

88% match

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG rendering on a bare HTML page, using inline SVG elements to draw a circle and a more complex multi-path vector icon. The icon is composed of several `<path>` elements with distinct stroke colors and opacities, displayed within a nested `<svg>` that uses a `viewBox` coordinate system. The rendering approach is purely declarative, relying on standard SVG geometry and styling attributes rather than JavaScript or a visualization library. It demonstrates nested SVG structures, path data for custom shapes, and CSS-less styling via presentation attributes.

Ddutoit447@gmail.com

74% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, rendered on a 1000x1000 canvas. The visualization uses static, hard-coded coordinates and attributes to show basic vector graphics primitives with varied fills, strokes, and sizes. The code relies on SVG markup within the HTML structure, while the accompanying JavaScript imports D3’s `select` function to update a message element. It also showcases local ES6 module imports, highlighting how VizHub integrates D3 via UNPKG with modular code.

TTobi Olabode

72% match

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

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 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

72% match

Loading thumbnail…

SVG Fundamental

This example shows fundamental SVG shapes, including circles, rectangles, lines, and paths, along with CSS styling and hover effects like color transitions and stroke-width changes. It also includes a detailed icon constructed from multiple SVG paths. The code demonstrates raw SVG markup and CSS rules, with styling for text, body margins, and overflow. The implementation uses plain HTML and CSS without any JavaScript libraries or data sources.

GGusnaRWX

71% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes—a circle, a rectangle, a line, and a path—rendered within an 800 by 450 canvas. CSS styles define interactive transitions, changing the rectangle’s fill and stroke on hover over three seconds. The page also loads D3 via UNPKG, imports the `select` function, and uses it to set text content, alongside local ES6 module imports for a message.

Rrimi-299

71% match