Streaming live at 10am (PST)

A short tutorial on how to add particles.js to your project

I saw this question getting asked a few times here in the forum so I decided to create a short tutorial on how to add particles.js to your project.

Here it is:

Shoutout to @nicolaspvt and @chdaniel


Thanks for putting this together, always nice to have these resources available.

1 Like

Oh man, people like you make the world a better place Eli :pray::pray:

Thanks a lot. May I please ask you — since’s homepage uses these icons of logos, how can we integrate these different .svg’s instead of the particles? I see in the configurator on particles.js that under

Particles -> Shape -> Image

There’s a field for that, image.src but since I’m not technical I don’t know exactly whether you can add multiple images there…?

Thank you Daniel.

Slack in particular didn’t use particles.js.
As you can see they have 15 icons and each icon makes small circles. with simple interactions for each on of the icons.

I’ve updated the tutorial with some advanced tips, one of them is how to add you own shape.

1 Like

Oh wow Eli, that’s fantastic. Thank you for going the extra mile to explain this — is there any way I could buy you lunch/coffee/smth as a way of saying thank you?

1 Like

Oh you’re awesome! Thank you.
My biggest satisfaction is when I can share some knowledge and it helps others.

1 Like

I find that highly admirable Eli, thanks once again. There’s one thing I’d like to ask you: I tried adding more images in the particles.js, to recreate that homepage effect — since they have all these icons.

I think (from what I’ve read, not sure I understood correctly) the particle.js library doesn’t support multiple image assets?

I added something like:

  "image1": {
    "src": "",
    "width": 100,
    "height": 100
  "image2": {
    "src": "",
    "width": 100,
    "height": 100