You could use CSS customization to style the note's title and icon.
More specific, you could use the customization technique described in this section from the User-Guide
to customize the notes' icons.
Then, edit the DITA Map PDF - based on HTML5 and CSS transformation scenario and either use a customization CSS directly in the scenario as a parameter, or use a publishing template that contains your customization CSS.
To use the CSS file directly, you should set the file path to your customization CSS file in the "args.css" parameter, from the scenario's "Parameters" tab and also set the value of the "args.copycss" parameter to "yes" (in order for the CSS to be copied in the WebHelp Responsive output folder).
If you decide to use a publishing template, which, among other things also uses your customization CSS, you can find information on how to reference the publishing templates, as well as more details on working with publishing templates also in the User-Guide
Last but not least, you could use the same publishing template
with both the DITA Map > WebHelp Responsive and the DITA Map PDF based on HTML5 and CSS transformation scenarios (selecting the custom publishing template you would create in the Template tab from the scenario configuration dialog).