var image = ;//image link

Give the link to your image above

    .attr("xlink:href", image)
    .attr("x", -12)
    .attr("y", -12)
    .attr("width", 24)
    .attr("height", 24)

Make sure you give it attributes : x/y, width/height


Under the hood, FontAwesome and libraries like it are just setting the CSS content of their <i> tag to a unicode character from their font family.

If you inspect an icon ::before you'll see something like this:

.fa-camera-retro:before {
  content: "\f083";

In SVG this would be equal to:


Translating this into d3 then becomes:

  .symbol {
    font-family: FontAwesome;
    font-size: 16px;

  var t = svg.append("g")
    .attr("class", "symbol")
      return "&#xf083";
    .attr("x", function(d, i) {
      return x(d.x);
    .attr("y", function(d, i) {
      return y(d.y);

Here's a similar answer I gave about Highcharts.

See d3.js example here.

enter image description here

Related Query