Create new icon

Introduction

Take a look at source of typical ACYLS icon:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48">
  <defs id="acyl-settings">
    <linearGradient id="acyl-gradient" x1="0%" x2="0%" y1="0%" y2="100%">
      <stop offset="0%" style="stop-color:#FF0000;stop-opacity:1.000000"/>
      <stop offset="100%" style="stop-color:#FF6B00;stop-opacity:1.000000"/>
    </linearGradient>
    <g id="acyl-filter">
      <filter id="filter" x="-50%" y="-50%" width="200%" height="200%">
        <feTurbulence id="feTurbulence1" result="result1" numOctaves="1" baseFrequency="0.20 0.06" type="turbulence"/>
        <feGaussianBlur id="feGaussianBlur1" in="SourceGraphic" stdDeviation="2.0"/>
        <feComposite id="feComposite1" operator="out" in2="result1"/>
      </filter>
    </g>
    <g id="acyl-drawing">
      <path d="M 4,4 L 44,4 L 44,44 L 33,44 L 33,31 L 15,31 L 15,34 L 30,34 L 30,44 L 4,44 L 4,18 L 33,18 L 33,15 L 4,15 z " id="path-main"/>
    </g>
  </defs>
  <g id="acyl-visual">
    <use id="visible1" transform="translate(24,24) scale(1.00) translate(-24,-24)" style="fill:url(#acyl-gradient);filter:url(#filter)" xlink:href="#acyl-drawing"/>
  </g>
</svg>

Main icon appearance defined by original content placed inside acyl-drawing tag. Other stuff like acyl-visual, acyl-filter, acyl-gradient autogenerated with scripts. So the simplest way create new one is make copy of any icon from scalable/real_icons and change its acyl-drawing.

Create New Icon

Manual Drawing

If you are good in SVG drawing you can just edit icon source. Remember that dimensions of your image should not exceed 44 pixels, while canvas size 48x48.

For example, replace all inside acyl-drawing group tag with

<path d="M 2,5 2,43 46,24 z" id="path-main"/>

Congratulation, brand new "playbutton" icon has been done.

Tracing Bitmap

Another way is tracing bitmap image with help of any vector editor or utility, if you have raster icon with suitable look and license.

Here is step by step example for Inkscape editor:

1. Create new document with 48x48 canvas size.
2. Import bitmap.
3. Choose Trace Bitmap (Shift+Alt+B) and change mode setting to make your tracing result in single path. Trace bitmap.
4. Change size of new vector image to make biggest dimension equal 44 px.
5. Move vector image to the center of canvas.
6. Open image source (Ctrl+Shift+X) and copy path attribute.
7. Edit any copy of ACYLS icon replacing its path tag attribute with new one.

Add New Icon to ACYLS Pack

According ACYLS multipurpose icon mechanic you should place new icon to special real_icons directory, and then create one or more links.

$ cp awesome.svg ~/.icons/ACYLS/scalable/real_icons/apps/
$ cd ~/.icons/ACYLS/scalable/apps/
$ ln -s ../real_icons/apps/awesome.svg awesome.svg