How to Create a Custom File Icon

    You searched everywhere for the perfect icon theme, but didn’t like what you found, so you decided to make your own folder icon. Which software should I use and how do I get started? This Boxy SVG tutorial provides step-by-step instructions for creating a simple folder icon.

    That’s what it looks like: How can I view SVG thumbnails in Windows Explorer?


    Many tools can be used to create SVG files, but the relatively new Boxy SVG is one of the simplest and most flexible. Boxy SVG is available for Windows, MacOS and Linux. It can be downloaded for free from the Windows Store, Mac App Store and Snap. Just find the boxy svg in the right App Store to install it. Linux users can install it on any Ubuntu-based distribution. Find it in the Software Center or start the terminal and use it:

    sudo snap boxy-svg installation

    Custom folder icons of the Boxy Svg Software Center

    In Arch and Manjaro you must first add support for linking packets and then use the same command.

    Boxy SVG is also available as a web application, although a subscription is required to use it.

    Start with rectangle

    This Boxy SVG tutorial icon folder design. Since the folders are rectangular, select the Rectangle tool, 12. on the left toolbar, with the Full Rectangle icon.

    Custom folder icons with rectangular svg tool

    Use this option to identify the rectangle that covers the lower half of the canvas by default – as shown in the figure below.

    Custom folder symbols with Svg boxes draw the first rectangle

    Cloning and reformulation

    When the conversion tool is selected (first in the left toolbar with the cursor arrow), click on the rectangle. Use the checkpoints on the edge to change the size of the device slightly horizontally so that there is a small space on the right side.

    Customized folder icons for customizing the size when converting Svg boxes

    You can duplicate an element by copying and pasting it (Ctrl + C, then Ctrl + V on the keyboard), but try : Hold down the Alt-key, left click on the rectangle and drag it to the right. While dragging, also press and hold the Shift key to limit the movement of the rectangle to a single axis, in this case horizontal. Move it to the right of the existing rectangle.

    Custom folder icons with Boxy Svg cloned object

    Significant changes

    When you click an object a second time with the selected conversion tool, the checkpoints change color to indicate that you don’t need to resize the object anymore, but that you can now rotate (if you use points on the corners) or tilt (with points on the sides) the object.

    But let’s look at an even more universal way of transforming objects using separate points. The new rectangle must be adjusted so that it lies to the right of the previous rectangle. Then choose Form -> Form to Path from the top menu to convert the selected object to an editable path.

    Custom folder icons with Svg box change the size of the second rectangle

    You can now adjust the different points to change the shape. Although there is no need to simply tilt a rectangle, it shows how to adjust individual points, create more interesting shapes or get a better control perspective.

    Use the Edit tool (second on the left toolbar, just below the Transform tool, with a triangular arrow) to select two checkpoints on the right side of the new rectangle.

    Custom folder icons with Boxy Svg sample points

    After you have selected the two points, left-click on one of the two points while holding down the Shift key and drag it upwards (to limit the movement of the vertical axis).

    Backrest icons of the custom Svg glasses box

    Colours and perspectives

    Use the transformation tool to move your new rectangle – now smaller and tilted – to hit your larger rectangle. Use the fill tool (first in the right toolbar with a brush) to give it a colour. For the time being, use any colour as a springboard.

    Custom folder icons with Svg box fill color

    Create a clone of a small angled rectangle and move it to the left side of the large rectangle using the above methods.

    Deformed custom Svg box cloned folder icons

    When the conversion tool is active, select the Organize tool (with the cross symbol in the right toolbar or press A on the keyboard). Left click on the first slanted rectangle, hold down the Shift key and click on the second slanted rectangle to select both.

    Use the option group Return Z-order in the spreadsheet to send these rectangles behind your largest rectangle. The facade does the opposite and puts the object first. With the corresponding up and down options, the object can be moved forwards or backwards in individual steps.

    Custom folder icons with Svg box correspondence panel

    Make a clone of your largest rectangle and move it to the right and up so that it touches the other side of the distorted rectangle. One large rectangle must be in contact with the left side and the other with the right side, as shown in the figure below.

    Custom Icon Folders with Boxeshaped Svg Folders

    Give this rectangle back and give it a different colour so that it can be easily distinguished.

    Assign custom folder icons with the svg colors of the box

    Creating a valve

    When the basic form of our file is complete, it’s time to make it look more like a file. You can do this with the category panel. The figure below for the portfolio had to be adjusted slightly because it seemed too thick.

    Custom folder icons with framed svg resizing

    Make a short, wide rectangle on the white canvas. You have a basic idea of its size when you consider that it will soon turn into a flap for an already developed basic shape of a backrest.

    Folder for user-defined symbols with rectangular Svg box of the valve

    Select the editing tool (the second one in the left toolbar), hold down the Ctrl key and drag the checkpoint to the top left of the rectangle to the center of the vertex. This changes the top left edge into a curve. Repeat the reverse movement for the reference point at the top right by dragging it to the left, again to the center of the top edge of the rectangle. The result should be a rectangle with a square bottom and a convex top, as shown below.

    Backrest icons customized with framed Svg curves

    Move the flap so that it touches the top left of the large front rectangle of the backrest.

    Folder for user-defined symbols with Svg valve holder

    Change the size and position until you are sure the result looks like a folder.

    Customized folder icons with integrated Svg flap for size adjustment

    Gradients and shades

    The easiest way to create the illusion of volume and make the colors of the icons more interesting is to use gradients. Select the large rectangle at the front and the fill tool (first in the right toolbar or F on the keyboard). In the input area, select the second symbol of the linear gradient.

    Custom folder icons with framed Svg gradient

    Leave the other options as they are and pay attention to their color. To edit, select the edit tool (second in the left toolbar) and click on each checkpoint of the gradient line in the rectangle. You can see the color selectors in the right panel. Use it to change the color of the gradient to a dark gray, which then changes to a light yellow.

    Custom folder icons with framed Svg gradient change

    Note the value directly below the colour selectors – this is accompanied by a hexadecimal setting by default. Copy this value to the clipboard.

    Select the other rectangles and give them the same slope. Since it is not possible to copy gradients in Boxy SVG, you have to enter the color values manually. So you need to copy the color value from the previous gradient. You have to go back there to also copy the value of the second color and paste it into the gradient of the second rectangle. Repeat this process for the other two until all sides of the backrest have the same inclination.

    If the edit tool is active, play with the gradient on each side of the folder. Make the left and right side a little darker by dragging the light spot of your gradient outside the rectangle. Do the same for the back, but make it even darker.

    Custom folder icons with box Svg copy gradient

    Here are the top 5 graphic design tools for non-designers

    Last lines

    To make the folder icon look more like a folder than a yellow box, some pages need to be simulated as a good extra detail. At this stage you should already be familiar with the processes involved.

    Start by making a light grey rectangle for the back that is slightly smaller.

    Custom folder icons with Svg-Box on the right side

    Add a line around this rectangle to create the illusion of depth without the pseudo-perspective effects used in the portfolio. To do so, select a rectangle and choose the AVC tool (second on the right toolbar or S on the keyboard). Put it in black, but set the transparency control to about 80%, on the right. The border that appears around your rectangle should be transparent and grey, which is slightly darker than the main colour of the rectangle.

    Custom folder icons with Svg page design

    Copy and paste your rectangle. Give the new clone a slightly darker grey filling. Leave it as it is.

    Custom folder icons with Boxing Clone SVG page

    Use the Arrangement Panel to move the new rectangle backward, but with a right and left offset of the rectangle on the main page. Use the transformation tool to rotate it two to five degrees to the right.

    Svg Turning page boxing custom folder icons

    Repeat the last steps to create a third page after the first two.

    User-defined symbols from third-party Svg-Box cloning folder

    Go back to the Organize section, select the three pages and send them back. Use the Lift option to bring them to the front of the backrest step by step, so that they are in front of the backrest but behind the front of the backrest.

    Custom folder icons with Svg pages wrapped in the folder

    In this example, another rectangle is added to the folder. It was tilted in one direction, a gray gradient was added to the banner, and a composite panel was used to add a Gaussian blur filter (third on the right side of the toolbar, C on the keyboard). The result is a nice smooth shadow under the backrest. You can skip this little detail if you want.

    Custom folder icons of Svg end of box icon

    In the last step of this Boxy SVG tutorial use File -> Save as … (Ctrl + Shift + S) to save the file. You can also export it to a more user-friendly bitmap format that you can use in other programs such as PNG or JPEG by choosing File -> Export…. (Ctrl + E). Set the desired format options – resolution, compression – in the right pane and click Export to save your file to a selected file type.

    After saving the file, you can replace the gnome icons with the icons you just created.

    Now that you’ve created your symbols, follow the instructions to create a logo in Inkscape.

    That’s what it looks like:

    Is this article useful?
    YesNohow to make a picture a folder icon windows 10,how to change the icon of a folder mac,how to change folder icon windows 10,change program icon windows 7,change file icon windows 7,change program icon windows 10,how to make a picture a folder icon on mac,how to put picture on folder icon

    Recent Articles

    Inflammatory skin diseases

    INFLAMMATORY SKIN DISEASES AND THEIR TREATMENT The most common and important inflammatory skin diseases include neurodermatitis, psoriasis, acne and rosacea. We are also aware of many...

    Unravel the XDR Noise and Recognize a Proactive Approach

      Cybersecurity professionals know this drill nicely all too nicely. Making sense of heaps of info and noise to entry what actually issues. XDR (Prolonged Detection & Response) has been a technical acronym thrown round within the cybersecurity business with many notations and...

    PLATYPUS: Hackers Can Obtain Crypto Keys by Monitoring CPU Power Consumption

      Researchers have disclosed the small print of a brand new side-channel assault technique that can be utilized to acquire delicate data from a system...

    The Container configurations in Amazon ECS

      Revealed: November 7, 2020 | Modified: November 7, 2020 | Zero views A fast put up on superior container configurations in Amazon ECS. ECS container superior...

    Antivirus Testing – VIPRE for your Home and Business

      Individuals typically marvel, “What’s one of the best antivirus?” A number of distributors will declare that their product is one of the best within...

    Related Stories