Custom icons and labels

If you wish to customize your icons, feel free to add following pieces of code to the Atom's styles.css:

  // Customize Define icon (e.g. constants in PHP).
  .symbols-tree-view .icon-define::before {
    font-family: JetBrains Mono; //Use your own font...
    font-weight: bold;
    content: 'D'; //Use your own letter...
    color: white;
    background-color: #107fb1; //Use your own color...
    border-radius: 50%;
    height: 16px;
    line-height: 16px;
    margin-top: 4px;
  }

  // Customize Define label
  .symbols-tree-view .icon-define {
    // Adjust what you want about the font...
  }

  // Customize Class icon.
  .symbols-tree-view .icon-class::before {
    font-family: JetBrains Mono;
    font-weight: bold;
    content: 'C';
    color: white;
    background-color: #b58900;
    border-radius: 50%;
    height: 16px;
    line-height: 16px;
    margin-top: 4px;
  }

  // Customize Class label
  .symbols-tree-view .icon-class {
    font-weight: 500;
    text-decoration: underline;
  }

  // Customize Function icon.
  .symbols-tree-view .icon-function::before {
    font-family: JetBrains Mono;
    font-weight: bold;
    content: 'F';
    color: white;
    background-color: #cb4b16;
    border-radius: 25%;
    height: 16px;
    line-height: 16px;
    margin-top: 4px;
  }

  // Customize Function label
  .symbols-tree-view .icon-function {
    // Adjust what you want about the font...
  }

  // Customize Variable icon.
  .symbols-tree-view .icon-variable::before {
    font-family: JetBrains Mono;
    font-weight: bold;
    font-size: 70%;
    content: '$';
    color: white;
    background-color: #a52a7c;
    border-radius: 50%;
    height: 12px;
    line-height: 12px;
    margin-top: 6px;
    margin-left: 2px;
    margin-right: 7px;
    width: 12px;
  }

  // Customize Variable label
  .symbols-tree-view .icon-variable {
    color: rgba(173, 170, 164, 0.6)
  }

The above styling makes the symbols tree look like this: