Use image & Icon

Introduction Nodes Edges Groups Legend & Title Use image & Icon Options Layout Igraph Performance CART Shiny Interactions Physics Configure tools More...

Besides the various shapes, it’s also possible to use images and icons for nodes.

Images

To use images in nodes, you first have to set shape to image or circularImage.
Then, set the relative or absolute path on image value
An option is available in case of wrong path : brokenImage
And you can use borders with shapeProperties and useBorderWithImage

path_to_images <- "https://raw.githubusercontent.com/datastorm-open/datastorm-open.github.io/master/visNetwork/data/img/indonesia/"
 
nodes <- data.frame(id = 1:4, 
                    shape = c("image", "circularImage"),
                    image = paste0(path_to_images, 1:4, ".png"),
                    label = "I'm an image")
  
edges <- data.frame(from = c(2,4,3,3), to = c(1,2,4,2))

visNetwork(nodes, edges, width = "100%") %>% 
  visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
  visLayout(randomSeed = 2)

fontAwesome icons

visNetwork supports fontAwesome icons. Font-awesome is not part of default dependencies, but you can use addFontAwesome() if needed.

To use icons in nodes, you first have to set shape to icon.
icon options must be a list, so you have to use visNodes or visGroups, or pass directly in nodes data.frame(see Ionicons example below)
Choose the icon by the code, set size and color

nodes <- data.frame(id = 1:3, group = c("B", "A", "B"))
edges <- data.frame(from = c(1,2), to = c(2,3))

visNetwork(nodes, edges, width = "100%") %>%
  visGroups(groupname = "A", shape = "icon", 
            icon = list(code = "f0c0", size = 75)) %>%
  visGroups(groupname = "B", shape = "icon", 
            icon = list(code = "f007", color = "red")) %>%
  addFontAwesome()

Ionicons

Ionicons icons support. For dependencies, you can use addIonicons() if needed. Definition process is the same as fontAwesome icons, except you have to set face = 'Ionicons'.

nodes <- data.frame(id = 1:3, shape = "icon", icon.face = 'Ionicons',
                    icon.code = c("f101", "f100", "f101"))
edges <- data.frame(from = c(1,2), to = c(2,3))

visNetwork(nodes, edges) %>%
  addIonicons()