Symbols are really hard to understand at the beginning, so I will try to explain in a very simple way by providing real world examples.

Example 1 - no more conflicts with many 3rd party libraries

1. In JS it is impossible to access event listeners added by element.addEventListener('click', handler) and you create a function addEvent() which will, let say, store all the handler functions in a custom property of that element, let say, element.handlers.
2. Everything is perfect until there is another 3rd party library where author also decided to create a custom property on a DOM element and also called it .handlers and now we have a conflict (collision), everything broken up.
3. Now with ES6 Symbols it can be solved. Each library now just can create own element.[Symbol()]

Example 2 - define how JavaScript operators like instanceof works yourself

1. In lower level languages like C++ for example, by reading the code you never know exactly what even 1 + 2 could do because in C++ you can define how + should work.
2. Same is now in ES6. You can write own function on many language build-in operators like instanceof, for .. in and some others. This list is updated and currently there is very bad browser support for that.

3. In Google Chrome open the console and paste this code:

   const MyComponent = {
   create() {
    return {
      test() { console.log('test') }
    }
   },
   
   [Symbol.hasInstance](instance) {
     return typeof instance.test === 'function'
   }
   }
   

4. As you can see, code above is a simple Factory. You create a custom object with const obj = MyComponent.create() and now you can call if (obj instanceof MyComponent).
5. You now don't need new or custom methods for that anymore.
6. You won't have TypeError: invalid 'instanceof' operand MyComponent anymore.
7. You can define many other behaviours like iterators.

Example 3 - private properties or methods

1. Let say you have a MyPaginator.currentPage property which shouldn't be easily accessed from the outside and used only within internal object methods. If modified from outside everythjing can be broken now.
2. Without ES6 Symbol you could override that property from outside and in console you would get an autocomplete, you also could access that property with Object.keys() for example.
3. With ES6 Symbol you can save yourself and other developers by hiding that property. They are still not 100% private, but can be used for that. Symbol properties are not visible and iteratable to outside world with all regular technics.

There is a very good article I would strongly recommend to read - Metaprogramming in ES6: Symbols and why they're awesome

Another good article - ES6 in Depth: Symbols

Symbols are still badly supported and in most cases impossible to polyfill. Because of that in current world I wouldn't recommend to use them, except simple Symbol() properties on objects if you don't care about IE.