Hi,
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).
Regards,
Costin